代码改变世界

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

2019-05-31 09:58  流浪的诗人  阅读(1787)  评论(0编辑  收藏  举报

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

参考文档

前序准备

运行前准备:

由于此项目是基于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 bulid (生成打包之后的项目文件,此文件主要用于项目部署)。

演示

测试账号:

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

注意:

  • admin拥有最高权限,可以查看所有的页面和按钮;
  • editor只有被赋予权限的页面和按钮才可以看到;

技术答疑

项目说明:小爱ADMIN 是完全开源免费的管理系统集成方案,可以直接应用于相关后台管理系统模板;很多重点地方都做了详细的注释和解释。如果你也一样喜欢前端开发,欢迎加入我们的讨论/学习群,群内可以提问答疑,分享学习资料;

欢迎加入答疑qq群:602515030