vue-shop结束|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第10天

订单制作

0. 渲染页面

   • 注：请求数据渲染表格时需要有total接受请求到的数据的总数 渲染操作和有关时间的时或者是需要使用到标签渲染是否需要使用到作用域插槽 渲染时间时还需要使用到过滤器来格式化时间

数据报表

0. 渲染页面

   • 使用echarts包绘制报表
   • 深拷贝数据使用lodash 里的deepClone
   • 合并对象使用lodash中的merge
   • 引入方式 import _from 'lodash'

项目优化上线

0. 项目优化策略

   • 生成项目进度条：nprogress包 在request拦截器中展示进度条 在reponse拦截器中隐藏拦截器

   • 安装插件在项目发布阶段移除所有的console：babel-plugin-transfrom-remove-console 根据使用提示在项目配置中使用 注：在开发阶段需要有输出 因此在配置好后的解决方案为

     打开babel.config.js，编辑代码如下：

     //项目发布阶段需要用到的babel插件
     const productPlugins = []
     ​
     //判断是开发还是发布阶段
     if(process.env.NODE_ENV === 'production'){
       //发布阶段
       productPlugins.push("transform-remove-console")
     }
     ​
     module.exports = {
       "presets": [
         "@vue/app"
       ],
       "plugins": [
         [
           "component",
           {
             "libraryName": "element-ui",
             "styleLibraryName": "theme-chalk"
           }
         ],
         ...productPlugins
       ]
     }
     

1. 生成打包报告

   ----直观的发现项目中存在的问题

   • vue-cli-service build --report

   • 或在可视化ui面板中，通过控制台和分析面板---（在项目终端中输入vue ui打开）

   • 自定义webpack配置文件 vue.config.js为开发模式与发布模式指定不同的打包入口

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

   • 通过chainWebpack自定义打包入口 在config.js中

     module.exports = {
         chainWebpack:config=>{
             //发布模式
             config.when(process.env.NODE_ENV === 'production',config=>{
                 //entry找到默认的打包入口，调用clear则是删除默认的打包入口
                 //add添加新的打包入口
                 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')
             })
         }
     }
     

   • 默认情况下，依赖项的所有第三方包都会被打包到js/chunk-vendors. ****** .js文件中，导致该js文件过大 那么我们可以通过externals排除这些包，使它们不被打包到js/chunk-vendors. ****** .js文件中

     module.exports = {
         chainWebpack:config=>{
             //发布模式
             config.when(process.env.NODE_ENV === 'production',config=>{
                 //entry找到默认的打包入口，调用clear则是删除默认的打包入口
                 //add添加新的打包入口
                 config.entry('app').clear().add('./src/main-prod.js')
     ​
                 //使用externals设置排除项
                 config.set('externals',{
                     vue:'Vue',
                     'vue-router':'VueRouter',
                     axios:'axios',
                     lodash:'_',
                     echarts:'echarts',
                     nprogress:'NProgress',
                     'vue-quill-editor':'VueQuillEditor'
                 })
             })
             //开发模式
             config.when(process.env.NODE_ENV === 'development',config=>{
                 config.entry('app').clear().add('./src/main-dev.js')
             })
         }
     }
     

   • 在index.html中引入

       <!-- nprogress 的样式表文件 -->
     
     在main-prod.js中删除引入的样式 同时删除elementUI组件的引用