前端 ----Vue电商管理系统

编写过程中的插件：
  运行依赖
    axios ajax请求，
    element-ui 前端样式
    lodash  进行对象深拷贝和对象的合并
    vue-quill-editor  富文本编辑器
    vue-router 路由管理
    vue-table-with tree-grid   Categories.vue P13  当展开栏展开时，树状插入数据
    echarts  做图表
    nprogress 给文档添加加载页面的进度条
  开发依赖
    babel-plugin-transform-remove-console 开发编译后移除console

编写过程中的经验
    1.token 记录登陆状态
    2.如果创建新功能要建新分支，然后再合到主分支上
    3.表单中的输入框绑定要联系到主表单中，但是不能用 :model=''来绑定 只能用v-model=''来绑定
    4.表单验证中验证相对应的规则的名称要与输入的v-model绑定的值的名称一样
    5.vue ui 提示Notifications are disabled 应该是因为我把通知关了，所以页面上有一个警告
    6.const val = xxx   console.log(val)  如果发现返回的是一个promise对象，可以用await来优化这个步骤 const val =await xxx
    7.element-ui中的message需要挂载到Vue全局中Vue.prototype.$message = Message，可以直接在message后接type，如：this.$message.success('登录成功')
    8.登录成功后的 token, 保存到客户端的 sessionStorage中，因为sessionStorage 是会话期间的存储机制，而localStorage是持久化的存储机制，
    而 token 只在当前网站打开期间生效，所以 token 要保存在 sessionStorage中
    9.退出功能，如果是使用 token 只需要把 token 销毁就好了
    10.提交代码 29.mp4
    11. :index="id"  id应该为字符串不能为数值  :index="id.toString()"  
    12. 作用域插槽，作用域插槽会覆盖prop
        <el-table-column prop="email" label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state"> </el-switch>
          </template>
        </el-table-column>
    13.@click 如果不能有多个，如果要绑定多个的话，@click='aa();bb()' 记得在函数名后面加()
    14.重置表单，给表单一个ref属性，然后调用this.$refs.表单名称.resetFields()
    15.多目运算 return a == 10 ? 10 :(a ==20 ?  20 :'未知')
    16.通过递归获得最子级的元素，并放到指定数组中
    17.如果想用一些el-form或button或tree 下面提供的方法，要给这些设置一个ref，然后调用this.$ref.ref的名称.提供的方法名称()
    18.如果一些样式的格式不能生效，试着放到全局样式中，如：.el-cascader-panel {height: 200px;}  我也不知道为啥
    19.级联选择器的任意选项选择
    20.$nextTick 当页面渲染完成后才会执行的回调函数，避免当触发事件后页面还没渲染却进行操作的问题  Params.vue 240
    21.el-tab-pane只能作为el-tabs的子节点，不能在他们之间用其他标签包裹el-tab-pane 只能在el-tabs上用form表单标签来包裹
    22.上传图片不是经过ajax请求来上传图片的，这样在main.js中的拦截器就不能提前给这个上传请求添加token属性，这样就导致不能成功上传图片
    23.在拦截器（request，和response）中给文档添加加载页面的进度条
    24.在template中，如果要获得this.XX的值，this可以省略。！！！所有的this.都可以省略
    
编写过程中的逻辑问题
    1.在分类参数中，新添加的属性在点击展开的时候，多了一个空的标签 Params.vue 170  原因：空的数组如果用 split' ' 来进行分割，会有一个数组[''] 
    2.输入标签框在两个地方联动了Params.vue 30   原因：因为for出来的每一行都公用变量，所以只要给每一行都设定自己的变量就好了
    3.el-steps :active='active' 只接受数值类型，不支持字符串类型， 所以要想办法把activ变成数值，如：:active='active - 0'

    4.this.addForm.goods_cat = this.addForm.goods_cat.join(',')
    当使用这个函数时，就会把this.addForm.goods_cat从数组变成字符串，但是在 级联选择器中，双向绑定的数据只能是数组，这样就会报错。而在添加表单时，有需要this.addForm.goods_cat是用','分割的字符串
    解决办法：把this.addForm进行深拷贝，这样就可以在不影响源表单的情况下复制一份一样的表单出来
    -----lodash  使用cloneDeep(obj->你想要深拷贝的对象)

提交代码：
	1.把代码同步到合理的分支
		1.git checkout -b user  创建一个新分支
		2.git checkout user 切换到新分支
		3.git status  检查分支状态
		 if(clear) OK
		 if(有文件没添加) git add .  -->  git status(绿色)--> git commit -m '备注'  --> git status(clear) --> git push -u origin user  推送新分支到码云
	2.把代码同步到主分支
		1.git checkout master 切换到主分支
		2.git merge user      把user分支的代码合并到当前分支(master)
		3.git push



优化项目：
    1.生成打包报告
    2.第三方库启用CDN
    3.Element-UI组件按需加载
    4.路由懒加载
    5.首页内容定制
    
优化过程中的问题：
Vue 项目打包时 报错 No module factory available for dependency type: CssDependency
在VUE UI图形界面中选择 任务->build->参数->把production改成development

项目上线：  但是好像默认开启了gzip，因为即使加了配置，Network中的数据还是一样的小
const express = require('express')
const compression = require('compression')
const app =express()

// 一定要把这行代码写到静态托管前
app.use(compression())
app.use(express.static('./dist'))

app.listen(80, () => {
    console.log('server running at http://127.0.0.1')
})

项目上线过程中出现的问题：
"Error: if there's nested data, rowKey is required."
角色列表加载不出来
解决：在所对应的VUE文件中找到el-table 在他后面添加row-key="id"  直接加就好了
 <el-table row-key="id">
 </el-table>