11-商品列表
通过路由加载商品列表组件
14：完成了分类参数页面的开发，开始完成点击商品列表，跳转到该组件页面
1：创建组件页面，布局基础内容，面包屑和卡片以及带图标的搜索框和按钮，
2：完成了基础的外形布局，在router.js中导入list组件，并配置为/home组件下面的子组件
3：页面效果，点击跳转到商品列表页面
获取商品列表数据
15：完成了点击商品列表，跳转到商品页面，开始完成商品列表页面的数据获取
1：接口文档，携带params就是自己的查询对象，里面包含了query查询的信息，pagenum默认第一页，pagesize页面显示10条数据
2：在data中调用空数组用来接收数据，create中调用函数，函数在发起数据请求，获取数据，将获取到的数据赋值给商品列表去遍历展示，total总条数
3：拿到并打印了商品列表的数据
渲染商品表格数据
16：完成了商品列表的数据获取，开始完成用table表格把数据渲染出来
1：data接收商品列表数据，label就是标题， prop就是制定拿到的数据具体属性名
2：页面效果，在table中渲染了数据
自定义格式化时间的全局过滤器
17：完成了表格中的数据渲染后，开始完成时间格式化
1：在全局main。js入口文件中挂载全局过滤器， Vue.filter把接收到的数据，进行数据格式化，返回一个拼接好的字符串，格式化的日期格式，{{scope.row.add_time | dateFormat}}实现了日期格式化
2-3：页面效果，时间就被格式化了
实现商品列表的分页功能
18：完成了时间的格式化，开始完成分页的功能
1：在表格下面导入分页组件，设置分页的参数，实现分页功能，每次翻页都进行数据的更新
2：页面效果，完成了分页的各个功能
实现搜索与清空的功能
19：完成了分页功能，开始完成搜索关键字显示数据与数据的清空
1：clearable添加关闭按钮， @clear触发刷新页面的函数，就返回了所有数据。点击搜索中也是直接调用了函数，显示了对应关键字的数据。
2：完成了搜索功能，点击关闭按钮，实现了展示页面所有的数据。并清空了输入框
根据Id删除商品数据
20：完成了搜索功能，开始完成点击删除哟条数据的功能
1：点击事件中触发事件函数，携带要删除数据的id
2：删除事件中配置对话框，如果点击取消，提示已经取消，反之是确定，就发起数据请求，把要删除的id携带，实现了删除功能，如果删除失败，提示失败信息。如果成功就提示删除成功，并调用函数，重新刷新页面数据
通过编程式导航跳转到商品添加页面
21：点击完成了删除数据的功能，开始完成点击跳转到添加商品页面的功能
1：点击添加商品，事件函数中this.$router.push('/goods/add')跳转到这个二级路由页面。
2：创建该对应的组件页面，
3：在router中配置该组件页面，实现点击跳转到添加商品的页面
4：页面效果--点击添加商品，跳转到到了添加商品的页面
12-商品添加
渲染添加页面的基本结构
22：完成了商品列表页面的功能开发，开始完成点击跳转到添加商品页面的开发，点击跳转到添加商品页面，并创建基础外形
1-2-3：拷贝步骤条，并导入，在页面完成了面包屑，卡片视图和步骤条的渲染
4：页面效果完成了面包屑，卡片视图和步骤条的渲染
美化步骤条组件
23：添加了步骤条，开始美化步骤条的基础外形
1：:space间隔的距离， :active="activeIndex"高亮那一个步骤， finish-status=success 高亮的颜色， align-center步骤条在页面居中
2-3：页面效果，如果是自带的样式，需要通过调试面板，把类名找出来，重置样式即可。
渲染tab栏区域
24：完成了步骤条的样式美化，开始完成左侧竖形导航tab标签页面的样式布局
1-2：拷贝tabs标签组件，指定 :tab-position="'left'"标签页为左侧竖立的，
3：完成了左侧标签也的样式布局
实现步骤条和tab栏的数据联动效果
25：完成了标签页的样式布局，开始完成步骤条与标签页面数据共享联动效果
1：步骤条 :active=activeIndex - 0, 隐式转换为数值类型，
1.1： tabs标签页 v-model=activeIndex， data中的activeIndex=0，默认是0，步骤条和tabs标签页共用的是一个数据， 所以实现了数据联动的样式
1.2: 步骤条需要的是number类型的， 而tabs需要的是 string类型的。需要步骤条需要隐式转换
2：页面效果，点击左侧菜单，顶部的步骤条实现了数据联动的效果
分析表单的组成部分
26：完成了tab标签页与步骤条的步骤同步效果，开始分析表单组成的部分
1：tabs需要用一个form标签包裹起来，:model=addForm,表单对象。 :rules="addFormRules"验证规则对象， ref=addFormRef表单引用对象，
1.1：在data中创建初始的表单数据对象：addForm: { }表单对象， addFormRules: { }
3: 页面外观没发生改变，只是给tabs标签页套了个外层的表单对象而已。 并且设置了from表单的基本数据对象和验证规则对象
绘制基本信息面板的UI结构
27：完成了tabs用form表单包裹并设置了表单的基础数据绑定，开始完成基本信息页面的ui结构布局
1-2：开始完成添加商品必须携带的参数，在addForm中定义好
addForm: {
goods_name: ' ', 商品名称
goods_price: 0, 商品价格
goods_weight: 0, 商品重量
goods_number: 0, 商品数量
}
1.1：form已经绑定了数据对象， tab中的每个form-item绑定数据, label=标题名称， prpo="goods.name" 指定表单对象中的属性， 默认是空。
1.2：input双向数据绑定 v-model=addForm.goods.name，对该数据进行绑定，好进行表单验证。
1.2： addFormRules验证对象中有多个属性，每个属性都是数组形式，数组里面是对象形式的属性值
3：完成了表单数据的绑定和表单的内容验证
获取商品分类数据
28：完成了基本信息的页面绘制和表单验证，开始完成基本信息最后的级联选择器的数据获取打印
1-2：接口文档，直接请求，不用携带参数
3：在data中定义级联选择器的数据对象， catelist : { }, 在create中打印函数封装去获取级联数据，
3.1：函数封装中直接接口请求数据，如果数据请求不成功就提示，成功就打印返回的数据，并把数据this.catelist=res.data给填充好。
绘制商品分类的级联选择器
29：完成了级联选择器的数据获取， 开始渲染级联选择器的数据，并打印级联的id，id是一个3级的数组ID
1：form-item表单的这一项，已经prop绑定好了数据，cascder级联选择器开始绑定数据， :props指定的数据对象cateProps :options="catelist"商品分类列表。 v-model=addForm.goods_cat 双向数据绑定商品所属分类的数组。 @change级联选择器触发的时候，会触发这个事件对象，打印级联选择器的id
2：完成了级联选择器的数据渲染，和级联数据：props数据配置对象，级联选择器中的具体每一级数据都是它渲染的，每一级都是一个完整的小对象。catelist就是接口获得到的分类的数据源
3；选中了3级数据，就会把每一级的id放在一个数组中打印出来
注意props中3个配置参数的属性名是按照官网配置的，属性值是按照接口文档给的。都是有规范的
只允许选中三级商品分类
30：渲染并打印了级联选择器的3级id，开始完成只渲染3级数据，2级的不能在级联选择器中渲染。
1：@cahnge中会触发选中的状态，如果选中转态goods_cat数组中的长度小于了3，就将选中级联的数据清空，其实就是清空了id，就等于白选了。
2：页面效果，2级的数据是不允许渲染在级联选择器中。 但是打印数据能在控制台中看到，确实选择了是2级的数据
阻止页签切换
31：阻止了级联选择器只能选选中3级的数据，开始完成如果级联未选中3级数据，其他tab标签页是不允许点击切换页面的。
1：:before-leave切换是触发的钩子函数，里面有当前的，和切换的标签页的序号，所以如果是第一页标签页且选中的级联数据不满3级，弹出提示请选中3级数据的提示框。return false， 阻止后续代码的执行
2-3：页面效果，如果没选中3级联数据，是不允许tab标签页面切换的。
获取动态参数列表数据
32：阻止了级联若未全选，就不允许tab标签页的切换，开始完成商品参数页面的列表数据获取，因为要点击切换到商品参数页面了
1：@tab-click点击触发函数，如果点击的是商品参数，就发起数据请求，携带选中的id，和选中的是静态还是动态面板，如果数据请求失败，就弹出提示，反之把数据动态参数列表中填充数据。实现了动态参数列表页面的参数获取
2：点击切换到商品参数的页面，就打印出来了该页面的数据。供后续渲染使用
绘制商品参数面板中的复选框组
33：完成了点击商品参数页面的数据获取，开始完成用标签把数据渲染展示出来
1：导入多选框组
2-3：开始渲染多选框中的数据，在form-item中绑定数据并渲染数据。 :label渲染的标题， v-for遍历动态参数数组。 :key提高新能。
3.1：外层每行遍历了数据，内层checkbox-group开始渲染接收到的数据。 v-model双向数据绑定监听点击的数据名称。 :label渲染的数据名称， border添加边框。
4：完成了商品参数页面数据渲染，将数据填充到了多选框中。
优化复选框的样式
34：商品参数页面的数据被渲染到了多选框中，开始完成页面样式的修改
1：在调试面板中找到该元素的.el-checkbox类名，如果设置的不生效，就important提高权重使其生效
2-3：页面效果，每个多选框的右侧有了外边距，左侧没有的，实现了换行对齐，但右侧隔开的样子
获取静态属性列表数据
35：完成了商品参数页面动态数据的渲染，开始完成商品属性页面的数据获取并打印
1：接口文档，需要接受选中的级联id和点击的面板是不是静态面板。
2：如果点击的tab标签页2，就发起数据请求把级联的id和选中的静态面板携带过去，如果数据请求失败弹出失败信息，成功就将数据填充到静态数据空数组中，等待等下的数据源渲染
3：控制台中打印了数据，数据获取成功
渲染商品属性面板的UI结构
36：完成了商品参数页面的静态数据的获取，开始完成数据渲染在输入框中
1：在tab标签页中使用form-item每一项数据， v-for遍历静态属性的数据，把标渲染到:label中，item中嵌套了一个输入框。 v-model双向数据绑定attr_val属性的值。这样即渲染了数据框中的数据，也实现了输入框中数据的联动
2：页面效果，渲染了每行item，每行的item中又嵌套了input输入框
初步使用upload上传组件
01：完成了商品参数也买的数据渲染，开始完成商品图片页面的图片上传组件的开发
1:-2：导入upload组件
3-4：:action图片要上传到的后台API接口地址， 将这个地址抽离在了data数据中，这样更优雅些。 :on-preview点击缩略图时触发的放大事件函数， :on-remove点击关闭预览图时触发的事件函数。 这2个事件触发函数也需要定义好，要不会报错。
5：点击上传，选择图片后，页面展示了缩略图，表示图片组件正确使用了。
手动为upload组件绑定headers请求头
02：完成了上传组件的基本数据绑定和使用，开始完成请求头设置，实现真正的头像上传成功
1：因为upload中使用的是自己的上传方式，并非axios，所以就没有处罚axios中的设置请求头，所以就上传失败了， 解决方式把请求头设置在data数据中，手动绑定在:header中，完成请求头的通过
2：之前在axios中配置了请求头，但是因为upload组件没有使用该方法，所以就不会有请求头，导致了数据请求失败
3：:header动态获取到请求头
4：将请求头设置在data中，当做数据去传递。
5：页面效果，因为upload中:header接收了请求头数据，就成功上传图片
监听upload组件的on-success事件
03：完成了upload组件的请求头设置实现了真正的数据上传，开始完成上传的看是图片路径，设置成正确的图片路径，能通过路径在页面中显示图片
1：接口文档，pics是一个数组，里面可以存放多个图片的地址。但是属性名必须是pic,属性值必须是一个能显示图片的图片地址
2: 上传后成功返回的数据中的url就是图片的地址，能在网页中打开并看到图片
3：:on-success预览时出发的函数，函数中设置了接收的图片地址，这样就有了pic属性，将这个属性push到addForm.pics中，里面能存放多个图片地址。
4；点击预览时，能查看大图，并触发了事件函数，看到了数据中有了pic属性，值就是tmp_path
监听upload组件的on-remove事件
04：完成了大图的预览时要获取到的数据，开始完成点击删除按钮，将一个预览图片从图片列表中删除，实现删除图片功能
1：:on-remove触发删除的函数
2：删除事件函数中，获取到图片的临时路径，通过findIndex从数组中根据id去找出这个要删除的ID，根据id把它从数组中删除
3：点击删除，实现了删除一张图片的功能
实现图片的预览效果
05：完成了删除图片功能，开始完成图片放大预览功能
1：拿到请求地址url
2：通过url能看到图片
3-4：:on-preview触发预览功能，让自己的图片预览地址接收到数据中的真正的url地址，把接收到的请求地址设置dialog对话框中的图片的:src属性中，就实现了图片的预览
5：页面效果，点击放大了预览图
安装并配置vue-quill-editor
06：完成了图片放大预览的功能，开始完成商品内容的富文本编辑器
1：安装运行依赖
2-3：官方的说明文档
4-5-6-7-8：在main中导入了组件，并全局注册了组件。设置v-model富文本中内容的双向数据绑定。富文本输入框中的数据默认是空的。设置了富文本编辑器的基础外形
9：通过@click事件能打印addForm表单对象中已经包含了该数据对象。表示富文本中的内容已经存储到表单对象中了
实现表单数据的预验证
07：完成了富文本编辑器的制作，开始完成在点击商品是触发表单验证，验证通过后才能添加商品
1：@click触发添加事件函数，中用this.$refs.addFormRef触发了表单验证，如果验证不通过，弹出提示。
2：页面效果，如果验证不通过，即使走到了最后一步，也不允许添加商品。必须所有tab页中的数据通过验证，才能完成添加功能
把goods_cat从数组转换为字符串
08：完成了添加商品是触发的表单验证功能，开始完成商品所属分类数据的修改
1：因为在添加商品的时候，接口接收一个字符串，
2：如果直接把该选中的级联id，用join转换为了字符串，级联选择器需要的是array数组，所以就矛盾了。解决方式，就是使用lodash把addForm克隆出一份，2个独立的数据互不干扰。这样就能对form.goods_cat进行字符串转换了
345678：深克隆用这个表单对象去提交。打印的数据goods_list是一个字符串了，完成了级联和添加的数据格式要求修改
处理attrs数组
09：完成了添加是的goods_cat级联id的修改，开始完成attr_value属性的添加
1：数据响应中要求的格式，其属性名是attrs{id, attr_value},所以我们就需要用这个规定的属性名去把自己的动态属性的数组给接收过来。
2：需要设置attr_id和attr_vals，其他之前我们以前设置过了。
3:-4：在处理静态属性时，把attr_id和attr_value一起给设置好
5：通过点击添加的时候，打印的数据对象中attr_id和attr_value就一起设置好了。value是一个字符串，每项用空格隔开的
完成商品添加操作
10：完成了动态参数和静态参数添加商品时的参数修改，开始完成打印接口完成数据修改功能
1：接口文档，只要把克隆的form携带过去就可以了，因为里面有很多必填的属性值。
2：点击确定添加商品的时候，打印接口，把克隆的数据对象，携带过去。 如果失败则弹出提示，成功就提示成功，并push重定向到商品列表页面，第一条就是新添加的商品。完成了商品添加的开发
将goods_list分支的代码合并且推送到码云
11：完成了商品的添加， 开始更新远程分支和主分支，并合并本地分支
1：本地分支更新
2：远程分支更新
3：合并分支
4：远程主分支更新
创建order子分支
12：创建order订单管理分支，去完成该功能的开发
1：创建并切换到分支
2：创建远程同名分支
13-订单列表
通过路由渲染订单列表页面
13: 完成了商品添加页面的功能开发，开始完成订单列表的开发
1-2-3：创建组件，并导入挂载为路由，点击跳转到对应的路由页面，页面创建了基础的外形，面包屑和卡片视图，带图标的搜索框
根据分页获取订单数据列表
14：完成了点击跳转商品页面的，并渲染了商品页面的基础外形，开始完成订单列表页面数据的获取
1：接口文档，必须携带的参数，query查询参数，pagenum当前页码，pagesize每页显示的条数
2：在data中配置queryInfo，查询参数对象， 创建了空数组，用来接收数据，在create中调用了函数，函数封装中调用接口，携带了queryInfo查询对象，里面包含了刚才接口必须携带的初始参数。如果数据获取失败，就弹出错误的提示，成功就把数据赋值给空数组，total接收总条数
3：控制台打印了订单列表的数据
渲染订单table表格
15：完成了订单列表的数据打印，开始完成表格数据的渲染
1：在页面添加table表格，table-column就是每一竖的表格数据。 label就是标题， prop就是要指定渲染的数据。 是否付款是通过pay_status的值判断的，如果是1渲染已付款。是否发货是scope.row.is_send渲染的。 scope.row.create_time | dateFormat, 格式化时间。操作列是2个带图标的按钮。
2：接口返回的数据
3：页面效果，渲染了表格中的数据
实现分页功能
16：完成了表格的数据渲染，开始完成分页功能
1-2：引入分页组件，@size-change触发了页面切换是会触发该函数,@current-change会触发当前是第几页， :page-sizes一页显示几条数据， :page-size一页显示几条数据， layout组件的布局 :total数据总条数
3：页面效果，点击实现了分页功能
实现省市区县数据联动效果
17：完成了分页功能，开始完成点击弹出修改地址的对话框，并渲染对话框中的ui样式
1：点击弹出对话框，对话框中用form表单包裹form-item渲染每一行的数据，:model表单绑定的数据对象， :rules表单验证规则。 ref表单引用对象，
form-item表单的每项的数据绑定， label标题的渲染， prop指定绑定的属性， :options绑定级联数据对象， v-model双向数据绑定选择是触发的事件参数。
2：点击弹出对话框，对话框渲染了级联的数据，选择级联数据的时候会把级联的id给储存到address1这个数组中， 详细地址会填充到address2中
展示物流进度对话框并获取物流信息
18：完成了点击弹出修改地址的对话框，完成了对话框数据的渲染，开始完成物流进度对话框的显示和物流数据的获取
1：接口文档，需要携带，测试的单号，
2：添加dialog对话框，点击的时候，弹出物流对话框
3：点击弹出对话框的时候，开始发起数据请求，携带参数测试单号，如果数据返回失败，就弹出失败的信息，如果数据成功，就把获取到的数据赋值给物流进度对象，在把获取到的物流信息打印
4：获取到的物流信息
手动导入并使用Timeline组件
19：完成了点击弹出物流信息对话框，并且打印了物流的数据，开始完成物流信息的数据渲染
导师：蔡国庆因为组件已经在新版本中正常使用了，所以直接拷贝组件，再element.js中解构使用即可
1：导入时间线组件
2：因为脚手架工具版本低于了element-ui框架的版本，所以导师自己下载了该文文件，直接使用
3：将该文件引入在src/plugins中，
4：先在elemnt.js中导入文件，
5：在自己style中导入css样式文件
6：开始支持使用时间线组件， 时间线v-for in 循环progressInfo,遍历获取到的物流进度信息。 :timestamp物流的时间信息， context物流的文本信息
7：返回的数据响应， 在遍历渲染的时候，根据返回的数据去渲染时间线
8：时间线已经渲染完成
将本地order分支的代码合并且推送到码云
20：完成了订单列表页面的功能开发，更新本地仓库，更新远程仓库，合并分支，更新远程主分支
创建report子分支
21：完了订单列表页面的开发，也更新了仓库，开始创建好新的report数据统计的开发分支，并创建同名的远程分支
14-Echarts数据统计
通过路由加载数据报表组件
22：完成了订单列表页面的开发，开始完成数据报表页面的点击跳转到该页面，以及基础的页面布局
1-2-3：创建好了组件，在router中配置了该路由组件，实现了点击跳转到该页面
安装Echarts并渲染Demo图表
23:完成了数据报表页面的路由和基础布局，开始完成尝试使用echarts表格渲染一个表格在页面中
1：表格的入门实例：他是普通的导入方式，在script引入，在body元素中渲染该元素，获取到该元素的id，定义一个数据对象，使用元素.setOption(数据对象), 在页面渲染了一个表格
2：项目实例少许不同：在script通过import导入echarts组件， 在mounted中获取到页面元素，并设置了一个数据对象，元素.setOption(数据对象), 完成了vue项目中渲染了一个echarts表格
3：页面效果，就多了一个表格，虽然目前用的是官方的测试假数据，待会替换真数据
获取折线图数据并渲染图表
24:完成了echarts表格的渲染，开始完成表格数据获取，用真实的数据去渲染表格中的数据，并添加鼠标经过显示综合指标
1：接口文档，直接请求数据，不需要携带参数
1.1：在函数中获取到的数据，是不完整的，渲染页面表格，鼠标经过是没有综合指标的，在options使用完整的数据，用lodash将接口返回的数据和options中的数据合并，产生一个完整的数据，这样setOption渲染的数据，鼠标经过就能显示综合指标信息了
2：页面效果，渲染了自己的表格数据，鼠标经过并显示了综合指标
将本地的report分支合并且推送到码云
25:完成了echarts表格的数据渲染，开始本地更新分支，再更新远程分支，然后合并分支，再更新远程主分支
15-项目优化
优化思路
优化vue项目，部署vue项目，项目优化，在项目上线
介绍项目优化的策略
01：项目优化流程--生成ui面板打包报告--使用CDN减小项目体积--Element-ui组件按需加载--路由懒加载--首页内容定制
通过nprogress添加进度条效果
02：了解了接下来的要优化的流程，开始完成优化，体积纳米进度条
1-2-3：ui面板中安装运行依赖插件，在main.js中，axios.interceptors.request.use请求的时候，start启动进度条， 在axios.interceptors.response.use响应中done完成纳米进度条的渲染。实现了页面加载的时候，在顶部多了一条进度条，一闪而过
解决serve命令中提示的ESLint语法错误
03：完成了项目中添加进度条，开始解决ui面板中语法警告，程序能正常运行
1：声明了i3属性，没有去使用删除掉即可
2：声明了slot-scope=scope,接收了数据对象，并没有去使用，删除即可
3：[ ]数组中的代码不允许换行，是代码格式化过小导致的，将字节加大保存即可
4：短下划线的命名法会警告，修改为驼峰命名法即可
在执行build命令期间移除所有的console
04：完了语法验证的警告，开始完成bulid打包时报的错，在上线的时候不允许项目中出现console
1-2-3：安装开发依赖插件，在babel.config中pliugins配置transform-remove-console,使用插件一键删除项目中的console
只在发布阶段移除所有的console
05：完成了build打包时，不允许出现consoel的问题，但是开发中的console也被杀掉了，需要设置项目运行环境，根据环境变量打包时才删，开发时不允许删console
1-2-3：通过serve启动的输出信息中，能看到环境变量，在babel.config.js中判断环境变量如果是生产环境，就在proPlugins.push添加使用transform-remove-cosnole插件，使用...prodplugins,把该方法给展开使用。就实现了开发环境中不删除console，只在build上线是将console删除掉
生成打包报告
06：完成了按需删除console，开始学会查看ui面板中的打包报告了
1-2-3：我们不使用传统方式查看打包信息，只使用ui面板自带的打包的报告观察参数，当前分析以表格的方式能一目了然每个文件的体积。目前依赖体积过大，导致加载速度过慢，所有单文件js被打包到chunk.js中，导致该文件巨大，出现了惊叹号。稍后一一优化
通过vue.config.js修改webpack的默认配置
07：学会了查看ui面板中的信息，开始了解使用vue.config.js去优化webpack打包的参数配置
1-2：因为webpack是隐藏的，所以需要使用vue.config.js自己去配置打包的具体参数信息，去diy自己个性的打包方式
介绍configureWebpack与chainWebpack
08：创建了vue.config.js，开始了解根据不同的入口去调用不同打包文件，实现开发生产打包个性化，了解即可，稍后做打包参数配置修改
通过chainWebpack自定义打包入口
09：创建了vue.config.js和了解了根据环境设置不同的打包入口文件，开始完成根据环境变量的不同调用不同的打包文件
1-2-3：流程示意看完后，把main.js修改为main-dev.js是开发环境， main-pord.js是生成环境。在系统环境环境变量中根据不同的变量使用config.entry('app').clear().add(调用不同的入口文件)，去打包。通过测试serve开发和build一切正常，表示根据不同环境变量设置不同入口文件是成功的
通过externals加载外部CDN资源
10：设置了根据环境的不同调用不同的入口文件，开始完成不使用自己下载的包去打包，使用第三方外链形式减小项目体积
1-2-3-4-5:所有的js文件被集中打包到了chunk.js中，将不需要被打包的依赖声明到vue.config.js中，config.set打包时就会忽略这里面的依赖，但是项目靠这些依赖，所以在index.html中使用CDN外链代替了忽略的内置文件，这样打包外链不占大小，减轻了项目体积，加快了访问速度
演示externals的效果
11：完成了依赖的优化，开始查看打包后的效果，确实减少了60%的体积
通过CDN优化ElementUI的打包
12：完成了减小了依赖体积，开始使用CDN将element.js和css减小
1-2-3-4-5：打包前400多kb，查看流程示意后，自己动手优化项目中的element中的js和css，将内置的element删除，使用CDN外链，打包后项目体积变小了300%
自定制首页内容
13：完成了element-ui的体积优化，在vue.config中新增isPro按需渲染不同的内容以及文件
1-2-3-4-5：在vue.config.js中config.pligin('html').tap(args => {args[0].isPro = true})，新增了isPro属性，在index.html中根据属性，在三元表达式中去按需渲染标题，如果在开发环境中就渲染dev-电商后台管理项目。并且使用第三方CDN外链，使用自己的依赖，项目支出运行。实现了按需渲染首页title和CDN文件的调用
实现路由懒加载
14：完成了按需渲染首页的内容后，开始完成实现路由懒加载功能
1-2-3-4-5-6-7：看完流程示意后，开始下载开发依赖，并在babel.config.js中引入。 4：改造前，是传统一次性加载所有路由，5：改造后实现了路由懒加载功能。打包后，能正常运行项目。懒加载路由是成功的。
16-项目部署上线
通过node创建web服务器
15：完成了优化，并生成了打包文件夹，开始完成上线配置，用express把打包的项目跑起来
1-2-3-4-5-6：创建空的项目，把dist打包的文件夹剪切到项目中，初始化package.json配置文件，创建app.js用express启动web服务器，开放静态项目托管功能，把list托管，实现了通过web服务器成功访问到打包后的项目
解决打包之后角色列表数据不显示的Bug
【解决角色列表没数据的问题】打包后发现开发中的一个问题，就是角色列表页面中的表格没有数据
1-2-3-4-5：原因是three组件个有children属性，不需给row-key=id绑定id，才能正常渲染数据，但是之前用的是低版本的element-ui,外链中的element-ui版本过高，导致角色名称的数据前民多了小三角，把外链文件的版本改回开发中的版本号即可。
开启文件的Gzip网络传输压缩
16：完成了本地依赖的体积优化，其实通过浏览器请求是也可以优化达到提速的效果
1-2-3：安装compression插件，将它在app.js中导入，并挂载为全局组件，这样network请求面板中的chunk.js又被加快了。
配置HTTPS服务
17：因为自己http协议的web服务器是不安全的，需要下载证书，使用加密钥匙，对请求进行加密，一般是后端完成该功能，我们只做了解即可。
1-2-3-4：去FreeSSL申请免费的证书，下载后把公钥和私钥都放在自己的项目根目录中，使用fs模块去读取这2个钥匙，并修改https方式去打开web服务器，实现数据加密的功能。但是只做了解，完成后，我们还是会用会app.listen方式启动自己项目。
使用pm2管理应用
18：如果一但停止了node app.js项目就崩溃了， 想要后台挂机，用pm2挂载后台，就可以实现不使用nodemon项目支出运行
1-2-3：cmd中全局安装插件，在项目中shift打开命令窗口启动挂机服务，并给项目取了个别名。还可以实现停止挂机，重启固化剂，删掉该挂机项目。都可以使用0id的方式快捷操作去挂机项目
源代码仓库下载地址 - 感兴趣的可以下载源码，结合文章一步步实现该项目
下一篇：vue项目二：头条新闻移动端
