1.下载模板☺️

• 1:模板介绍 简洁版: github.com/PanJiaChen/…
  加强版: github.com/PanJiaChen/…

• npm install

• cnpm i -S core-js

模板的文件和文件夹的认知【简洁版】

build
-----index.js webp

2.完成登录业务

• 静态组件完成

3.路由的搭建 && 分页符使用

4.内容展示

1.接口准备

2.调试数据

3.列表显示

4.页面布局如图

5.实现点击分页后列表数据改变

5.弹窗实现

实现效果：

6.新增和修改功能实现

slot-scope="{row }"实现了将点击的row数据记录下来

由于接口中携带的参数只有ID不同

所以可以通过判断id是否存在实现不同接口的请求

需要点击新增按钮时清空数据，以及点击修改时绑定数据到表单，注意使用浅拷贝

7.表单的校验（自定义校验）

自定义校验哈哈

8.删除商品操作

细节：注意当用户删除list.length小于1时，要去上一页

9.全局组件

• 全局组件

• 引入全局组件，注册全局组件 main.js

• 使用全局组件

10.三级联动

• 当组件一挂载就要显示好一级分类的数据

• 一级分类的id获取通过value获取绑定

v-model="categoryForm.category1Id"

v-for="(c1, index) in category1List"
:value="c1.id"

v-mode 收集的就是value的值:
categoryForm.category1Id = c1.id

• 当一级分类的内容发生变化的时候就会获取二级分类的数据

• 细节：注意清空上一级列表的数据