关于vue.js:Vue项目电商后台管理优化推荐

我的项目优化--进度条增加

装置nprogress，ui界面依赖装置依赖，搜寻nprogress进行装置即可
也能够在终端中装置 npm i nprogress -S

在main.js中导入进度条组件

//导入进度条插件import NProgress from 'nprogress'//导入进度条款式import 'nprogress/nprogress.css'

利用NProgress.start()显示进度条(利用申请拦截器)
```
NProgress.start()
```
利用NProgress.done()暗藏进度条(利用响应拦截器)
```
NProgress.done()
```

移除打包之后的console （babel.config.js 中设置）

装置babel-plugin-transform-remove-console
在终端中下载 npm i babel-plugin-transform-remove-console -S

在plugins节点下新增"transform-remove-console" ()

"plugins": [    [      "component",      {        "libraryName": "element-ui",        "styleLibraryName": "theme-chalk"      }    ],    // 这个是对开发和公布环境的下的所有console都是禁止输入的    "transform-remove-console"  ]

只在公布阶段移除console

利用process.env.NODE_ENV判断以后是公布是开发阶段

  var prodPlugins = []  if(process.env.NODE_ENV == 'production'){      prodPlugins.push('transform-remove-console')    }

利用开展运算符将数组外面的插件交给plugins

"plugins": [    [      "component",      {        "libraryName": "element-ui",        "styleLibraryName": "theme-chalk"      }    ],    ...prodPlugins  ]

利用vue.config.js批改webpack的默认配置

创立vue.config.js文件

js外部暴露出一个配置对象

module.exports = {  // 打包文件后会产生一个dist文件夹外面的index.html能够间接双击运行    publicPath: './',}

自定义入口文件

利用chainWebpack配置不同环境设置不同的入口文件

module.exports = {  // 打包文件后会产生一个dist文件夹外面的index.html能够间接双击运行    publicPath: './',  chainWebpack:config=>{      // 以后环境为 公布阶段      config.when(process.env.NODE_ENV == 'production',config=>{        config.entry('app').clear().add('./src/main-prod.js')      })      // 以后环境为 开发阶段      config.when(process.env.NODE_ENV == 'development',config=>{        config.entry('app').clear().add('./src/main-dev.js')      })    } }

通过cdn加载内部资源(就近的获取服务器资源)

因为入口文件中通过import导入包的形式，最终都会打包到同一个js文件中，所以导致chunk-vendors文件体积过大

既然这些文件都打包到同一个js文件里体积过大，所以疏忽一些js文件不打包(只须要配置公布阶段即可)

// 应用externals设置排除项// 在vue.config.js 中的公布模式下填写config.set('externals',{  vue:'Vue',  'vue-router':'VueRouter',  axios:'axios',  echarts:'echarts',  nprogress:'NProgress',  'vue-quill-editor':'VueQuillEditor'})

尽管疏忽了一些js文件，然而在入口文件中还有一些css文件体积也比拟大，所以间接将引入的css删除

import VueQuillEditor from 'vue-quill-editor'// 富文本编辑器import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'

将下面css删除后不打包，最终的款式必定会有问题，所以咱们在public中index.html中引入cdn的资源文件

<!-- nprogress 的样式表文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css"/><!-- 富文本编辑器 的样式表文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" /><link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" /><link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />

对应的js文件咱们也疏忽了没有打包，所以也是间接在public中index.html中引入cdn的资源

<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script><script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script><script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script><script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script><!-- 富文本编辑器的 js 文件 --><script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

配置element-ui的cdn资源

删除入口文件中的按需导入的elemen.js

导入element的cdn资源

<!-- element-ui 的样式表文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" /><!-- element-ui 的 js 文件 --><script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>

依据不同环境定制不同的首页内容

咱们要在index.html中来判断以后环境为开发阶段还是公布阶段，然而在index.html无奈获取到process.env.NODE_ENV，然而index.html中能够获取到htmlWebpackPlugin该插件的配置数据。

为什么？

第一个作用获取到index.html,在生成一个新的index.html
会主动引入打包的js和css文件

如果是公布阶段，咱们给htmlWebpackPlugin增加一个标识为true

//应用插件config.plugin('html').tap(args=>{  //增加参数isProd  args[0].isProd = true  return args})

如果是开发阶段也增加一个标识，为flase

//应用插件config.plugin('html').tap(args=>{  //增加参数isProd  args[0].isProd = false  return args})

在页面通过htmlWebpackPlugin获取到标识，判断该标识为true还是false，如果是true代表公布阶段，应该增加cdn资源，如果是false不须要增加
```
<% if(htmlWebpackPlugin.options.isProd){ %>cdn资源文件 <% } %>
```

实现路由懒加载

又名：路由按需加载

当匹配某个路由时，才去加载对应的资源文件

装置 @babel/plugin-syntax-dynamic-import

配置babel-plugins

"plugins": [    [      "component",      {        "libraryName": "element-ui",        "styleLibraryName": "theme-chalk"      }    ],    ...prodPlugins,    "@babel/plugin-syntax-dynamic-import"  ]

批改引入形式

const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../views/Login.vue')const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../views/Home.vue')const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../views/Welcome.vue')const Users = () => import(/* webpackChunkName: "user" */ '../views/users/Users.vue')const Rights = () => import(/* webpackChunkName: "right_roles" */ '../views/power/Rights.vue')const Roles = () => import(/* webpackChunkName: "right_roles" */ '../views/power/Roles.vue')const GoodCate = () => import(/* webpackChunkName: "goods" */ '../views/goods/cate.vue')const GoddsParams = () => import(/* webpackChunkName: "goods" */ '../views/goods/params.vue')const GoddsList = () => import(/* webpackChunkName: "goods" */ '../views/goods/list.vue')const GoodsAdd = () => import(/* webpackChunkName: "goods" */ '../views/goods/add.vue')const Order = () => import(/* webpackChunkName: "order" */ '../views/Order.vue')const Reports = () => import(/* webpackChunkName: "report" */ '../views/Reports.vue')