Vue项目实战05

一个功能从开始到完成

->了解需完成功能的作用
->完成页面的基本布局
->完善页面的功能
->细节处理和逻辑补充
->提交代码

例如

• 商品分类

作用：商品分类功能是做什么的
创建goods_cate分支
通过路由加载商品分类组件
绘制商品分类组件的基本页面布局
调用api获取商品分类列表数据
学会使用第三方插件
    树形表格组件 vue-table-with-tree-grid
使用自定义模板列渲染表格数据
    如何使用columns数组设置自定义列
渲染排序和操作对应的ui结构
    使用v-if判断并渲染对应的结构
实现分页功能
渲染添加分类的对话框和表单
商品分类-获取父级分类数据列表
渲染级联选择器
根据父分类的变化处理表单中的数据
在对话框的close事件中重置表单数据
完成添加分类操作
将goods_cate分支上的代码提交到get仓库

• 完成 商品分类页面基本布局 --步骤

A 新建goods_cate分支推送到码云
B 创建categories 子路由并设置规则
C 修改Vate.vue组件完成基本布局
D 参考接口文档发送请求获取商品分类数据
E 安装第三方插件 vue-table-with-tree-grid
F 注册第三方插件 vue-table-with-tree-grid
G 使用 vue-table-with-tree-grid 展示数据

• 完善 商品分类页面 --步骤

A 使用columns定义表格中的自定义列
B 使用solt 属性将插件和colunmns的template绑定
C 使用el-pagination完成分页功能
D 完成添加分类对话框