panjiachen/vue-admin-template

a vue2.0 minimal admin template

vue-admin-template

English | 简体中文

A minimal vue admin template with Element UI & axios & iconfont & permission control & lint

Live demo: http://panjiachen.github.io/vue-admin-template

The current version is v4.0+ build on vue-cli. If you want to use the old version , you can switch branch to tag/3.11.0, it does not rely on vue-cli

SPONSORED BY

Build Setup

# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git

# enter the project directory
cd vue-admin-template

# install dependency
npm install

# develop
npm run dev

This will automatically open http://localhost:9528

Build

# build for test environment
npm run build:stage

# build for production environment
npm run build:prod

Advanced

# preview the release environment effect
npm run preview

# preview the release environment effect + static resource analysis
npm run preview -- --report

# code format check
npm run lint

# code format check and auto fix
npm run lint -- --fix

Refer to Documentation for more information

Demo

Extra

If you want router permission && generate menu by user roles , you can use this branch permission-control

For typescript version, you can use vue-typescript-admin-template (Credits: @Armour)

Related Project

• vue-element-admin

• electron-vue-admin

• vue-typescript-admin-template

• awesome-project

Browsers support

Modern browsers and Internet Explorer 10+.

IE / Edge	Firefox	Chrome	Safari
IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions

License

MIT license.

Copyright (c) 2017-present PanJiaChen

vue-admin-template's Issues

npm install 出现错误

Unexpected token y in JSON at position 15901 while parsing near '...e-commit":"^1.1.3","yaspeller-'，请帮忙看下

[Vue warn]: Property or method "key" is not defined. 这个警告是什么情况？

[Vue warn]: Property or method "key" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> at src\views\layout\components\AppMain.vue
at src\views\layout\Layout.vue
at src\App.vue

如何在点击左边菜单栏右边显示一个外部链接

我想实现在点击树的节点的时候在右边显示http://www.qq.com/ 目前使用了以下方法

  {
    path: '/example',
    component: Layout,
    redirect: 'noredirect',
    name: 'Example',
    icon: 'zujian',
    children: [
      { path: 'index', name: 'Form', icon: 'zonghe', component: _import('page/form') },
      { path: 'website', name: 'website', icon: 'zonghe', component: _import('website/website') },

    ]
  },

website.vue

<template>
  <div class="app-container full">
    <iframe ref="iframe" src="http://www.qq.com"
            style="background-color:transparent; position: absolute; z-index: -1; width: 100%; height: 100%; top: 0;left:0;bottom:0;"></iframe>

  </div>
</template>

<script>
  export default {
    created(){
      // window.location.href = 'www.163.com';
      //window.location.href = 'http://www.Baidu.com';   //可以当前域名相对路由
      //window.open();
    }
  };
</script>

不知道这么使用对不对？ 发现iframe 是显示了，但是 里面的按钮链接不能使用？请问还有别的办法没？

axios 拦截问题

我设置了dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://erpsystest.zhaolin365.com/"'
});

后台接口域名 问什么请求接口的时候，前面会拼接localhost：9527

新版有没有带权限控制的版本同步更新？

貌似权限控制版本没有更新，能否同步更新权限版本呢？谢谢！

修改本地存储的cookie的value后，再刷新页面会进入卡死状态，也无法跳转

自己试着修改本地存的cookie时，发现再刷新只有进度条一直在加载，页面并无跳转，私以为一旦发现有人修改cookie时自动跳转到登录页为好。现在是只有把cookie清除掉重新登陆或者改回来才可以往下走。

npm run build Error

Environment:
Nodejs v8.9.3
npm v5.1.1

Error log:

npm run build

> [email protected] build /home/edward/repo/vueAdmin-template
> node build/build.js

Hash: 1bbc9b65f864aec9f76c
Version: webpack 3.10.0
Time: 6891ms
                                              Asset       Size  Chunks                    Chunk Names
                static/js/5.e8b7dd85a0f22dce377f.js    4.31 kB       5  [emitted]         
             static/fonts/element-icons.6f0a763.ttf      11 kB          [emitted]         
                static/js/0.01e2fba4ffbfa8db3df8.js    17.8 kB       0  [emitted]         
                static/js/1.6be4a8f9839b799e0e96.js    8.47 kB       1  [emitted]         
                static/js/2.9a2fa5f6a2cc10872e1e.js    3.23 kB       2  [emitted]         
                static/js/3.ce465796a81f1b078f5f.js    5.91 kB       3  [emitted]         
                static/js/4.2fba748304477a9c51fb.js    3.17 kB       4  [emitted]         
                         static/img/404.a57b6f3.png    98.1 kB          [emitted]         
           static/js/vendor.761728de6054816ba0e8.js    1.82 MB       6  [emitted]  [big]  vendor
              static/js/app.37f489cc1acc09a67300.js    60.4 kB       7  [emitted]         app
         static/js/manifest.ab44155eee6d505fe901.js    1.58 kB       8  [emitted]         manifest
static/css/app.914521a2ab14de7bf7eeb356301daf87.css     198 kB       7  [emitted]         app
                                        favicon.ico    67.6 kB          [emitted]         
                                         index.html  569 bytes          [emitted]         

ERROR in static/js/0.01e2fba4ffbfa8db3df8.js from UglifyJs
Unexpected token: keyword (var) [static/js/0.01e2fba4ffbfa8db3df8.js:60,29]

ERROR in static/js/1.6be4a8f9839b799e0e96.js from UglifyJs
Unexpected token: keyword (var) [static/js/1.6be4a8f9839b799e0e96.js:156,29]

ERROR in static/js/2.9a2fa5f6a2cc10872e1e.js from UglifyJs
Unexpected token: keyword (var) [static/js/2.9a2fa5f6a2cc10872e1e.js:36,29]

ERROR in static/js/3.ce465796a81f1b078f5f.js from UglifyJs
Unexpected token: keyword (var) [static/js/3.ce465796a81f1b078f5f.js:92,29]

ERROR in static/js/4.2fba748304477a9c51fb.js from UglifyJs
Unexpected token: keyword (var) [static/js/4.2fba748304477a9c51fb.js:83,29]

ERROR in static/js/5.e8b7dd85a0f22dce377f.js from UglifyJs
Unexpected token: keyword (var) [static/js/5.e8b7dd85a0f22dce377f.js:102,29]

ERROR in static/js/vendor.761728de6054816ba0e8.js from UglifyJs
Unexpected token: name (__webpack_exports__) [static/js/vendor.761728de6054816ba0e8.js:3222,29]

ERROR in static/js/app.37f489cc1acc09a67300.js from UglifyJs
Unexpected token: keyword (var) [static/js/app.37f489cc1acc09a67300.js:112,29]

  Build failed with errors.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `node build/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/edward/.npm/_logs/2017-12-25T02_58_50_946Z-debug.log

When I use cnpm, there is no problem.

在服务器环境下npm run build以后，在浏览器访问显示一片空白

打包没报错，浏览器也没报错，网页没有任何内容。
审查元素看打包的东西也没有注入网页，是我打开姿势不对吗...?

请问next（）的几种写法的区别？

如题，在main.js中写了next（{...to}),这种写法和next（to.path),nxet(to)有什么区别？

线上地址访问不了了

跨域是怎么解决的

项目里没有配置proxy，没看懂您项目是怎么解决的？

有没有考虑升级到Element-UI 2.0.1

饿了么Element-UI 升级到2.0.1了，有没有考虑升级到2.0呢

图标怎么使用，里面有哪些现成的能用的？?

项目下载之后，icon图片出错

run dev 的时候报错，提示都是icon图片的warning，页面是一片空白的。把icon图片删掉，项目就可以跑通了。但是页面上就没有icon了。不知道是为什么呢

[feedback] 关于手脚架去除用户权限相关的建议

hi, 有一个小建议
手脚架需要尽可能的简单和通用化处理。
这个项目中关于用户权限的逻辑可能并不适用于一些项目，而且逻辑对于新手来说有点复杂。
因为我在尝试自己删除相关代码的过程中，也遇到了递归菜单导致死循环的问题，我觉得这对新手会造成一定的调试难度。
所以建议能去除掉这块的相关逻辑代码，有需要的同学可以去参考 PanJiaChen/vue-element-admin 项目。

请问，页面切换时，不重新加载，该怎么配置？

請問跳頁?

請問我post form to service,成功後要跳到另外一頁?請問我要在哪邊撰寫跳頁?

关于easy-mock的格式

@PanJiaChen 你好，请问能够提供easy-mock的数据格式吗？

生产环境中Router为History模式时报错

路由模式改为History后，dev环境一切正常，run build未出现报错。

将build好的文件放入server中，切换页面即报unexpected token < 错误，发现引用js文件的路径有误。

将/config/index.js 中 assetsPublicPath 值从 './' 更改为 '/' 后错误消失。
不知我如此修改是否正确？ @PanJiaChen

加了babel-polyfill，但是再IE9上还是空白

加了babel-polyfill，但是再IE9、8上还是空白，但是我下载vue-element-admin加上babel-polyfill在IE8,9都可以显示，求解

Linux下启动报错

(node:32720) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 4): Error: Exited with code 3
(node:32720) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Uncaught (in promise) TypeError: roles.some is not a function

當我把連接的api改為遠端,然後用editor登入,結果發現這個錯誤?

iconfont.js放哪里啊？

请问 iconfont.js文件替换在哪里啊？目录结构好像有问题

请教一下如何把webSocket事件中的参数传递给vue methods中函数？

在创建websocket后可以绑定一些事件：
this.webSocket = new WebSocket(wsUri);
一般是绑定function的
this.webSocket.onerror =function (Evt) {}；

像这样的参数Evt如何传递到vue的method中的函数呢？
直接(onError()为我再Vue的methods中定义的函数)
this.webSocket.onerror =this.onError();
可以执行，但是无法传递参数

請問分頁?

我試著裝了很多組分頁套件,但是一直有問題.
請問您是用哪個組件?

请教一个有关addroutes的问题

参考你的代码，用在自己项目中的时候我发现一个问题：

addroutes之后，可以访问对应的路由，但是$router.options.routes里并没有更新。

但是你的项目里是正常的，你也没有像别的项目中使用$router.options.routes=asyncRouterMap的方式来解决问题。所以请问你是怎么解决这个问题的？可以大概说一下么？本人百思不得其解

favicon.icon ,你加在哪里呢， 我看了根目录下面的index.html 和 app.vue 文件都没有找到啊。

裤衩哥，favicon.icon ,你加在哪里呢， 我看了根目录下面的index.html 和 app.vue 文件都没有找到啊。

QQ群人满了，进不去了。

npm run build:prod和npm run build:sit 无效

请问我项目写完后执行 npm run build:prod和npm run build:sit 都会报错，但是执行npm run build是好的，可以打包出来的是测试环境，我想要打包一个正式环境的，要如何执行呢，我可不可以直接把vue-element-admin build和config目录里面的所有文件直接拷过来使用呢，会有什么问题吗,webpack我不太会，可以帮忙解答一下嘛，谢谢啦！！

侧边导航栏三级菜单的路由地址拼接出错?

看了下代码,发现问题在于定义路由时候二级菜单对应的path的写法上,可参考vue-element

npm run build 出現錯誤?

ERROR in static/js/21.540266a8052725d15ece.js from UglifyJs
Unexpected token: punc (() [./~/element-ui/packages/col/src/col.js:23,0][static/js/21.540266a8052725d15ece.js:50,10]

ERROR in static/js/22.9c86a61d88ab46dbe81b.js from UglifyJs
Unexpected token: punc (() [./~/element-ui/packages/col/src/col.js:23,0][static/js/22.9c86a61d88ab46dbe81b.js:50,10]

ERROR in static/js/24.68610023a38715dfe228.js from UglifyJs
Unexpected token: punc (() [./~/element-ui/packages/col/src/col.js:23,0][static/js/24.68610023a38715dfe228.js:50,10]

侧边栏是否考虑同步一下 vue-element-admin

vue-element-admin issues: Link

npm install报错，有截图

• 操作系统：win10 64位

• node版本：8.6.0

• npm 版本：5.3.0

截图如下

_import = require('./_import_' + process.env.NODE_ENV)

这个是什么意思呀~
component: () => import('@/views/login/index')
_import('excel/exportExcel')

我是参照 admin 那项目 中有_import = require('./import' + process.env.NODE_ENV)
copy过来却报错了~
This relative module was not found:

打包以后登陆后无法跳转？？？？

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

fetch.js 第二行差一个MessageBox

如题

請問菜單權限問題?

二級菜單可以以下面設定隱藏

{
path: '/admin-chart',
component: Layout,
redirect: 'noredirect',
name: 'Admin-Chart',
icon: 'zujian',
children: [
{ path: 'index', component: IEcharts, name: 'Line', icon: 'zonghe', meta: { role: ['admin'] } },
{ path: 'bar', component: IEcharts2, name: 'Bar', icon: 'zonghe', meta: { role: ['admin'] } },
{ path: 'pie', component: IEcharts3, name: 'Pie', icon: 'zonghe', meta: { role: ['admin'] } },
{ path: 'map', component: IEcharts4, name: 'Map', icon: 'zonghe', meta: { role: ['admin'] } }
]
},
那一級菜單是否可以隱藏?

另一个账号不能登陆

另一个账号不能登陆，我是个新手 想看看两个不同账号登陆是否会有不同的展示 ，我现在在看权限的地方，有些思维我可能还没转换过来 ，我想知道真实开发过程中判断权限，后台是返回什么过来呢？？？

下载下来之后 npm install 报错

我下载这个模版之后报错 所以想问下这个是什么原因呢.

D:\alarm\vueAdmin-template-master>npm install
npm WARN [email protected] No repository field.

npm ERR! code EINTEGRITY
npm ERR! sha512-HB6ie85jEeeDCgU8geawC1qyQcesEm034IE0bj1uQ4CsGt+kl69kXd5gwsfKp52d
OOUELD/KUhf3r92SFvlztw== integrity checksum failed when using sha512: wanted sha
512-HB6ie85jEeeDCgU8geawC1qyQcesEm034IE0bj1uQ4CsGt+kl69kXd5gwsfKp52dOOUELD/KUhf3
r92SFvlztw== but got sha512-IUSE2rvEHpOxnrKJBFDQU+/vFtGW1rDBPs7Pj2InYpABtwhHjF16
w4EbOqgs6IbUzZS378VAdLwY4O2kVGp1DA==. (65012 bytes)

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2017-09-22T0
8_47_42_902Z-debug.log

D:\alarm\vueAdmin-template-master>

npm run dev报错

下载源码执行完npm install，再执行npm run dev报错，源码未做修改。

表單驗證無法發生作用

问下，如果处理sessionId不一致问题

（1）从登录页进去获取sesionId 赋值到cookie中，
（2）在通过token去获取用户信息，此时sessionId竟然不一样了，后台用springboot，根据网上资料设置了
response.setHeader("Access-Control-Allow-Credentials","true");
但是还是不行，请教下

会同时进行两次一样的网络请求

如图

分页样式没有，不是引入了默认的css吗，怎么会事呢？

分页样式没有，不是引入了默认的css吗，怎么会事呢？

传不了图片，我简单描述一下，麻烦了：
现在样式是这样的：
Total 50 10 /page 1234 Go to 1
正确的应该是
共 50 条 10 条/页 1234 前往 1 页

作者在不？你线上模板登录不上去，我下载下来也是一样

https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin/user/login Failed to load resource: net::ERR_INSECURE_RESPONSE

errError: Network Error

OPTIONS https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin/user/login net::ERR_INSECURE_RESPONSE

你能帮忙解决下么？

vue-router自定义属性

在vue-router中我只看到路由元信息，即meta的设置，但是在你的代码中出现了hidden, alwaysShow等自定义属性。我在Vue-Router的构造配置中并未找到相关可设置字段，请问这个设置有什么相关资料可以参考么？

npm run dev 报语法错误

我自己的问题。。。跟项目无关。。。这个issue可以删掉了

admin和editor的用户名登录写在哪？

这个template没有Mock我还把export function isvalidUsername(str) {
const valid_map = ['admin', 'editor']
return valid_map.indexOf(str.trim()) >= 0
}给删了，但是还是能实现admin和editor才能登录，请问写在哪？

能不能针对你的那些icon出个说明文档呢？

如题，谢谢

可以分享下easy mock的数据吗？

rt，非常感谢~