wdlhao / vue2-element-touzi-admin Goto Github PK

View Code? Open in Web Editor NEW

4.2K 4.2K 1.5K 32.38 MB

基于vue2.0 +vuex+ element-ui后台管理系统

JavaScript 21.65% HTML 0.52% Vue 73.64% Less 4.18%

vue2-element-touzi-admin's Introduction

小爱Admin

A magical vue element touzi admin.

分支说明：

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

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

dev-permission分支：增加了权限管理(包括页面权限和按钮权限)的功能和顶栏三级菜单显示，完全剥离nodejs后台，使用mockjs模拟数据，让用户只需关注前端，更容易上手学习。目前此分支为正常维护分支。如有需要，请大家clone本分支代码运行。

项目博客文档

1.vue-小爱ADMIN系列文章(一)：用Vue-cli3+mockjs 实现后台管理权限和三级菜单功能

2.vue-小爱ADMIN系列文章(二)：微信微博等分享，国际化，前端性能优化，nginx服务器部署

提示

如果你觉得该项目对你有帮忙，记得给我点个赞star吧;

About

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

  如果对您对此项目有兴趣，可以点 "Star" 支持一下 谢谢！ ^_^
  
  或者您可以 "follow" 一下，我会不断开源更多的有趣的项目
  
  开发环境 windows 64 、nodejs 6.11.0
  
  如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR

技术栈

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

服务端技术栈： mockjs

参考文档

vue：Vue是一套用于构建用户界面的渐进式框架。
vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
vue-router：Vue Router 是 Vue.js 官方的路由管理器。
webpack：前端模块打包器。
less：Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
element-ui：Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
mockjs：生成随机数据，拦截 Ajax 请求。

前序准备

运行前准备：

由于此项目是基于nodejs的前后端结合项目，你需要进行nodejs的相关准备工作。项目运行之前，请确保系统已经安装以下应用：

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

开发：

git clone -b dev-permission https://github.com/wdlhao/vue2-element-touzi-admin (注意：要从dev-permission分支拉取代码)
cd vue2-element-touzi-admin
npm install

本地运行：

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

发布：

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

演示

测试账号:

username: admin / password: 123456
username: editor / password: 123456

注意：

admin：拥有最高权限，可以查看所有的页面和按钮；

editor：只有被赋予权限的页面和按钮才可以看到；

温馨提示：

1、项目图标来源：

本项目图标线上地址为：//at.alicdn.com/t/font_1258069_e40c6mwl0x8.js，在public/index.html中引入; 大家如需更换图标，可直接替换为自己iconfont线上的图标库地址即可;

2、执行npm run dev报错处理方案：

可能是你的本机安装nodejs版本过高，请卸载nodejs高版本，重新安装较低版本(如v10.9.0)；或者通过安装nvm来切换到较低版本也可以实现正常启动；

查看更多demo

技术答疑，交流QQ群

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

欢迎添加群主微信和qq群答疑：

vue2-element-touzi-admin's People

Contributors

Stargazers

Watchers

Forkers

jiangshuai brucetie xym000 ttgzs xinglu xcpt ztxyzu jucheap kiddvs yigedakoudaiya chenz2008 anson1124 williamwang2015 britrock boyalab xuxinxin tb1over bruce-yang gisinaction ssjun sky185959 netsail changyuansky dianadai libin1991 love2157dream notlogic gdl19276 webrtongqi wenyang0710 rucky2013 jerry-goodboy carycui ahweb baitongda sahalawzh triumph20150514 ccva zhuqq1 sunshine5746 noodlewar duke-lv ntro cycold huihaoliu kimiburg cynthiazha y494890511 leveapi ihanfeng cqmrzeng raojiawei cw0606 yaku2688 phpmvc jooo000hn shawn-tangsc zlyzly bluflew springmybatis luobao2 cjshinning madfeng changwenjun lshaohua5 apri-lies via123 jygf3698 yottoo caolonggang zyx130 raincoolly lxnancy pangkmin zengqiang2013 zs2018 somesunshine awhlmycn wangsheng6 zeng2210 erwer8363 yichaoo kira-li dong583288 fhq1105296229 yangmei120 w312033591 truexin1292 rency0812 blackmack xaccc derekzhang79 half-ocean binihao5bei force0908 qingchengpipi anhzhi imhch jackshine biggentlemanmkll

vue2-element-touzi-admin's Issues

ERR! missing script: serve

Hi, clone dev-permission支线下来后，npm install安装后，接著使用npm run serve会出现错误：ERR! missing script: serve

请问有解吗？

dev分支拉取下来为什么要登录验证？不是前端可以直接运行的吗

想请问大佬，我想跟着打一遍您的项目，请问你有开发文档吗？我不知道该如何下手

关于筛选的问题求教

在资金管理 ->资金流水页面中如果想通过用户名以外的字段进行筛选应该如何修改呢比如改用籍贯筛选

使用了echart 打包部署之后 areaStyle 无法正常显示，本地开发则可以

关于数据的问题

为啥我在控制台看不到有请求的记录，而且本地也没有数据，那那些人员数据是从哪来的啊？

npm run build 之后将dist文件放到服务器上，报文件缺失的错误,请问怎么解决

请问大佬为什么不能git clone master分支的项目了

权限路由问题

用户登录成功之后，每次点击路由都进行了角色的判断;
每次路由切换都要请求接口拉取用户信息，会不会体验不好，浪费宽带，
登录拉取一次用户信息，根据roles生成可访问路由表缓存起来就可以了会不会更好一点

deb_permission 分支，
0 info it worked if it ends with ok
1 verbose cli [ '/home/ivan/.nvm/versions/node/v10.16.3/bin/node',
1 verbose cli '/home/ivan/.nvm/versions/node/v10.16.3/lib/node_modules/cnpm/node_modules/.bin/npm',
1 verbose cli '--userconfig=/home/ivan/.cnpmrc',
1 verbose cli '--disturl=https://npm.taobao.org/mirrors/node',
1 verbose cli '--registry=https://r.npm.taobao.org',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]prebuild: [email protected]
6 info lifecycle [email protected]build: [email protected]
7 verbose lifecycle [email protected]build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]build: PATH: /home/ivan/.nvm/versions/node/v10.16.3/lib/node_modules/cnpm/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/ivan/github/vue2-element-touzi-admin/node_modules/.bin:/home/ivan/.nvm/versions/node/v10.16.3/bin:/home/ivan/.pyenv/plugins/pyenv-virtualenv/shims:/home/ivan/.pyenv/plugins/pyenv-virtualenv/shims:/home/ivan/.pyenv/shims:/home/ivan/.pyenv/bin:/home/ivan/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin=:/usr/local/go/bin
9 verbose lifecycle [email protected]build: CWD: /home/ivan/github/vue2-element-touzi-admin
10 silly lifecycle [email protected]build: Args: [ '-c', 'vue-cli-service build' ]
11 silly lifecycle [email protected]build: Returned: code: 1 signal: null
12 info lifecycle [email protected]build: Failed to exec build script
13 verbose stack Error: [email protected] build: vue-cli-service build
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (/home/ivan/.nvm/versions/node/v10.16.3/lib/node_modules/cnpm/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:198:13)
13 verbose stack at ChildProcess. (/home/ivan/.nvm/versions/node/v10.16.3/lib/node_modules/cnpm/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:198:13)
13 verbose stack at maybeClose (internal/child_process.js:982:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/ivan/github/vue2-element-touzi-admin
16 verbose Linux 4.15.0-54-generic
17 verbose argv "/home/ivan/.nvm/versions/node/v10.16.3/bin/node" "/home/ivan/.nvm/versions/node/v10.16.3/lib/node_modules/cnpm/node_modules/.bin/npm" "--userconfig=/home/ivan/.cnpmrc" "--disturl=https://npm.taobao.org/mirrors/node" "--registry=https://r.npm.taobao.org" "run" "build"
18 verbose node v10.16.3
19 verbose npm v6.12.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: vue-cli-service build
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

想请教一下如何增加或修改用于登陆系统的账号

rt 如果想新增一个用于登陆系统的账号应该如何做呢谢谢~

IE11打开白屏

刷新跳转404

通过点击可以正常访问页面但是一旦执行刷新操作除非是首页不然必报404

在npm install 过程中会报如下错误，但是不影响之后的运行，请问下方错误是什么原因造成的

npm install没反应

执行了git clone -b dev-permission https://github.com/wdlhao/vue2-element-touzi-admin后，接着执行npm install，git bash没有反应，请问这是怎么回事

怎么实现上一步下一步，不同界面数据的缓存

界面A,B,C
点击下一步出来一个新的界面，点击上一步返回上一个界面，但是数据没有保存。
请问怎么实现

cannot login

npm run serve /npm run dev 报错怎么解决啊大佬

INFO Starting development server...
ERROR Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
"exclude": [
null
],
"use": [
{
"loader": "cache-loader",
"options": {
"cacheDirectory": "E:\Project\frontend\vue2-element-touzi-admin\node_modules\.cache\babel-loader",
"cacheIdentifier": "a5ed1dd2"
},
"ident": "clonedRuleSet-38.use[0]"
},
{
"loader": "babel-loader",
"options": "undefined",
"ident": "undefined"
}
]
}
Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
"exclude": [
null
],
"use": [
{
"loader": "cache-loader",
"options": {
"cacheDirectory": "E:\Project\frontend\vue2-element-touzi-admin\node_modules\.cache\babel-loader",
"cacheIdentifier": "a5ed1dd2"
},
"ident": "clonedRuleSet-38.use[0]"
},
{
"loader": "babel-loader",
"options": "undefined",
"ident": "undefined"
}
]
}
at checkResourceSource (E:\Project\frontend\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\RuleSet.js:167:11)
at Function.normalizeRule (E:\Project\frontend\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\RuleSet.js:198:4)
at E:\Project\frontend\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\RuleSet.js:110:20
at Array.map ()
at Function.normalizeRules (E:\Project\frontend\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\RuleSet.js:109:17) at new RuleSet (E:\Project\frontend\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\RuleSet.js:104:24)
at new NormalModuleFactory (E:\Project\frontend\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\NormalModuleFactory.js:115:18)
at Compiler.createNormalModuleFactory (E:\Project\frontend\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\Compiler.js:636:31)
at Compiler.newCompilationParams (E:\Project\frontend\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\Compiler.js:653:30)
at Compiler.compile (E:\Project\frontend\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\Compiler.js:661:23)
at E:\Project\frontend\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\Watching.js:77:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Project\frontend\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\tapable\lib\HookCodeFactory.js:33:10), :24:1)
at AsyncSeriesHook.lazyCompileHook (E:\Project\frontend\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\tapable\lib\Hook.js:154:20)
at Watching._go (E:\Project\frontend\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\Watching.js:41:32)
at E:\Project\frontend\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\Watching.js:33:9
at Compiler.readRecords (E:\Project\frontend\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\Compiler.js:529:11)

npm i 安装后 npm run serve 就报错了，这是什么情况

Starting development server...
ERROR Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
"exclude": [
null
],
"use": [
{
"loader": "cache-loader",
"options": {
"cacheDirectory": "D:\desk\vue2-element-touzi-admin\node_modules\.cache\babel-loader",
"cacheIdentifier": "a5ed1dd2"
},
"ident": "clonedRuleSet-38.use[0]"
},
{
"loader": "babel-loader",
"options": "undefined",
"ident": "undefined"
}
]
}
Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
"exclude": [
null
],
"use": [
{
"loader": "cache-loader",
"options": {
"cacheDirectory": "D:\desk\vue2-element-touzi-admin\node_modules\.cache\babel-loader",
"cacheIdentifier": "a5ed1dd2"
},
"ident": "clonedRuleSet-38.use[0]"
},
{
"loader": "babel-loader",
"options": "undefined",
"ident": "undefined"
}
]
}
at checkResourceSource (D:\desk\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\RuleSet.js:167:11)
at Function.normalizeRule (D:\desk\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\RuleSet.js:198:4)
at D:\desk\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\RuleSet.js:110:20
at Array.map ()
at Function.normalizeRules (D:\desk\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\RuleSet.js:109:17)
at new RuleSet (D:\desk\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\RuleSet.js:104:24)
at new NormalModuleFactory (D:\desk\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\NormalModuleFactory.js:115:18)
at Compiler.createNormalModuleFactory (D:\desk\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\Compiler.js:636:31)
at Compiler.newCompilationParams (D:\desk\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\Compiler.js:653:30)
at Compiler.compile (D:\desk\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\Compiler.js:661:23)
at D:\desk\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\Watching.js:77:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\desk\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\tapable\lib\HookCodeFactory.js:33:10), :24:1)
at AsyncSeriesHook.lazyCompileHook (D:\desk\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\tapable\lib\Hook.js:154:20)
at Watching._go (D:\desk\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\Watching.js:41:32)
at D:\desk\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\Watching.js:33:9
at Compiler.readRecords (D:\desk\vue2-element-touzi-admin\node_modules@vue\cli-service\node_modules\webpack\lib\Compiler.js:529:11)

项目运行报错

npm i之后serve报错运行不了

大佬请教个问题关于打包

打包回生成这种带随机字符串的文件名
app.ae11c39d.js
chunk-vendors.0cfce3c1.css

能不能自己设定文件名？
谢谢

安装npm时报错

请问下这个问题该怎么解决呢?
具体报错信息:
tarball tarball data for [email protected] (sha1-hilUyLWBC/+HpIsN4EFu2MS7HDY=) seems to be corrupted. Trying one more time.
安装过程中所有模块都存在了.staging文件夹中，但是安装失败后， .staging内文件都被删除了。
尝试过npm cache verify和npm update，但不生效。
版本信息
[email protected]
[email protected]
操作系统: win10(x64)