用vue2.0+vuex+vue-router+element-ui+mockjs实现后台管理系统的实践探索

用vue2.0+vuex+vue-router+element-ui+mockjs实现后台管理系统

A magical vue element touzi admin.

• 效果演示地址

更多demo展现

分支说明

master分支：先后端统一开发的版本；能够用于学习nodejs+mongodb+express相关知识；

dev分支：进行了先后端分离的版本；用户只关注于前端部分，可忽略服务端；下载下来，便可运行；

dev-permission分支：增长了权限管理(包括页面权限和按钮权限)的功能；同时将项目进行了重构；

About

本文主要讲解dev-permission分支内容：

若是对您对此项目有兴趣，能够点 "Star" 支持一下 谢谢！ ^_^
  
  或者您能够 "follow" 一下，我会不断开源更多的有趣的项目
  
  开发环境 windows 64 、nodejs 6.11.0
  
  若有问题请直接在 Issues 中提，或者您发现问题并有很是好的解决方案，欢迎 PR
复制代码

技术栈

前端技术栈： vue2 + vuex + vue-router + webpack + ES6/7 + less + element-ui

服务端技术栈： easy-mock,mockjs

参考文档

easy-mock使用，请参考官方文档;

mockjs使用，请参考官方文档;

前序准备

运行前准备：

因为此项目是基于nodejs的先后端结合项目，你须要进行nodejs的相关准备工做。项目运行以前，请确保系统已经安装如下应用：

(1)、node (6.0 及以上版本)。使用细节，请参考：node的下载及安装。

开发

git clone -b dev-permission github.com/wdlhao/vue2… (注意：要从dev-permission分支拉取代码)

cd vue2-element-touzi-admin

npm install

本地运行：

npm run dev 运行以后，会默认打开本地访问路径：http://localhost:8012

发布：

npm run bulid (生成打包以后的项目文件,此文件主要用于项目部署)。

演示

测试帐号:

1. username: admin password: 123456
2. username: editor password: 123456

注意：

admin拥有最高权限，能够查看全部的页面和按钮；

editor只有被赋予权限的页面和按钮才能够看到；

技术答疑

项目说明：小爱ADMIN 是彻底开源免费的管理系统集成方案，能够直接应用于相关后台管理系统模板；不少重点地方都作了详细的注释和解释。若是你也同样喜欢前端开发，欢迎加入咱们的讨论/学习群，群内能够提问答疑，分享学习资料；

欢迎加入答疑qq群：602515030