用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
参考文档
前序准备
运行前准备:
由于此项目是基于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 (生成打包之后的项目文件,此文件主要用于项目部署)。
演示
测试账号:
- username: admin password: 123456
- username: editor password: 123456
注意:
- admin拥有最高权限,可以查看所有的页面和按钮;
- editor只有被赋予权限的页面和按钮才可以看到;
技术答疑
项目说明:小爱ADMIN 是完全开源免费的管理系统集成方案,可以直接应用于相关后台管理系统模板;很多重点地方都做了详细的注释和解释。如果你也一样喜欢前端开发,欢迎加入我们的讨论/学习群,群内可以提问答疑,分享学习资料;
欢迎加入答疑qq群:602515030
用vue2.0+vuex+vue-router+element-ui+mockjs实现后台管理系统的实践探索的更多相关文章
- 基于vue2.0+vuex+localStorage开发的本地记事本
本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端.在线预览地址:DEMO github地址:https://github ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- Vue2.0总结———vue使用过程常见的一些问题
Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...
- 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑
eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...
- Vue2.0学习--Vue数据通信详解
一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...
- vue.js+element ui Table+spring boot增删改查
小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...
- vue2.0 vs vue
vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> < ...
- 基于vue2.0 +vuex+ element-ui后台管理系统:包括本地开发调试详细步骤
效果演示地址, github地址: demo演示: 1.About 此项目是 vue2.0 + element-ui + node+mongodb 构建的后台管理系统,所有的数据都是从 ...
- Vue框架Element UI教程-axios请求数据
Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...
随机推荐
- SQL Server温故系列(3):SQL 子查询 & 公用表表达式 CTE
1.子查询 Subqueries 1.1.单行子查询 1.2.多行子查询 1.3.相关子查询 1.4.嵌套子查询 1.5.子查询小结及性能问题 2.公用表表达式 CTE 2.1.普通公用表表达式 2. ...
- BZOJ 1061:志愿者招募(单纯型)
题目链接 题意 中文题意. 思路 单纯型模板题. 单纯型用来解决线性规划问题. 留坑待填. 算法思路 好长 模板 论文 卿学姐视频 #include <bits/stdc++.h> usi ...
- 有意思的 CDN
Clean Clean false 7.8 磅 0 2 false false false EN-US ZH-CN AR-SA /* Style Definitions */ table.MsoNor ...
- C# 6 新语法
1. using 声明的静态用法 2. 表达式体方法 3. 表达式体属性 4. 自动实现的属性初始化器 5. 只读的自动属性 6. nameof 运算符 7. 空值传播运算符 8. 字符串插值 9. ...
- navicat中查重并删除
# 查询所有重复的数据 SELECT * FROM hao123 WHERE ir_url IN (SELECT ir_url FROM `hao123` GROUP BY ir_url having ...
- Oracle数据库----视图
--创建简单视图--建立用于查询员工号.姓名.工资的视图.create view emp_viewasselect empno,ename,sal from emp; --查询视图select * f ...
- kuangbin专题 专题一 简单搜索 Oil Deposits HDU - 1241
题目链接:https://vjudge.net/problem/HDU-1241 题意:问有几个油田,一个油田由相邻的‘@’,组成. 思路:bfs,dfs都可以,只需要遍历地图,遇到‘@’,跑一遍搜索 ...
- 【题解】导游-C++
Description 宁波市的中小学生们在镇海中学参加程序设计比赛之余,热情的主办方邀请同学们参观镇海中学内的各处景点,已 知镇海中学内共有n处景点.现在有n位该校的学生志愿承担导游和讲解任务.每个 ...
- MongoDB 启动时关于 NUMA 警告 的分析----(To avoid performance problems)
1. 需求描述 观察MongoDB的启动Log,会看到一个关于 NUMA 的警告 和 优化建议 --17T17:: I CONTROL [initandlisten] ** WARNING: You ...
- [leetcode] 543. Diameter of Binary Tree (easy)
原题 思路: 题目其实就是求左右最长深度的和 class Solution { private: int res = 0; public: int diameterOfBinaryTree(TreeN ...