左侧导航栏
接口中拿的活数据
//菜单栏信息
async getmenu() {
let { data: res } = await muney.getList();
console.log(res);
this.menulist = res;
},
动态切换页面
<el-submenu
:index="item.path"
v-for="(item, index) in menulist"
:key="index"
>
</el-submenu>
页面
基本就是增删改查 还有分页搜索
echarts配置使用
这是最后一个图表页面,具体可以参考echarts官网使用https://echarts.apache.org/examples/zh/index.html
难点
个人感觉商品管理里面的 “商品列表 分类参数” 和 权限管理里面的 “权限管理里面的权限分配”
项目过程中的记录
1 子组件和一些可复用组件
2 slot插槽
3 :routes="[child]" :key=“child.path”
4matched=[{path:’/dashboard’,meta:{title:Dashboard}}].concat(matched)
5filter
6 有header+main+sidebar,怎么在 main中点击 Header组件里的menu,去触发 SideBar的效果呢。这需要用到组件中的通信,并且不是父子组件,
参考方法 1可以使用this.
r
o
o
t
.
root.
root.emit和this.
r
o
o
t
.
root.
root.on试试,event bus 2vuex,因为项目里使用了vuex,所以应该是从vuex找方法了
7路由懒加载和权限验证和进度条
8require.context
9promise
10easy-mock.js
11支持无限嵌套路由,所有侧边栏这块使用了递归组件
12api模块和views组件命名一一对应