web前端vue项目完整步骤。

这个步骤是源于一个后台的电商管理系统来写的，资源连接：https://download.csdn.net/download/qq_41792374/12550894
1创建手脚架，可视化安装vue-cli-plugin-element插件，改为按需引入，安装axios依赖
2,数据导入mysql,在vue_api——server开终端安装依赖 npm install,然后node app.js 用postman测试接口
3，用vscode通过脚手架打开项目，查看工作区是否干净git status 创建登陆分支login,切换到login分支
4，打开可视化，运行项目，开始操作，默认页面为vue首页。
5，src下的main.js是整个项目的入口文件，分析main.js 通过修改app.vue ，删除不需要的路由组件。除了app.vue可以当首页
6.在components下创建登陆组件login.vue , 在路由文件index.js中导入login.vue组件并暴露路径path和组件名component，而且在el:#app放占位符
7.在路由规则（index,js的routes）里重定向到登陆页，在login.vue完善登陆页面。如果使用less语法。需要安装开发依赖less-loader,less
8.如有需要，可以写全局样式表,导入到入口文件main.js
9.login.vue使用element-ui是按需导入，所以打开plugins文件，import{需要的组件，1} from ‘element-ui’再暴露出去Vue.use(1)
10.验证表单：给表单绑定数据（:model=“”），在scrip行为区的data函数挂载rlue规则字段，给单个input双向绑定(v-model) ，给表单绑定验证规则字段对象（：rules="",element-ui有提示这个字段）
子表单用prop接收各自的验证字段
11 重置表单：获取表单实例对象，给表单加ref属性，ref=‘xxxRef’ ，点击重置，触发methods方法,定义函数resetLoginForm(){this.KaTeX parse error: Expected 'EOF', got '}' at position 24: …Ref.setfields()}̲ 12.登陆触发点击事件，事件…ref.xxxx.resetfileds()
27.点击添加。添加表单事件并校验。验证成功就发送添加用户的请求。this. $refs.xxx.validate(valid=>{if(!valid) return} ),data里新建addform对象里面存放数据请求需要的字段。添加成功 ，刷新userlist. 28.点击修改。触发函数，函数接受scope.row.id 在methods定义函数，接收id.修改布尔值。展示修改用户对话框。：visible.sync绑定一个布尔声明。发起请求。创建一个对象，保存用户修改后的信息，再渲染对话框。对话框里动态绑定保存的数据。label行设props.input行双向绑定 29.修改框关闭时，触发函数。this.$refs.xxx.setfiled()
30.点击修改，验证表单，发送请求。
31，点击删除。触发函数。函数里通过scope.row.id 发起请求。删除该项
三，权限与角色
32，新建权限vue组件。导入index.js,绘制面包屑和卡片视图
33.进入页面。直接获取权限信息。在created钩子里调用获取权限的函数，在data挂载权限数组，在methods里定义并发请求，将返回的信息传递给新建的权限数组。
34.在卡片视图下插入el-table表格设置：data=“权限数组”，el-table-column里绑定prop属性，接收权限数组的数据，row代表列，col代表行。
35.新建角色vue组件。导入index.js,绘制面包屑和卡片视图
36，在export default定义一个空角色列表，钩子里调用刷新角色列表函数
methods定义获取角色列表的函数并发送请求，将获得的信息给角色列表。
37.再插入el-table，绑定角色列表，各个字段lebal行 props接收角色列表数据。操作行依然是作用域插槽来设置三个按钮。
38.展开列设置expand. 里面用插槽solt-scope获取数据.
39.在el-row里设置v-for,循环1级权限，在el-col里设置el-row。来循环二级权限。最后在el-col里设置el-tag来循环三级权限。
40，标签关闭时，触发函数，函数事件携带scope.row和item3.id，在methods函数中接收scope,row，和id,发起请求，请求成功后，scope.row.childeren=res.data
41.给分配权限按钮添加点击事件，携带scope.row。用来后续获得角色信息，添加分配diolog,加入树形控件，分析树形控件的字段嵌套:data=‘’，props指定属性绑定对象，绑定数据源，diologvisible默认关闭，事件携带solt -scope,method定义函数，发出请求获得数据，新建权限数据列表，将请求得到的数据放入其中。
42.新建树形控件的属性绑定对象，label:"",children:"",
43，美化树形控件。加复选框属性show-checkbox,加node-key=‘id’，获取被选中的文本的id
44.默认被选中的数据的数组，element-ul里用default-checked-key来收集，动态绑定到新建的defKeys数组里。
45.在method里定义递归函数，获取所有被选择的节点的id,放到defkeys，
46.递归：getleafkeys(node,arr){if(!node.children){return arr.push(node.id)} node.children.forEach(item=>this.getLeafKeys(item,arr)) },
47，在点击分配权限按钮的事件函数 调用递归函数，参数为scope.row和this.defKeys:this.getleafkeys(role,this.defKeys)
48.监听分配权限对话框的关闭，关闭时调this.defKeys=[]
49.点击分配权限确定按钮，触发函数，函数声明一个数组，放入被选择的节点的id. 其中调用element-ui中组件的2个方法获得数据再用扩展运算符拼接即可；
50.创建当前即将分配权限的角色id:roleId，this.roleId=role.id, {请求参数一定得在data里定义或者scope里获取}
51.请求成功后，visible设置为false
52.添加分配角色得对话框diolog…点击分配角色，触发函数，dioLogVisible为true.函数携带scope.row. ,对话框中内容动态绑定userinfo的属性;select下拉菜单绑定选择的角色的id,用v-for循环所有角色的数据列表，data里定义所有角色的列表数据，和已选中的角色id值，
53.点击按钮触发事件函数，发put请求参数包括this.userinfo.id和选中的角色id.。请求成功，刷新页面并隐藏对话框。监听对话框的关闭事件，重置用户信息和选择的角色的id.
四，商品分类
54.创建商品分类cata组件,绘制面包屑导航，卡片视图，卡片视图里用el-table表格
55.定义：商品分类的数据列表，默认为空，
56.定义:获取商品分类的函数。
57.定义:请求信息，包括发送请求需要的参数
58.发送请求：get 请求，参数用params.请求成功后，获得的数据赋值给定义的空列表。页码给新定义的total
59 vue-table-with-tree-grid插件安装。
60.:data绑定数据源，：columns 表格各列的配置。label:列标题的名称。prop:对应到内容的属性名。type:‘template’,template:‘xxx’，type和template是展示自定义模板列的。
61.在模板里用solt接收xxx, 用v-if,v-for判断状态并显示在table里
62，分页：每页size变化时，触发函数。数据里的pagesize重新赋值，并重新获取商品分类列表
63.页码发生变化，触发函数。数据里的pagenum重新赋值，并重新获取商品分类列表.：current-page:当前页码；：page-size:当前每页显示条数
64.在卡片视图下添加diolog添加对话框，设置可见标识符。点击按钮时。显示对话框。在对话框中添加form表单。
65.梳理表单各个属性。：model 绑定表单的数据对象。可以（需要或者必须，属性为请求的响应属性）新建，：rules绑定表单的验证规则（数据新建），ref引用。
66.梳理表单项的各个属性，prop绑定自己要验证的数据对象的某个规则字段，
67，子项的v-model绑定数据对象的某个属性字段。后期可以当参数传出，发请求。
68.添加分类表单的验证规则对象。
69.定义函数。获取父级分类的数据列表，可以展示级联选择器中内容，在点击添加按钮时调用 。
70.定义一个父级分类的列表。将返回的数组赋值给这个父级分类的列表。获得一个有清晰的层级结构的数据集合。
71.在表单里添加级联选择器。：options是数据源。还有必须的:props配置项。v-model绑定被选中的id数组（新建数组）还有一个change事件函数。级联改变时。console.log(this.selectedkeys);这个函数拿到被选项的id，重新赋值给数据的备选id，id数组不为0，说明有选中父级分类,通过length方法拿到被选中的最后的父级分类的id. 为当前的分类的等级赋值。
72.对话框关闭时，清空拿到的分类等级和id还有表单数据
73.点击添加按钮。预校验并发送请求，提交分类。
五，分类参数
74.绘制分类参数面板，发请求获取分类参数的数据，并新建数据接收响应的参数数据。
75.添加级联选择器，:option是数据源，：props是配置项，v-model绑定的是新建数组，绑定被选中项的id。handlechange()是发生变化时，拿到v-model绑定的数组，可以打印。
76.强制选中3级分类，通过数组长度判断，如果不是三级分类，清空绑定的选中项数组
77.tabs标签页，v-model绑定被激活的名称，子项设置name属性。activeName.在data里设置activeName：name，可以设置默认被激活的选项.
78.给按钮添加动态属性绑定：disabled,在计算属性中判断数组是否为3.如果不等于3，返回true ,禁用按钮
79.获取选中的三级分类的id，根据所处面版。发请求获得对应的参数。将此函数抽离，在tabs切换和级联点击时都该调用。
80.根据请求参数不同，将返回的数据给不同的新建数组。
81.渲染动态参数和静态参数的tab表格
82.共用弹出对话框，动态计算标题文字文本，设置显藏标签。
83.对话框里有form验证表单，：model绑定新建数据表单，：rules是新建规则对象。el-form-item里prop绑定验证字段。el-input绑定添加数据字段。
84.点击按钮，添加参数，预校验，发请求，添加成功。刷新页面。
85.复制添加对话框，处理成修改对话框。新建修改表单的数据对象，新建修改表单的验证规则。点击修改，先传id. 再发请求，再将返回的数据赋值给新建的修改数据，
86.将获取参数请求的响应数据里的数组进行循环，用split分割，在展开行里for循环，循环渲染tag标签。
87.判断循环项是否为空，如果为空。返回空数组。
88.删除参数。通过scope.row传参请求实现。
六。商品列表。
89.在main里创建时间过滤器，在作用域插槽里使用
90.实现分页。：current-page绑定当前页码。
91.实现搜索，搜索框双向绑定queryInfo.query.点击搜索 调用获取列表函数即可。清空只要加个clearable属性即可。触发clear事件重新调用获取列表函数。
92.删除商品。通过scope.row拿数据传参。通过id删除。
93.点击添加商品，编程导航到add/goods页面，新建组件和监听请求。
94.绘制添加商品页码。引入step步骤条，:active对应激活项，默认从0开始，可以动态绑定到数据新建区，
95.步骤条下新建tabs标签页，tab-position指定标签页上下左右，
95.实现 步骤条和tabs标签的联动。将绑定值指向同一个数据，步骤栏中只接受数字，可以-0将字符串转换成数字。实现联动的核心就是两个组件绑定同一个数据源项。
96.form表单需要在table之外，包裹table表格，tab-pane项再包裹form-item,prop指定要验证的规则字段，input框绑定输入内容。有表单就有验证规则对象。
97，获取商品分页数据列表。级联选择器的：options绑定分类列表。再配置:props,v-model绑定选中数组。v-model绑定的一般是在请求信息里。
98.只允许级联选中三级商品分类，在级联选中器发生变化时，触发函数，判断其v-model绑定的数组长度，如果不为3，则清空数组。
99.给tab标签页加：before-leave=‘xxx’，发生标签切换时。触发该属性的xxx函数，函数有两个参数，activename和oldActivename，前者是离开的标签页的name。后者是进入的标签页的name.如果return false.则阻止跳转。
100.判断即将离开的标签页，标签页为0且数组长度是否为3，则允许跳转。否则返回false
101.给tab标签页添加tab-click事件。tab切换点击时触发。函数里判断访问的索引是否为1，如果是1，则发起请求，获取参数面板信息。
102.通过form-item循环，渲染商品参数的item项，再添加复选框组。v-model到item项的数组里，之前判断数组是否为空。不为空。则切割数据。再循环复选框组。
103. 点击商品属性时，在tab-check里判断索引是否是2，如果是2，则发起请求，添加静态属性列表， 通过form-item循环出表单标题。form-item里循环出文本输入框 input.并双向绑定到对象数据的val上。
104.将upload组件添加到商品图片区域，设置action地址(后台地址)，：on–previews是点击预览事件。：on-remove处理文件移除。
105.在upload手动设置：headers=’headerobj‘请求头，在数据中定义headerobj：{Authorization:window.sessionStorage.getItem(‘token’);
106.上传成功时，调用：on-success，监听图片上传成功，响应数据里有临时路径， 将临时路径放到添加表单pic中。
107，触发：on-remove时。移除图片，打印函数传递的参数，开始操作，用findIndex方法根据此项的临时路径，移除这一项。
108.预览，：on-preview方法。传递的是预览项的数据，新定义一个预览地址，将响应地址赋予给预览地址，再添加一个diolog对话框，里面放img,其中:src为预览地址。
109.安装依赖，vue-quill-editor，是富文本编辑器，v-model绑定新增商品描述。
110.点击添加商品。发起预验证，发请求之前。处理数据。级联选择器双向绑定的是数组，发请求需要字符串，这里需要深拷贝。
111.调用lodash的cloneDeep(obj)深拷贝处理数据，再循环动态参数列表和静态参数列表，将每一项的attr_id和attr_val加入到表单新建的attr里面。
112.发请请求，添加商品，编程式导航跳转到商品页。
七，订单页面
113.新建组件，绘制订单页面。完成分页。
114.为修改按钮绑定单击事件，展示修改地址的对话框。v-model绑定adddresForm,并在data中定义这么一个数据对象，再：rules新建表单验证规则，ref是表单的引用， el-input双向绑定addressForm下的address1,address2，arrress1是级联选择器，所以定义为数组，address定义为字符串。
114.导入citydata文件，并放在data里。1号文本框用级联选择器替换，options是数据源，绑定citydata.
115.查看物流进度，添加点击事件，触发事件，显示一个对话框，发生请求，查看响应数据，赋予给data里的新建数组。
116.添加时间线组件，通过for循环响应数组，和对应的文本，展示物流信息。
八，物流信息
117.绘制物流信息面板。
118.安装echats.
119.在卡片视图给echarts准备一个盒子，放置图表。
120.在页面上的元素被渲染完毕时，初始化echarts实例。（mounted钩子里）
121.在mounted里准备options配置项
122。展示数据，myChart.setOption(option)
123.在mounted里发起请求。获取折线图数据，将res.data传递给myChart.setOption()。删除原来的配置项。
124.实现图表联动，在data里定义配置项options.在mounted里面讲响应数据和新定义配置项合并，并重新赋值给myChart.setOption()。实现联动。