最佳Vue的细节操作

webapck配置文件 vue.config.js

// commonjs nodejs
const port = 7070
const title = 'vue的最佳实践'
module.exports = {
  // 程序的上下文
  publicPath: 'best-practice',
  devServer: {
    port
  },
  configureWebpack: {
    name: title
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- webpack的占位符 -->
    <title><%= htmlWebpackPlugin.options.title="" %=""/></title>
  </link></meta></meta></meta></head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title="" %=""> doesn't work properly without JavaScript enabled. Please enable it to continue.</%=></strong>
    </noscript>
    <div id="app"/>
    <!-- built files will be auto injected -->
  </body>
</html>



命令行命令
vue inspect webapck的所有配置


vue inspect --rules 查看webapck中的rules规则模块


vue inspect --rule vue 查看单个模块中的规则


vue inspect --plugins 可以查看配置中的所有插件


vue inspect --plugin vue-loader 单个插件的配置项

图标的使用

项目要使用icon,传统方案图标字体(字体文件+样式文件),不便维护,
svg方案采用svg-sprite-loader 自动加载打包,方便维护
使用icon前先安装依赖:svg-sprite-loader

npm i svg-sprite-loader -D

下载图标,存入src/icons/svg中 修改规则和新增规则,vue.confifig.js

// resolve定义一个绝对路径获取函数
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
// commonjs nodejs
const port = 7070
const title = 'vue的最佳实践'
module.exports = {
  // 程序的上下文
  //publicPath: 'best-practice',
  devServer: {
    port
  },
  configureWebpack: {
    name: title
  },
  //   链式webapck的配置  对config进行链式操作
  chainWebpack (config) {
    //   module中是所有的规则   获取svg
    // svg规则配置一下,排除icons目录
    config.module.rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
      // 如果遇到icons目录 就退回上一级
      // 新增icons规则 设置svg-sprite-loader
    config.module
      .rule('icons')// 定义一个规则
      .test(/\.svg$/) // 什么文件的后缀名
      .include.add(resolve('src/icons')) // 规则对应的测试的地址
      .end()
      .use('svg-sprite-loader') // 应用一下svg-sprite-loader
      .loader('svg-sprite-loader') // 找到它的loader 给他做进一步的配置
      .options({
        symbolId: 'icon-[name]'
      }) // 选项配置  symbolId表示将来以什么方式使用图标
      .end()
  }
}

封装成组件 components/SvgIcon.vue

<template>
    <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
        <use :xlink:href="iconName"/>
    </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style lang="less" scoped="">
    .svg-icon{
        width: 1em;
        height:1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

在svg同文件夹下创建一个index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon.vue'
// 全局引入SvgIcon组件
Vue.component('svg-icon', SvgIcon)
// require.context   webapck中的方法
const req = require.context('./svg', false, /\.svg$/)
//   ['qq.svg', 'wx.svg']
req.keys().map(req)

main.js中全局引入index.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './icons'
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

直接全局使用

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home
      <svg-icon icon-class="qq"/></router-link> |
      <router-link to="/about">About<svg-icon icon-class="xm"/></router-link>
    </div>
    <router-view/>
  </div>
</template>

项目开发阶段

动态路由

路由定义
路由分为两种 constantRouters 和 asyncRouters
**constantRoutes:代表那些不需要动态判断权限的路由,如登录、看板、404等通用页面
asyncRoutes:代表那些需要判断权限并通过addRoutes动态添加的页面**
待。。。



原文链接:segmentfault.com

上一篇:TypeError: Cannot read property 'range' of null
下一篇:渐进增强的 Promise

相关推荐

官方社区

扫码加入 JavaScript 社区