最佳Vue的细节操做

时间 2020-03-25

标签最佳 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>
  </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"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

命令行命令
vue inspect webapck的全部配置html

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

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

vue inspect --plugins 能够查看配置中的全部插件
webpack

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

图标的使用

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

npm i svg-sprite-loader -D

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

// 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.vueless

<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.jsasync

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.jssvg

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"></svg-icon></router-link> |
      <router-link to="/about">About<svg-icon icon-class="xm"></svg-icon></router-link>
    </div>
    <router-view/>
  </div>
</template>

项目开发阶段

动态路由

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