【练习记录】基于Vue的电商后台管理系统（三）

r囧r小猫 2023-02-20 02:19 11阅读 0赞

### 目录 ###

*   *   *  1. 订单列表及数据报表功能开发
         *  2. 项目优化

这个练习到这里就接近尾声， 就剩下项目的优化以及部署上线部分。

### 1. 订单列表及数据报表功能开发 ###

*  对于订单列表中的地址修改功能，使用的是一个地址列表的js文件来获取的。
 *  物流进度查询使用到了Element UI中的时间线组件，注意该组件是2.6.0版本才引入的，所以如果版本低于2.6.0是不能使用的，我们可以在控制台通过以下命令来安装指定版本的Element UI：

// @后面是版本号
    npm i element-ui@2.6.3

*  数据报表的展示使用的是Echarts，需要安装相关插件进行使用。

需要注意的是图表数据的请求需要在页面的DOM渲染完成之后，才能发起，所以，我们需要把数据请求放在`mounted`生命周期函数中。

*  为美化页面，可以在每次点击链接的时候，在顶部显示一个进度条，这需要使用到一个插件：[NProgress][]

（1）首先，先执行以下命令，安装该插件：

npm install --save nprogress

（2）然后，引入相关依赖文件：

import NProgress from 'nprogress'
    import 'nprogress/nprogress.css'

（3）使用该插件的API

只需要使用两个API：`start()` 和`done()`，分别代表进度条开始加载和进度条结束加载。

将`start()`设置在`request`拦截器中，将`done()`设置在`response`拦截器中：

axios.interceptors.request.use(config => { 
      NProgress.start()
      config.headers.Authorization = window.sessionStorage.getItem('token')
      return config
    })
    axios.interceptors.response.use(config => { 
      NProgress.done()
      return config
    })

这样就实现了在点击链接时出现进度条的效果。

### 2. 项目优化 ###

项目的优化可以从以下几个方面来进行：

*  生成打包报告
 *  第三方库使用CDN
 *  Element UI组件进行按需加载
 *  路由的懒加载
 *  首页内容的定制

**（1）生成打包报告**

生成打包报告有两种方式：

*  通过命令行参数的形式生成报告

通过`vue-cli`的命令选项可以生成打包报告，`--report`选项可以生成`report.html`以帮助分析：

vue-cli-serve build --report

*  通过可视化UI面板直接查看报告

在可视化的UI面板中，通过控制台和分析面板，可以方便的查看项目中存在的问题  
![在这里插入图片描述][20200622003746272.png]  
**（2）为开发模式与发布模式指定不同的打包入口**

默认情况下，Vue项目中的开发模式与发布模式共用一个打包入口文件，即:`src/main.js`.

为了将项目的开发过程与发布过程分离，可以分为两种模式，指定各自的入口文件：

*  开发模式的入口文件为：`src/main-dev.js`
 *  发布模式的入口文件为：`src/main-prod.js`

如果想要修改入口文件，就要使用到webpack。但是，通过`vue-cli3`生成的项目，默认隐藏了所有的webpack配置项，如果想要修改webpack配置，可以在根目录创建`vue-config.js`文件来做自定义配置。

在`vue-config.js`导出的配置对象中，可以新增`configureWebpack`或者`chainWebpack`节点，来定义webpack的打包配置，两者的作用完全相同，唯一的区别就是修改webpack的方式不同：

*  `chainWebpack`：通过**链式编程**的形式来修改webpack的配置
 *  `configureWebpack`：通过**操作对象**的形式来修改webpack的配置

**chainWebpack：**

*  `entry()` ：获得默认入口
 *  `clear()`：清空默认入口
 *  `add()`：设置自己的打包入口

module.exports = { 
      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')
        })
      }
    }

**（3）第三方库使用CDN**

默认情况下，通过`import`语法导入的第三仿依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。

为了解决上述问题，可以通过webpack的`externals`节点，来配置并加载外部的CDN资源。凡是声明在`externals`中的第三方依赖包，都不会被打包。

使用externals节点配置的第三方库，不会在webpack打包时打包进去，而是在window中查找该文件。

*  首先，在vue-config.js的发布模式中进行设置：

config.set('externals', { 
            vue: 'Vue',
            'vue-router': 'VueRouter',
            axios: 'axios',
            lodash: '_',
            echarts: 'echarts',
            nprogress: 'NProgress',
            'vue-quill-editor': 'VueQuillEditor'
      })

*  然后，在`public/index.html`文件中引入CDN资源：  
    ![在这里插入图片描述][20200622013122161.png]

配置之前：

![在这里插入图片描述][20200622013658800.png]  
配置之后：  
![在这里插入图片描述][20200622013752819.png]

优化完之后，我们可以看到依赖项的大小明显减小了，但是Element UI的依赖项仍旧很大，也需要使用CDN来优化：  
![在这里插入图片描述][20200622014041753.png]  
只需要将`main-prod.js`中关于Element UI的代码注释掉，再在`index.html`中通过CDN引入相关js和css文件即可。

优化之后，依赖项变小了，打包后的文件也明显变小了：  
![在这里插入图片描述][2020062201453038.png]  
**（4）首页内容定制**

在不同打包环境下，首页内容可能会有所不同，可以通过插件的方式进行定制，插件的配置如下：

// 发布模式
    config.when(process.env.NODE_ENV === 'production', config => { 
          config.plugin('html').tap(args => { 
            args[0].isProd = true
            return args
         })
     })
    
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => { 
          config.plugin('html').tap(args => { 
            args[0].isProd = false
            return args
         })
     })

根据`isProd`的值来决定如何渲染页面的结构：

// 按需渲染页面的标题
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>
    // 按需加载外部CDN
    <% if(htmlWebpackPlugin.options.isProd){  %>
          // 这里面是通过externals加载的外部CDN资源 
    <% } %>

**（5）路由的懒加载**

将路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件，这就是路由的懒加载。

路由懒加载的实现主要有以下三个步骤：

*  安装`@babel/plugin-syntax-dynamic-import`包
 *  在`babel-config.js`配置文件中声明该插件  
    ![在这里插入图片描述][20200622021417584.png]
 *  将路由改为按需加载的形式

`webpackChunkName`是分组名称，可以将同一名称的组件打包到一个文件中。

// import Login from '../components/Login.vue'
    const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')
    // import Home from '../components/Home.vue'
    const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')
    // import Welcome from '../components/Welcome.vue'
    const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')

配置前：  
![在这里插入图片描述][20200622022601667.png]  
配置后：  
![在这里插入图片描述][20200622022714387.png]  
到这里，整个开发阶段就告一段落了，部署上线后面再总结~

[NProgress]: http://ricostacruz.com/nprogress/
[20200622003746272.png]: https://img-blog.csdnimg.cn/20200622003746272.png?
[20200622013122161.png]: https://img-blog.csdnimg.cn/20200622013122161.png?
[20200622013658800.png]: https://img-blog.csdnimg.cn/20200622013658800.png?
[20200622013752819.png]: https://img-blog.csdnimg.cn/20200622013752819.png?
[20200622014041753.png]: https://img-blog.csdnimg.cn/20200622014041753.png?
[2020062201453038.png]: https://img-blog.csdnimg.cn/2020062201453038.png?
[20200622021417584.png]: https://img-blog.csdnimg.cn/20200622021417584.png
[20200622022601667.png]: https://img-blog.csdnimg.cn/20200622022601667.png?
[20200622022714387.png]: https://img-blog.csdnimg.cn/20200622022714387.png