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中的函数add2、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实现

Vue后台管理通用模板相关推荐

vue后台管理系统(通用模板)
后台管理通用框架源码: GitHub 亲测有效: 预览地址目前包含动态侧边导航栏渲染,面包屑,通知,主题,富文本等- 1.登陆 2.工作台 3.通知 4.主题 5.发邮件 6.通知详情目前可 ...
vue后台管理知识点、难点总结01
vue后台管理知识点.难点总结 1.upload时,png格式的不能上传????(不对) 2 js中的项目应用什么时候用async和await 3 添加或者编辑的时候报错:Error in v-on ...
bootstrap ace后台管理界面模板
2019独角兽企业重金招聘Python工程师标准>>> bootstrap ace后台管理界面模板 http://www.daimajiayuan.com/preview/18152 ...
吐血推荐50个高端大气上档次的后台管理界面模板
UI设计 | 2013-09-03 通过使用漂亮的管理面板你可以省掉很多的时间,同样,设计良好的界面也适合在移动终端上使用,从而减少对PC的依赖和提供管理的灵活性. 这里收集了50个高端大气上档次 ...
从0到1完成一个Vue后台管理项目（九、引入Breadcrumb面包屑，更改bug）
往期从0到1完成一个Vue后台管理项目(一.创建项目) 从0到1完成一个Vue后台管理项目(二.使用element-ui) 从0到1完成一个Vue后台管理项目(三.使用SCSS/LESS,安装图标库 ...
25 个精美的后台管理界面模板和布局
任何系统都会有一个管理后台,好看的管理后台看起来赏心悦目,管理的时候心情也舒畅,本文给大家推荐 25 个制作精美的后台管理界面的模板和布局,你值得拥有. Free Admin Template Web ...
推荐12个非常不错而且免费的后台管理HTML模板
http://www.open-open.com/news/view/15d57ab 下面介绍的这些免费后端管理HTML模板,都非常不错.建议您收藏. Charisma Admin Template ...
一步一步实现中后台管理平台模板-08-登录页和用户信息保存
一,前言上一篇,完善了Header组件,添加了用户信息的显示和退出功能用户信息(昵称+头像)都是写死的,线上应用肯定是通过登录获取到用户信息这一篇,制作一个简单的登录页面,模拟接口异步调用(用户信 ...
10个后台管理开源模板，接私活可用
作者:SevDot 链接:jianshu.com/p/3bc7404af887 Web 开发中几乎的平台都需要一个后台管理,但是从零开发一套后台控制面板并不容易,幸运的是有很多开源免费的后台控制面板可 ...
vue后台管理、APP项目总结集合
文章目录后台管理界面 APP 项目整体总结别慌,内容看起来多,其实都是一些小干货啦后台管理界面搭建一个vue项目: 配置相应的环境,如安装node,vue,webpack(最好安装一下淘宝镜像 ...