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实现