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

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

  1. 基于vue2.0+vuex+localStorage开发的本地记事本

    本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端.在线预览地址:DEMO github地址:https://github ...

  2. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  3. Vue2.0总结———vue使用过程常见的一些问题

    Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...

  4. 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑

    eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...

  5. Vue2.0学习--Vue数据通信详解

    一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...

  6. vue.js+element ui Table+spring boot增删改查

    小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...

  7. vue2.0 vs vue

    vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> < ...

  8. 基于vue2.0 +vuex+ element-ui后台管理系统:包括本地开发调试详细步骤

    效果演示地址, github地址: demo演示:         1.About 此项目是 vue2.0 + element-ui + node+mongodb 构建的后台管理系统,所有的数据都是从 ...

  9. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

随机推荐

  1. SQL Server温故系列(3):SQL 子查询 & 公用表表达式 CTE

    1.子查询 Subqueries 1.1.单行子查询 1.2.多行子查询 1.3.相关子查询 1.4.嵌套子查询 1.5.子查询小结及性能问题 2.公用表表达式 CTE 2.1.普通公用表表达式 2. ...

  2. BZOJ 1061:志愿者招募(单纯型)

    题目链接 题意 中文题意. 思路 单纯型模板题. 单纯型用来解决线性规划问题. 留坑待填. 算法思路 好长 模板 论文 卿学姐视频 #include <bits/stdc++.h> usi ...

  3. 有意思的 CDN

    Clean Clean false 7.8 磅 0 2 false false false EN-US ZH-CN AR-SA /* Style Definitions */ table.MsoNor ...

  4. C# 6 新语法

    1. using 声明的静态用法 2. 表达式体方法 3. 表达式体属性 4. 自动实现的属性初始化器 5. 只读的自动属性 6. nameof 运算符 7. 空值传播运算符 8. 字符串插值 9. ...

  5. navicat中查重并删除

    # 查询所有重复的数据 SELECT * FROM hao123 WHERE ir_url IN (SELECT ir_url FROM `hao123` GROUP BY ir_url having ...

  6. Oracle数据库----视图

    --创建简单视图--建立用于查询员工号.姓名.工资的视图.create view emp_viewasselect empno,ename,sal from emp; --查询视图select * f ...

  7. kuangbin专题 专题一 简单搜索 Oil Deposits HDU - 1241

    题目链接:https://vjudge.net/problem/HDU-1241 题意:问有几个油田,一个油田由相邻的‘@’,组成. 思路:bfs,dfs都可以,只需要遍历地图,遇到‘@’,跑一遍搜索 ...

  8. 【题解】导游-C++

    Description 宁波市的中小学生们在镇海中学参加程序设计比赛之余,热情的主办方邀请同学们参观镇海中学内的各处景点,已 知镇海中学内共有n处景点.现在有n位该校的学生志愿承担导游和讲解任务.每个 ...

  9. MongoDB 启动时关于 NUMA 警告 的分析----(To avoid performance problems)

    1. 需求描述 观察MongoDB的启动Log,会看到一个关于  NUMA 的警告 和 优化建议 --17T17:: I CONTROL [initandlisten] ** WARNING: You ...

  10. [leetcode] 543. Diameter of Binary Tree (easy)

    原题 思路: 题目其实就是求左右最长深度的和 class Solution { private: int res = 0; public: int diameterOfBinaryTree(TreeN ...