panjiachen/vue-element-admin

:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin

English | 简体中文 | 日本語 | Spanish

SPONSORED BY

Introduction

vue-element-admin is a production-ready front-end solution for admin interfaces. It is based on vue and uses the UI Toolkit element-ui.

vue-element-admin is based on the newest development stack of vue and it has a built-in i18n solution, typical templates for enterprise applications, and lots of awesome features. It helps you build large and complex Single-Page Applications. I believe whatever your needs are, this project will help you.

• Preview

• Documentation

• Gitter

• Donate

• Wiki

• Gitee 国内用户可访问该地址在线预览

• Base template recommends using: vue-admin-template

• Desktop: electron-vue-admin

• Typescript: vue-typescript-admin-template (Credits: @Armour)

• awesome-project

After the v4.1.0+ version, the default master branch will not support i18n. Please use i18n Branch, it will keep up with the master update

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

This project does not support low version browsers (e.g. IE). Please add polyfill by yourself.

Preparation

You need to install node and git locally. The project is based on ES2015+, vue, vuex, vue-router, vue-cli , axios and element-ui, all request data is simulated using Mock.js. Understanding and learning this knowledge in advance will greatly help the use of this project.

Sponsors

Become a sponsor and get your logo on our README on GitHub with a link to your site. [Become a sponsor]

Akveo

Get Java backend for Vue admin with 20% discount for 39$ use coupon code SWB0RAZPZR1M

Flatlogic

Admin Dashboard Templates made with Vue, React and Angular.

Features

- Login / Logout

- Permission Authentication
  - Page permission
  - Directive permission
  - Permission configuration page
  - Two-step login

- Multi-environment build
  - Develop (dev)
  - sit
  - Stage Test (stage)
  - Production (prod)

- Global Features
  - I18n
  - Multiple dynamic themes
  - Dynamic sidebar (supports multi-level routing)
  - Dynamic breadcrumb
  - Tags-view (Tab page Support right-click operation)
  - Svg Sprite
  - Mock data
  - Screenfull
  - Responsive Sidebar

- Editor
  - Rich Text Editor
  - Markdown Editor
  - JSON Editor

- Excel
  - Export Excel
  - Upload Excel
  - Visualization Excel
  - Export zip

- Table
  - Dynamic Table
  - Drag And Drop Table
  - Inline Edit Table

- Error Page
  - 401
  - 404

- Components
  - Avatar Upload
  - Back To Top
  - Drag Dialog
  - Drag Select
  - Drag Kanban
  - Drag List
  - SplitPane
  - Dropzone
  - Sticky
  - CountTo

- Advanced Example
- Error Log
- Dashboard
- Guide Page
- ECharts
- Clipboard
- Markdown to html

Getting started

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

# enter the project directory
cd vue-element-admin

# install dependency
npm install

# develop
npm run dev

This will automatically open http://localhost:9527

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

Changelog

Detailed changes for each release are documented in the release notes.

Online Demo

Preview

Donate

If you find this project useful, you can buy author a glass of juice 🍹

Paypal Me

Buy me a coffee

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

Copyright (c) 2017-present PanJiaChen

vue-element-admin's Issues

有一个小bug

左边收缩的时候，右边直接变为收缩后的大小，由于左边还有动画时间，会有突兀的感觉

为什么clone下来后，打开项目没有看到两步验证登录 qq和微信

就是登录页面后为啥没看过qq、微信登录验证的效果？

是否可以把 综合表格 抽离的更细一点

现在综合搜索和分页都在一张页面内 ，是否可以把搜索表头和分离抽离成组件 这样复用率更高

悄悄的等待着，用的是element-ui吧

支持，学习

生产环境assetsPublicPat与staticPath调整

下面两种路径，一种可以，另一种会出现找不到文件错误
http://xxx.com/dashboard 正常访问
http://xxx.com/introduction/index 找不到js

我在build之后，nginx的配置如下：
listen 80;
server_name xxx.com;
location / {
root /home/ubuntu/vue-demo/dist;
index index.html;
try_files $uri $uri/ /index.html =404;
}

是否还需要其他配置，谢谢🙏

大神你们网站统计的话用的是什么

vue单页面的话，百度统计好像不行

请问一下导出到excel是怎么做的

Question:大神能不能把用户系统大概的讲一下

大神能不能把用户系统大概的讲一下，如用户权限，菜单权限等

node-sass 下载失败 解决方案

下载项目的时候run install时，node-sass下载失败后来我在项目根目录下添加了一个.npmrc

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org

把node-sass的路径修改成淘宝的npm，就很顺利的可以在国内的网络环境下载了

占个坑

readme in English?

Hi!

I so interested for this project, but I don't know Chinese languadge :(

Can you write the readme in English?
It would be great for whole Vue's community!

Regard, Alex.

请问加载第三方js有什么要注意的吗？？

只有个别文件用到的...能不在index.html里面加载么？
在vue里面import报错了

能换成多标签页显示内容吗？不用总是去左边的菜单去点。

一般都有这种需求。 以后会有吗？还是我们要自己再封装下？

使用官方 api除了删除min.js里的那段代码，还需要做什么呢？仅是注释那段，好像不行的

401 unauthorized 情况下想刷新 token，再发起相同的请求，这样是否好？

我想改写 utils/fetch.js，让网路请求返回 401（unauthorized） 时，也就是用户 token 过期时，自动请求刷新 token，然后以新 token 发起上一次的请求。这样做是为了即延续 token 的有效性，又不让用户重新登录。但我不清楚这样做是否可行？刷新 token 之后发起相同的请求，怎样写不至于显得啰嗦？希望能得到指点，谢谢。

export default function _fetch(options) {
    return new Promise((resolve, reject) => {
        const instance = axios.create({
            baseURL: process.env.BASE_API,
            headers: {
                'X-Ivanka-Token': store.getters.token
            }
        });
        instance(options).then(response => {
            const res = response.data;

            // 401 unauthorized
            if (res.code === 401) {
                refreshToken().then(response => {
                    // 得到新 token
                    const token = response.data.token;

                    //
                    // 接下去如何以新 token 发起上一次的请求？
                    //
                }).catch(error => {
                    reject(error);
                })
                reject(res);
            }

            // everything's fine
            resolve(res);
        }).catch(error => {
            reject(error);
        });
    });
}

导出文件

如果后台返回的是文件流，应该如何做

如何把代码交给服务端

您好，这种方式如何把前端文件交给php服务端呢？

路由配置页面index.js 中constantRouterMap 对象dashboard加入name配置报错

感谢作者提供这么好的一个例子，
请教一下，
我在src/router/index.js中的constantRouterMap 对象中 dashboard配置项，加入name属性，如下:

{
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    name: '首页',
    hidden: true,
    children: [{ path: 'dashboard',name:'dashboard ', component: dashboard }]
  }

不管name:xxx配置成什么值，都报错。
错误信息如下：

vue-router.esm.js:1304Uncaught (in promise) TypeError: Cannot assign to read only property 'path' of object '#<Object>'(…)

堆栈信息显示vue-router.esm.js，在下面代码报错

if (record) {
        location.path = fillParams(record.path, location.params, ("named route \"" + name + "\""));
        return _createRoute(record, location, redirectedFrom)
      }

我看其他的配置项有的都有name配置，百度，谷歌也不知道是哪里有问题？希望作者帮忙解答一下，谢谢。

windows 运行建议

依赖都安装了，node是7.9版本，执行npm run build：prod命令时，报错NODE_ENV不是内部或外部命令，sit同理。执行npm run dev的时候也报错，不支持es6...扩展符，看了下babelrc配置，好像也没啥问题，试了n次，去babel官网查了下也没有，这个问题有没有遇到过的~~（windows7系统）

bug提交

Sidebar.vue侧边导航栏收取时，移动鼠标到Sidebar上面sticky页面的蓝色导航条会在Sidebar菜单上面，阻挡了Sidebar显示，需要修改

//Layout.vue
.sidebar-wrapper {
            width: 180px;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: 2; // 改成 z-index: 1001;
            overflow-x: hidden;
            transition: all .28s ease-out;
            @include scrollBar;
        }

icon有哪些啊

icon有哪些啊

相应大家需求开了一个qq群 591724180 大家自行加

RT

动态换肤还没上嚒？

动态换肤还没上嚒？

方便把所有都开源么？

看了管理员的一些权限还没有放出来，是否方便把所有的开源一下，70多个页面呢。

建议弄一个vue-cli模板

如果直接上手开发的话要删除现有的页面,路由和vuex相关的东西,有点无从下手,希望弄个纯净点的模板工程.

cnpm run dev 时报错，跪求原因

> juicy@1.0.0 dev C:\Users\WY\vue-element-admin-master
> node build/dev-server.js

(node:4880) DeprecationWarning: loaderUtils.parseQuery() received a non-string v
alue which can be problematic, see https://github.com/webpack/loader-utils/issue
s/56
parseQuery() will be replaced with getOptions() in the next major version of loa
der-utils.

npm ERR! Windows_NT 6.1.7600
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\WY\\AppData\\Roa
ming\\npm\\node_modules\\cnpm\\node_modules\\npm\\bin\\npm-cli.js" "--userconfig
=C:\\Users\\WY\\.cnpmrc" "--disturl=https://npm.taobao.org/mirrors/node" "--regi
stry=https://registry.npm.taobao.org" "run" "dev"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! juicy@1.0.0 dev: `node build/dev-server.js`
npm ERR! Exit status 3221225501
npm ERR!
npm ERR! Failed at the juicy@1.0.0 dev script 'node build/dev-server.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the juicy package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node build/dev-server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs juicy
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls juicy
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\WY\vue-element-admin-master\npm-debug.log

有问题请看这里！

• 遇到问题首先在issue里面找找有没有类似的问题
• 如果没有去查阅 文档 或 wiki
• 善用自己的搜索问题能力，去google搜搜有没有解决方案
• 再没有你可以自己新建一个issue

在没有登录的情况下，访问需要路由权限的页面跳转到登录页面后，NProgress异常

在没有登录的情况下，访问需要路由权限的页面跳转到登录页面后，NProgress无法停止，一直转动显示。
直接访问登录页路由NProgress可以正常消失。

使用的是什么类型的License？MIT or Apache？

src/views/login/index.vue的style上，把scoped写成scoprd了。

我还特意去查了下scoprd是不是新出的东西。

windows平台运行npm install的依赖问题

你好。我把项目fork下来，然后在我的windows机器上运行npm install，发现如下错误：

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

发现这个是platform相关依赖，这种依赖是否能有解决办法呢？能否通过config文件来配置platform环境？

侧边来收缩

收缩功能 用户体验不怎好，感觉固定方式比较好，展出方式有点别扭，个人看法。。。。

请支持表格按栏目排序

http://panjiachen.github.io/vue-element-admin/#/example/table

这里提供的表格还没有支持表格排序，望作者快速实现。

发布命令报错，提示 'NODE_ENV' 不是内部或外部命令，也不是可运行的程序

我这边安装成功之后，npm run dev没有任何问题。但在输入发布命令时报错，不论是npm run build:sit-preview还是npm run build:prod，都提示同一个错误：

'NODE_ENV' 不是内部或外部命令，也不是可运行的程序。

想问问这个是要需要在那里设置一下这个NODE_ENV吗？

平台是windows，node安装在c盘根目录，版本7.9。
注：windows下面，需要把.eslintrc.js下面的

'linebreak-style': 'error',

修改为

'linebreak-style': ['error','windows'],

否则run dev也会报错，会提示一堆如" Expected linebreaks to be 'LF' but found 'CRLF'"之类的错误。

eslint检查

围观潘神大作～

Typo in login page

Should be: wallstreetcn.com

Please convert chinese to english the items.

Hi there ,
I am interesting admin panel but i dont understand anything.

Thanks

个别页面刷新时state值没有清空，是如何实现的？并没有看到缓存到本地。

比如这个页面，刷新后并没有提交mutation去获取user信息，但是state值居然不是空的

而且你也不是本地缓存实现的，请问你的实现思路是怎样的？ 被这个问题卡了好久。我写的东西一旦刷新state就会被清空。感谢

正在学习这个东西

正在学习这个东西，膜拜

background-image引用路径找不到

我在npm run dev的运行环境下，当我编写代码如下时：

...
<img src="../../assets/404.png" alt="404">
<div style="background-image: url(../../assets/404.png);"></div>
...

实际网页的代码为：

...
<img src="/static/img/404.a57b6f3.png" alt="404">
<div style="background-image: url(../../assets/404.png);"></div>
...

所以，img的图片路径可以显示图片，而div那个图片路径找不到。我猜这应该是webpack的问题，请问如何修改配置？谢谢。

建议增加国际化处理，至少支持中英文。

亲，如果三级菜单，或者四级菜单的话是怎么弄得

明确点说吧，就是多层路由嵌套的话，比如二级路由为/home/table 三级路由为/home/table/add/:id 视图是根据二级路由来更新的， 怎么才能只看到三级路由的内容，二级路由的内容不需要显示

markdown 编辑器页面有点小问题

markdown 编辑器页面有点小问题

刚刚在测试线上demo的时候，markdown的z-index 小于menu-nav的z-index，导致markdown一部分被menu-nav遮盖了

cnpm run dev 报错

! Failed at the [email protected] dev script 'node build/dev-server.js'.
! Make sure you have the latest version of node.js and npm installed.
! If you do, this is most likely a problem with the juicy package,
! not with npm itself.
! Tell the author that this fails on your system:
! node build/dev-server.js
! You can get information on how to open an issue for this project with:
! npm bugs juicy
! Or if that isn't available, you can get their info via:
! npm owner ls juicy
! There is likely additional logging output above.

! Please include the following file with any support request:
! D:\vue\vue-element-admin-master\npm-debug.log
cnpm run dev报了这个错误 ，我的npm和node是最新版本

登陆后直接跳转到有路由权限的页面，会转到404的页面

厉害了。先在这Mark一下 蛤蛤

账号登录和注销问题

在浏览器中，同时打开两个 tab，均登录到网站中。此时，在其中一个 tab 中注销登录，而另一个 tab 中可以正常切换路由，除非刷新页面才会自动退出到登录页面。

index页面刷新异常

http://panjiachen.github.io/vue-element-admin/#/introduction/index
刷新控制台报错

建议增加一个版本号或Tag标志，注明该版本实现的主要功能。

建议增加一个版本号或Tag标志，注明该版本实现的主要功能。

能否在点击删除按钮时增加popover

你好，请问在点击删除按钮的时候弹出Popover，然后再点击确定后再删除，这个可以加上吗，正在学习，自己做一直出错