Vue后台管理通用模板
1、项目描述
1、此项目为Vue前端学习的初级实战项目
2、采用了 Vue +Vuex+Vue-router简易开发
3、项目主要实现侧边栏路由的切换、Tag的高亮切换以及面包屑等功能模块
4、采用了组件化模式开发
2、你能从项目中学到什么?
2.1项目开发流程以及开发思想
1、熟悉一个Vue项目的基本搭建
2、Vue、Vuex、Vue-router的基本使用
3、组件化开发的入门学习
4、对组件数据传输交互更增加了理解
2.2 插件以及第三方库
1、学会使用Vuex仓库管理组件数据
2、学会使用elemen-ui进行简单的开发
3、学会使用 vue-router的基本操作
2.2 不足之处
1、未熟记的剖析项目中router、Vuex注册
2、未实现登入登出功能
3、总结不多
这个项目是一个半成品,适合初学Vue准备拿项目练手的小伙伴、也是管理系统的模板
src目录文件 | 作用说明 |
---|---|
assets | 存放一些图片和less样式 |
components | 三个组件:侧边栏、头部、Tag切换 |
router | index.js 路由切换的中心地带 |
store | index.js 和tab.js tab主要实现仓库功能存放组件的数据 |
view | 存放各种路由文件,主要是路由的内容 Main.vue 是全部路由的爸爸,全部路由都要到它这里来注册 |
main.js | 许多插件、第三方库注入 |
主要功能分析
项目示例
1、菜单栏的收缩功能
思路:
1、点击CommonHeader中的按钮 CommonAside开始收缩
2、借助第三方库Vuex 这个仓库来解决问题
Vuex中state中定义一个变量c mutations中的一个函数改变变量c
3、在CommonHeader中绑定一个点击事件,通过 this.$router.commit("change",参数) 改变值
4、CommonAside 通过this.$store.state.tab.c (tab为文件夹) 得到值
再菜单栏的属性按照v-bind 来动态绑定变量
5、实现功能~~~
2、路由跳转
思路:
1、绑定CommonAside的点击事件
2、 跳转路由即可 建立在配置好路由的基础上,这里就不细说了
this.$router.push({name: item.name});
3、Tag标签的显示关闭
思路:
显示:
1、点击CommonAside时绑定事件触发Vuex中的mutations中的函数add
2、add中判断并添加state上的数据
3、在页面上通过mapstate获取stare总的数组
关闭:
1、根据element-ui中的属性绑定点击事件,
2、触发this.$router.commit("函数",参数) Vuex中进行对应删除
4、Tag删除后高亮的转移
1、elemen-ui属性中判断高亮,绑定关闭事件
2、比较数组长度 如果相同则显示向左一(index-1) else 显示相同的index即可
5、面包屑功能
1、element-ui实现
版权声明:本文为qq_53523338原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。