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 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>