乐趣区

关于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')
退出移动版