主要的脉络是按照这个

https://juejin.im/post/5c4a6fcd518825469414e062#heading-17

第三方库使用cdn加载

  1. const CompressionPlugin = require('compression-webpack-plugin')
  2. module.exports = {
  3.   chainWebpack: config => {
  4.       // 省略其它代码 ······
  5.       // #region 忽略生成环境打包的文件
  7.       var externals = {
  8.         vue: 'Vue',
  9.         axios: 'axios',
  10.         'element-ui': 'ELEMENT',
  11.         'vue-router': 'VueRouter',
  12.         vuex: 'Vuex'
  13.       }
  14.       config.externals(externals)
  15.     const cdn = {
  16.         css: [
  17.           // element-ui css
  18.           '//unpkg.com/element-ui/lib/theme-chalk/index.css'
  19.         ],
  20.         js: [
  21.           // vue
  22.           '//cdn.staticfile.org/vue/2.5.22/vue.min.js',
  23.           // vue-router
  24.           '//cdn.staticfile.org/vue-router/3.0.2/vue-router.min.js',
  25.           // vuex
  26.           '//cdn.staticfile.org/vuex/3.1.0/vuex.min.js',
  27.           // axios
  28.           '//cdn.staticfile.org/axios/0.19.0-beta.1/axios.min.js',
  29.           // element-ui js
  30.           '//unpkg.com/element-ui/lib/index.js'
  31.         ]
  32.       }
  33.       config.plugin('html')
  34.         .tap(args => {
  35.           args[0].cdn = cdn
  36.           return args
  37.         })
  38.       // #endregion
  39.     }
  40.   }
  41. }

用Mixin封装store操作

解决频繁的复制-粘贴劳作

  1. // news/index.vue
  2. import Vue from 'vue'
  3. import newsMixin from '@/mixins/news-mixin'
  4. export default {
  5.   name: 'news',
  6.   mixins: [newsMixin],
  7.   data () {
  8.     return {}
  9.   },
  10.   async created () {
  11.     await this.NEWS_LIST()
  12.     console.log(this.getNewsResponse)
  13.   }
  14. }

拆分路由

image.png

image.png

自动导入路由

image.png