编写过程中的插件:
运行依赖
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>