[release] 4.1.0

chore: remove i18n (#1828 )
perf: optimize page scrolling when setting fixedHeader
2019-05-05 17:04:44 +08:00 · 2019-05-05 16:49:40 +08:00 · 2019-05-05 15:53:45 +08:00 · 2019-05-05 15:02:27 +08:00 · 2019-05-03 17:29:49 +08:00 · 2019-05-03 16:58:33 +08:00
282 changed files with 5469 additions and 5784 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -1,17 +0,0 @@
-{
-  "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
-      }
-    }],
-    "stage-2"
-  ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"],
-  "env": {
-    "development":{
-      "plugins": ["dynamic-import-node"]
-    }
-  }
-}
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,4 +1,4 @@
-# http://editorconfig.org
+# https://editorconfig.org
 root = true

 [*]
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1,14 @@
+# just a flag
+ENV = 'development'
+
+# base api
+VUE_APP_BASE_API = '/dev-api'
+
+# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
+# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
+# It only does one thing by converting all import() to require().
+# This configuration can significantly increase the speed of hot updates,
+# when you have a large number of pages.
+# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
+
+VUE_CLI_BABEL_TRANSPILE_MODULES = true
--- a/.env.production
+++ b/.env.production
@@ -0,0 +1,6 @@
+# just a flag
+ENV = 'production'
+
+# base api
+VUE_APP_BASE_API = '/prod-api'
+
--- a/.env.staging
+++ b/.env.staging
@@ -0,0 +1,8 @@
+NODE_ENV = production
+
+# just a flag
+ENV = 'staging'
+
+# base api
+VUE_APP_BASE_API = '/stage-api'
+
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 build/*.js
-config/*.js
 src/assets
+public
+dist
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -24,6 +24,7 @@ module.exports = {
    "vue/singleline-html-element-content-newline": "off",
    "vue/multiline-html-element-content-newline":"off",
    "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/no-v-html": "off",
    'accessor-pairs': 2,
    'arrow-spacing': [2, {
      'before': true,
@@ -46,7 +47,7 @@ module.exports = {
    'curly': [2, 'multi-line'],
    'dot-location': [2, 'property'],
    'eol-last': 2,
-    'eqeqeq': [2, 'allow-null'],
+    'eqeqeq': ["error", "always", {"null": "ignore"}],
    'generator-star-spacing': [2, {
      'before': true,
      'after': true
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,33 @@
+---
+name: Bug report（报告问题）
+about: Create a report to help us improve
+---
+<!--
+    注意：为更好的解决你的问题，请参考模板提供完整信息，准确描述问题，信息不全的 issue 将被关闭。
+
+    Note: In order to better solve your problem, please refer to the template to provide complete information, accurately describe the problem, and the incomplete information issue will be closed.
+-->
+
+
+## Bug report（问题描述）
+
+#### Steps to reproduce（问题复现步骤）
+<!--
+1. [xxx]
+2. [xxx]
+3. [xxxx]
+-->
+
+#### Screenshot or Gif（截图或动态图）
+
+
+#### Link to minimal reproduction（最小可在线还原demo）
+
+<!--
+Please only use Codepen, JSFiddle, CodeSandbox or a github repo
+-->
+
+#### Other relevant information（格外信息）
+- Your OS:
+- Node.js version:
+- vue-element-admin version:
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,7 @@
+---
+name: Feature Request（新功能建议）
+about: Suggest an idea for this project
+---
+
+## Feature request（新功能建议）
+
--- a/.github/ISSUE_TEMPLATE/question.md
+++ b/.github/ISSUE_TEMPLATE/question.md
@@ -0,0 +1,14 @@
+---
+name: Question（提问）
+about: Asking questions about use
+---
+
+## Question（提问）
+
+<!--
+    提问之前，请确定你已经过自己的努力，尝试解决过这个问题。
+    若是代码相关问题，请不要只截图，请提供在线 demo，以便节约彼此的时间。
+
+    Before asking a question, please make sure that you have tried your best to solve this problem.
+    If it's a code-related issue, please don't just take screenshots. Please provide an online demo to save each other's time.
+-->
--- a/.gitignore
+++ b/.gitignore
@@ -6,8 +6,8 @@ yarn-debug.log*
 yarn-error.log*
 **/*.log

-test/unit/coverage
-test/e2e/reports
+tests/**/coverage/
+tests/e2e/reports
 selenium-debug.log

 # Editor directories and files
@@ -17,5 +17,7 @@ selenium-debug.log
 *.ntvs*
 *.njsproj
 *.sln
+*.local

 package-lock.json
+yarn.lock
--- a/.postcssrc.js
+++ b/.postcssrc.js
@@ -2,8 +2,6 @@

 module.exports = {
  "plugins": {
-    "postcss-import": {},
-    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {}
  }
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,5 +1,5 @@
 language: node_js
-node_js: stable
+node_js: 10
 script: npm run test
 notifications:
  email: false
--- a/README.ja.md
+++ b/README.ja.md
@@ -0,0 +1,212 @@
+<p align="center">
+  <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
+</p>
+
+<p align="center">
+  <a href="https://github.com/vuejs/vue">
+    <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
+  </a>
+  <a href="https://github.com/ElemeFE/element">
+    <img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui">
+  </a>
+  <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
+    <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
+  </a>
+  <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
+    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
+  </a>
+  <a href="https://github.com/PanJiaChen/vue-element-admin/releases">
+    <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
+  </a>
+  <a href="https://gitter.im/vue-element-admin/discuss">
+    <img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter">
+  </a>
+  <a href="https://panjiachen.gitee.io/vue-element-admin-site/zh/donate">
+    <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
+  </a>
+</p>
+
+日本語 | [English](./README.md) | [简体中文](./README.zh-CN.md)
+
+## 概要
+
+[vue-element-admin](https://panjiachen.github.io/vue-element-admin) は管理画面のフロントエンドのインタフェース，[vue](https://github.com/vuejs/vue) と [element-ui](https://github.com/ElemeFE/element)を使っています。i18nの多言語対応、可変ルート、権限、典型的なビジネスアプリテンプレートであり、豊富なコンポーネントを提供しています、素早くビジネス用の管理画面の現型を構築に役立ちます。
+
+- [デモページ](https://panjiachen.github.io/vue-element-admin)
+
+- [ドキュメント](https://panjiachen.github.io/vue-element-admin-site/)
+
+- [Gitter](https://gitter.im/vue-element-admin/discuss)
+
+- [Donate](https://panjiachen.gitee.io/vue-element-admin-site/zh/donate)
+
+- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+
+- おすすめシンプルテンプレート: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
+- デスクトップバージョン: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+- Typescriptバージョン: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))
+
+**After the `v4.1.0+` version, the default master branch will not support i18n. Please use [i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), it will keep up with the master update**
+
+**現在のバージョン `v4.0+` は `vue-cli` で構築，バグ報告は[issue](https://github.com/PanJiaChen/vue-element-admin/issues/new)のissueでお願いします。旧バージョン[tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0)もあります。`vue-cli`に依存しないです。**
+
+**低いバージョンのブラウザはサーポートしないです(例えば ie)，必要があれば polyfill を追加してください。 [詳細はこちら](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
+
+## 前準備
+
+ローカル環境に [node](http://nodejs.org/) と [git](https://git-scm.com/)をインストールが必要です。[ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[vue-cli](https://github.com/vuejs/vue-cli) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element)で開発しています。Requestは[Mock.js](https://github.com/nuysoft/Mock)のモックデータを使っています。
+
+**バグ修正や新規機能追加のissue と pull requestは大歓迎です。**
+
+ <p align="center">
+  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
+</p>
+
+## Sponsors
+
+Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen)
+
+<a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p>
+
+## 機能一覧
+
+```
+- ログイン / ログアウト
+
+- Auth認証
+  - ページ権限
+  - 権限パーミッション
+  - 権限設定
+  - 外部IDでログイン
+
+- 複数環境デプロイ
+  - dev sit stage prod
+
+- 共通機能
+  - 多言語切替
+  - テーマ切替
+  - サイトメニュー（ルートから生成）
+  - Breadcrumb Navigation
+  - Tag Navigation
+  - Svg Sprite Icon
+  - ローカル/バックエンド モック データ
+  - Screenfull
+
+- WYSIWYG
+  - TinyMCE
+  - Markdown
+  - JSON
+
+- Excel
+  - エクスポート
+  - インポート
+  - リード
+  - Zip
+
+- Table
+  - Dynamic Table
+  - Drag And Drop Table
+  - Inline Edit Table
+
+- Error Page
+  - 401
+  - 404
+
+- コンポーネント
+  - 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
+
+```bash
+# 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
+
+```bash
+# build for test environment
+npm run build:stage
+
+# build for production environment
+npm run build:prod
+```
+
+## Advanced
+
+```bash
+# 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](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information
+
+## Changelog
+
+Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
+
+## Online Demo
+
+[Preview](https://panjiachen.github.io/vue-element-admin)
+
+## Donate
+
+If you find this project useful, you can buy author a glass of juice :tropical_drink:
+
+![donate](https://wpimg.wallstcn.com/bd273f0d-83a0-4ef2-92e1-9ac8ed3746b9.png)
+
+[Paypal Me](https://www.paypal.me/panfree23)
+
+[Buy me a coffee](https://www.buymeacoffee.com/Pan)
+
+## Browsers support
+
+Modern browsers and Internet Explorer 10+.
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
+| --------- | --------- | --------- | --------- |
+| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
+
+## License
+
+[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
+
+Copyright (c) 2017-present PanJiaChen
--- a/README.md
+++ b/README.md
@@ -4,10 +4,10 @@

 <p align="center">
  <a href="https://github.com/vuejs/vue">
-    <img src="https://img.shields.io/badge/vue-2.5.17-brightgreen.svg" alt="vue">
+    <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
  </a>
  <a href="https://github.com/ElemeFE/element">
-    <img src="https://img.shields.io/badge/element--ui-2.4.11-brightgreen.svg" alt="element-ui">
+    <img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui">
  </a>
  <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
    <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
@@ -26,52 +26,47 @@
  </a>
 </p>

-English | [简体中文](./README.zh-CN.md)
+English | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md)

 ## Introduction

-[vue-element-admin](http://panjiachen.github.io/vue-element-admin) is a front-end management background integration solution. It based on [vue](https://github.com/vuejs/vue) and use the UI Toolkit [element](https://github.com/ElemeFE/element).
+[vue-element-admin](https://panjiachen.github.io/vue-element-admin) is a production-ready front-end solution for admin interfaces. It based on [vue](https://github.com/vuejs/vue) and use the UI Toolkit [element-ui](https://github.com/ElemeFE/element).

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

-**[v4.0](https://github.com/PanJiaChen/vue-element-admin/tree/v4.0) has in beta. It built on vue-cli@3, optimized a lot of code and added a lot of new features. Welcome to use and make suggestions.**
-
- [Preview](http://panjiachen.github.io/vue-element-admin)
+- [Preview](https://panjiachen.github.io/vue-element-admin)

 - [Documentation](https://panjiachen.github.io/vue-element-admin-site/)

 - [Gitter](https://gitter.im/vue-element-admin/discuss)

- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
-
 - [Donate](https://panjiachen.github.io/vue-element-admin-site/donate/)

- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
+- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)

-**This project is positioned as a background integration solution and is not suitable for secondary development as a basic template.**
+- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览

 - Base template recommends using: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
 - Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 - Typescript: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))

-**This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.**
+**After the `v4.1.0+` version, the default master branch will not support i18n. Please use [i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), it will keep up with the master update**

-**Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+**
+**The current version is `v4.0+` build on `vue-cli`. If you find a problem, please put [issue](https://github.com/PanJiaChen/vue-element-admin/issues/new). If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0), it does not rely on `vue-cli`**

-**Start using `webpack4` from `v3.8.0`. If you still want to continue using `webpack3`, please use this branch [webpack3](https://github.com/PanJiaChen/vue-element-admin/tree/webpack3)**
+**This project does not support low version browsers (e.g. IE). Please add polyfill by yourself.**

 ## Preparation

-You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](http://es6.ruanyifeng.com/), [vue](https://cn.vuejs.org/index.html), [vuex](https://vuex.vuejs.org/zh-cn/), [vue-router](https://router.vuejs.org/zh-cn/), [axios](https://github.com/axios/axios) and [element-ui](https://github.com/ElemeFE/element), all request data is simulated using [Mock.js](https://github.com/nuysoft/Mock).
+You need to install [node](https://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](https://es6.ruanyifeng.com/), [vue](https://cn.vuejs.org/index.html), [vuex](https://vuex.vuejs.org/zh-cn/), [vue-router](https://router.vuejs.org/zh-cn/), [vue-cli](https://github.com/vuejs/vue-cli) , [axios](https://github.com/axios/axios) and [element-ui](https://github.com/ElemeFE/element), all request data is simulated using [Mock.js](https://github.com/nuysoft/Mock).
 Understanding and learning this knowledge in advance will greatly help the use of this project.

---
-
 <p align="center">
  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
 </p>

 ## Sponsors
+
 Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen)

 <a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p>
@@ -84,6 +79,7 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
 - Permission Authentication
  - Page permission
  - Directive permission
+  - Permission configuration page
  - Two-step login

 - Multi-environment build
@@ -107,14 +103,13 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s

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

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

 - Error Page
@@ -148,6 +143,9 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
 # 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

@@ -155,13 +153,13 @@ npm install
 npm run dev
 ```

-This will automatically open http://localhost:9527.
+This will automatically open http://localhost:9527

 ## Build

 ```bash
 # build for test environment
-npm run build:sit
+npm run build:stage

 # build for production environment
 npm run build:prod
@@ -170,19 +168,16 @@ npm run build:prod
 ## Advanced

 ```bash
-# --report to build with bundle size analytics
-npm run build:prod --report
+# preview the release environment effect
+npm run preview

-# --generate a bundle size analytics. default: bundle-report.html
-npm run build:prod --generate_report
+# preview the release environment effect + static resource analysis
+npm run preview -- --report

-# --preview to start a server in local to preview
-npm run build:prod --preview
-
-# lint code
+# code format check
 npm run lint

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

@@ -194,7 +189,7 @@ Detailed changes for each release are documented in the [release notes](https://

 ## Online Demo

-[Preview](http://panjiachen.github.io/vue-element-admin)
+[Preview](https://panjiachen.github.io/vue-element-admin)

 ## Donate

@@ -210,7 +205,7 @@ If you find this project useful, you can buy author a glass of juice :tropical_d

 Modern browsers and Internet Explorer 10+.

-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
 | --------- | --------- | --------- | --------- |
 | IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions

--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -4,10 +4,10 @@

 <p align="center">
  <a href="https://github.com/vuejs/vue">
-    <img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
+    <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
  </a>
  <a href="https://github.com/ElemeFE/element">
-    <img src="https://img.shields.io/badge/element--ui-2.4.11-brightgreen.svg" alt="element-ui">
+    <img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui">
  </a>
  <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
    <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
@@ -30,43 +30,39 @@

 ## 简介

-[vue-element-admin](http://panjiachen.github.io/vue-element-admin) 是一个后台集成解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
+[vue-element-admin](https://panjiachen.github.io/vue-element-admin) 是一个后台前端解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element-ui](https://github.com/ElemeFE/element)实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

-**[v4.0](https://github.com/PanJiaChen/vue-element-admin/tree/v4.0) 已经进入 beta 测试阶段。 它基于 vue-cli@3 进行构建，优化了大量代码(尤其是权限和 mock)，并且增加了不少新特性。欢迎使用并提出建议。**
-
- [在线访问](http://panjiachen.github.io/vue-element-admin)
+- [在线预览](https://panjiachen.github.io/vue-element-admin)

 - [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)

 - [Gitter 讨论组](https://gitter.im/vue-element-admin/discuss)

- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
-
 - [Donate](https://panjiachen.gitee.io/vue-element-admin-site/zh/donate)

- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
+- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)

- [国内访问文档](https://panjiachen.gitee.io/vue-element-admin-site/zh/) 方便没翻墙的用户查看文档
+- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 在线预览（国内用户可访问该地址）

-**本项目的定位是后台集成方案，不适合当基础模板来开发。**
+- [国内访问文档](https://panjiachen.gitee.io/vue-element-admin-site/zh/) 文档（方便没翻墙的用户查看）

- 模板建议使用: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
+- 基础模板建议使用: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
 - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 - Typescript 版: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))

-群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西，或者加入[qq 群](https://github.com/PanJiaChen/vue-element-admin/issues/602)或者关注[微博](https://weibo.com/u/3423485724?is_all=1)
-
-**注意：该项目使用 element-ui@2.3.0+ 版本，所以最低兼容 vue@2.5.0+**
-
-**从`v3.8.0`开始使用`webpack4`。所以若还想使用`webpack3`开发，请使用该分支[webpack3](https://github.com/PanJiaChen/vue-element-admin/tree/webpack3)**
+**`v4.1.0+`版本之后默认 master 分支将不支持国际化，有需要的请使用[i18n](https://github.com/PanJiaChen/vue-element-admin/tree/i18n)分支，它会和 master 保持同步更新**

 **该项目不支持低版本浏览器(如 ie)，有需求请自行添加 polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**

+**目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若发现问题，欢迎提[issue](https://github.com/PanJiaChen/vue-element-admin/issues/new)。若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0)，它不依赖 `vue-cli`**
+
+群主 **[圈子](https://jianshiapp.com/circles/1209)** 群主会经常分享一些技术相关的东西，或者加入 [qq 群](https://github.com/PanJiaChen/vue-element-admin/issues/602) 或者关注 [微博](https://weibo.com/u/3423485724?is_all=1)
+
 ## 前序准备

-你需要在本地安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。本项目技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element)，所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。
+你需要在本地安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。本项目技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[vue-cli](https://github.com/vuejs/vue-cli) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element)，所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)进行模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。

-同时配套一个系列的教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目
+同时配套了系列教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目

 - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
 - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
@@ -84,6 +80,7 @@
 </p>

 ## Sponsors
+
 Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen)

 <a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p>
@@ -96,6 +93,7 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
 - 权限验证
  - 页面权限
  - 指令权限
+  - 权限配置
  - 二步登录

 - 多环境发布
@@ -108,7 +106,7 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
  - 动态面包屑
  - 快捷导航(标签页)
  - Svg Sprite 图标
-  - 本地mock数据
+  - 本地/后端 mock 数据
  - Screenfull全屏
  - 自适应收缩侧边栏

@@ -119,14 +117,13 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s

 - Excel
  - 导出excel
-  - 导出zip
  - 导入excel
  - 前端可视化excel
+  - 导出zip

 - 表格
  - 动态表格
  - 拖拽表格
-  - 树形表格
  - 内联编辑

 - 错误页面
@@ -160,10 +157,13 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
 # 克隆项目
 git clone https://github.com/PanJiaChen/vue-element-admin.git

+# 进入项目目录
+cd vue-element-admin
+
 # 安装依赖
 npm install

-# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
+# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
 npm install --registry=https://registry.npm.taobao.org

 # 启动服务
@@ -176,7 +176,7 @@ npm run dev

 ```bash
 # 构建测试环境
-npm run build:sit
+npm run build:stage

 # 构建生产环境
 npm run build:prod
@@ -185,19 +185,16 @@ npm run build:prod
 ## 其它

 ```bash
-# --report to build with bundle size analytics
-npm run build:prod
+# 预览发布环境效果
+npm run preview

-# --generate a bundle size analytics. default: bundle-report.html
-npm run build:prod --generate_report
+# 预览发布环境效果 + 静态资源分析
+npm run preview -- --report

-# --preview to start a server in local to preview
-npm run build:prod --preview
-
-# lint code
+# 代码格式检查
 npm run lint

-# auto fix
+# 代码格式检查并自动修复
 npm run lint -- --fix
 ```

@@ -209,7 +206,7 @@ Detailed changes for each release are documented in the [release notes](https://

 ## Online Demo

-[在线 Demo](http://panjiachen.github.io/vue-element-admin)
+[在线 Demo](https://panjiachen.github.io/vue-element-admin)

 ## Donate

@@ -220,11 +217,13 @@ Detailed changes for each release are documented in the [release notes](https://

 [Paypal Me](https://www.paypal.me/panfree23)

+[Buy me a coffee](https://www.buymeacoffee.com/Pan)
+
 ## Browsers support

 Modern browsers and Internet Explorer 10+.

-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
 | --------- | --------- | --------- | --------- |
 | IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions

--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
--- a/build/build.js
+++ b/build/build.js
@@ -1,67 +0,0 @@
-'use strict'
-require('./check-versions')()
-
-const ora = require('ora')
-const rm = require('rimraf')
-const path = require('path')
-const chalk = require('chalk')
-const webpack = require('webpack')
-const config = require('../config')
-const webpackConfig = require('./webpack.prod.conf')
-var connect = require('connect')
-var serveStatic = require('serve-static')
-
-const spinner = ora(
-  'building for ' + process.env.env_config + ' environment...'
-)
-spinner.start()
-
-rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
-  if (err) throw err
-  webpack(webpackConfig, (err, stats) => {
-    spinner.stop()
-    if (err) throw err
-    process.stdout.write(
-      stats.toString({
-        colors: true,
-        modules: false,
-        children: false,
-        chunks: false,
-        chunkModules: false
-      }) + '\n\n'
-    )
-
-    if (stats.hasErrors()) {
-      console.log(chalk.red(' Build failed with errors.\n'))
-      process.exit(1)
-    }
-
-    console.log(chalk.cyan(' Build complete.\n'))
-    console.log(
-      chalk.yellow(
-        ' Tip: built files are meant to be served over an HTTP server.\n' +
-          " Opening index.html over file:// won't work.\n"
-      )
-    )
-
-    if (process.env.npm_config_preview) {
-      const port = 9526
-      const host = 'http://localhost:' + port
-      const basePath = config.build.assetsPublicPath
-      const app = connect()
-
-      app.use(
-        basePath,
-        serveStatic('./dist', {
-          index: ['index.html', '/']
-        })
-      )
-
-      app.listen(port, function() {
-        console.log(
-          chalk.green(`> Listening at  http://localhost:${port}${basePath}`)
-        )
-      })
-    }
-  })
-})
--- a/build/check-versions.js
+++ b/build/check-versions.js
@@ -1,64 +0,0 @@
-'use strict'
-const chalk = require('chalk')
-const semver = require('semver')
-const packageConfig = require('../package.json')
-const shell = require('shelljs')
-
-function exec(cmd) {
-  return require('child_process')
-    .execSync(cmd)
-    .toString()
-    .trim()
-}
-
-const versionRequirements = [
-  {
-    name: 'node',
-    currentVersion: semver.clean(process.version),
-    versionRequirement: packageConfig.engines.node
-  }
-]
-
-if (shell.which('npm')) {
-  versionRequirements.push({
-    name: 'npm',
-    currentVersion: exec('npm --version'),
-    versionRequirement: packageConfig.engines.npm
-  })
-}
-
-module.exports = function() {
-  const warnings = []
-
-  for (let i = 0; i < versionRequirements.length; i++) {
-    const mod = versionRequirements[i]
-
-    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-      warnings.push(
-        mod.name +
-          ': ' +
-          chalk.red(mod.currentVersion) +
-          ' should be ' +
-          chalk.green(mod.versionRequirement)
-      )
-    }
-  }
-
-  if (warnings.length) {
-    console.log('')
-    console.log(
-      chalk.yellow(
-        'To use this template, you must update following to modules:'
-      )
-    )
-    console.log()
-
-    for (let i = 0; i < warnings.length; i++) {
-      const warning = warnings[i]
-      console.log('  ' + warning)
-    }
-
-    console.log()
-    process.exit(1)
-  }
-}
--- a/build/index.js
+++ b/build/index.js
@@ -0,0 +1,35 @@
+const { run } = require('runjs')
+const chalk = require('chalk')
+const config = require('../vue.config.js')
+const rawArgv = process.argv.slice(2)
+const args = rawArgv.join(' ')
+
+if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
+  const report = rawArgv.includes('--report')
+
+  run(`vue-cli-service build ${args}`)
+
+  const port = 9526
+  const publicPath = config.publicPath
+
+  var connect = require('connect')
+  var serveStatic = require('serve-static')
+  const app = connect()
+
+  app.use(
+    publicPath,
+    serveStatic('./dist', {
+      index: ['index.html', '/']
+    })
+  )
+
+  app.listen(port, function () {
+    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
+    if (report) {
+      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
+    }
+
+  })
+} else {
+  run(`vue-cli-service build ${args}`)
+}
--- a/build/logo.png
+++ b/build/logo.png
--- a/build/utils.js
+++ b/build/utils.js
@@ -1,108 +0,0 @@
-'use strict'
-const path = require('path')
-const config = require('../config')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const packageConfig = require('../package.json')
-
-exports.assetsPath = function(_path) {
-  const assetsSubDirectory =
-    process.env.NODE_ENV === 'production'
-      ? config.build.assetsSubDirectory
-      : config.dev.assetsSubDirectory
-
-  return path.posix.join(assetsSubDirectory, _path)
-}
-
-exports.cssLoaders = function(options) {
-  options = options || {}
-
-  const cssLoader = {
-    loader: 'css-loader',
-    options: {
-      sourceMap: options.sourceMap
-    }
-  }
-
-  const postcssLoader = {
-    loader: 'postcss-loader',
-    options: {
-      sourceMap: options.sourceMap
-    }
-  }
-
-  // generate loader string to be used with extract text plugin
-  function generateLoaders(loader, loaderOptions) {
-    const loaders = []
-
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      loaders.push(MiniCssExtractPlugin.loader)
-    } else {
-      loaders.push('vue-style-loader')
-    }
-
-    loaders.push(cssLoader)
-
-    if (options.usePostCSS) {
-      loaders.push(postcssLoader)
-    }
-
-    if (loader) {
-      loaders.push({
-        loader: loader + '-loader',
-        options: Object.assign({}, loaderOptions, {
-          sourceMap: options.sourceMap
-        })
-      })
-    }
-
-    return loaders
-  }
-  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
-  return {
-    css: generateLoaders(),
-    postcss: generateLoaders(),
-    less: generateLoaders('less'),
-    sass: generateLoaders('sass', {
-      indentedSyntax: true
-    }),
-    scss: generateLoaders('sass'),
-    stylus: generateLoaders('stylus'),
-    styl: generateLoaders('stylus')
-  }
-}
-
-// Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function(options) {
-  const output = []
-  const loaders = exports.cssLoaders(options)
-
-  for (const extension in loaders) {
-    const loader = loaders[extension]
-    output.push({
-      test: new RegExp('\\.' + extension + '$'),
-      use: loader
-    })
-  }
-
-  return output
-}
-
-exports.createNotifierCallback = () => {
-  const notifier = require('node-notifier')
-
-  return (severity, errors) => {
-    if (severity !== 'error') return
-
-    const error = errors[0]
-    const filename = error.file && error.file.split('!').pop()
-
-    notifier.notify({
-      title: packageConfig.name,
-      message: severity + ': ' + error.name,
-      subtitle: filename || '',
-      icon: path.join(__dirname, 'logo.png')
-    })
-  }
-}
--- a/build/vue-loader.conf.js
+++ b/build/vue-loader.conf.js
@@ -1,5 +0,0 @@
-'use strict'
-
-module.exports = {
-  //You can set the vue-loader configuration by yourself.
-}
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -1,107 +0,0 @@
-'use strict'
-const path = require('path')
-const utils = require('./utils')
-const config = require('../config')
-const { VueLoaderPlugin } = require('vue-loader')
-const vueLoaderConfig = require('./vue-loader.conf')
-
-function resolve(dir) {
-  return path.join(__dirname, '..', dir)
-}
-
-const createLintingRule = () => ({
-  test: /\.(js|vue)$/,
-  loader: 'eslint-loader',
-  enforce: 'pre',
-  include: [resolve('src'), resolve('test')],
-  options: {
-    formatter: require('eslint-friendly-formatter'),
-    emitWarning: !config.dev.showEslintErrorsInOverlay
-  }
-})
-
-module.exports = {
-  context: path.resolve(__dirname, '../'),
-  entry: {
-    app: './src/main.js'
-  },
-  output: {
-    path: config.build.assetsRoot,
-    filename: '[name].js',
-    publicPath:
-      process.env.NODE_ENV === 'production'
-        ? config.build.assetsPublicPath
-        : config.dev.assetsPublicPath
-  },
-  resolve: {
-    extensions: ['.js', '.vue', '.json'],
-    alias: {
-      '@': resolve('src')
-    }
-  },
-  module: {
-    rules: [
-      ...(config.dev.useEslint ? [createLintingRule()] : []),
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: vueLoaderConfig
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader?cacheDirectory',
-        include: [
-          resolve('src'),
-          resolve('test'),
-          resolve('node_modules/webpack-dev-server/client')
-        ]
-      },
-      {
-        test: /\.svg$/,
-        loader: 'svg-sprite-loader',
-        include: [resolve('src/icons')],
-        options: {
-          symbolId: 'icon-[name]'
-        }
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        exclude: [resolve('src/icons')],
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('media/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-        }
-      }
-    ]
-  },
-  plugins: [new VueLoaderPlugin()],
-  node: {
-    // prevent webpack from injecting useless setImmediate polyfill because Vue
-    // source contains it (although only uses it if it's native).
-    setImmediate: false,
-    // prevent webpack from injecting mocks to Node native modules
-    // that does not make sense for the client
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty'
-  }
-}
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -1,98 +0,0 @@
-'use strict'
-const path = require('path')
-const utils = require('./utils')
-const webpack = require('webpack')
-const config = require('../config')
-const merge = require('webpack-merge')
-const baseWebpackConfig = require('./webpack.base.conf')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
-const portfinder = require('portfinder')
-
-function resolve(dir) {
-  return path.join(__dirname, '..', dir)
-}
-
-const HOST = process.env.HOST
-const PORT = process.env.PORT && Number(process.env.PORT)
-
-const devWebpackConfig = merge(baseWebpackConfig, {
-  mode: 'development',
-  module: {
-    rules: utils.styleLoaders({
-      sourceMap: config.dev.cssSourceMap,
-      usePostCSS: true
-    })
-  },
-  // cheap-module-eval-source-map is faster for development
-  devtool: config.dev.devtool,
-
-  // these devServer options should be customized in /config/index.js
-  devServer: {
-    clientLogLevel: 'warning',
-    historyApiFallback: true,
-    hot: true,
-    compress: true,
-    host: HOST || config.dev.host,
-    port: PORT || config.dev.port,
-    open: config.dev.autoOpenBrowser,
-    overlay: config.dev.errorOverlay
-      ? { warnings: false, errors: true }
-      : false,
-    publicPath: config.dev.assetsPublicPath,
-    proxy: config.dev.proxyTable,
-    quiet: true, // necessary for FriendlyErrorsPlugin
-    watchOptions: {
-      poll: config.dev.poll
-    }
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': require('../config/dev.env')
-    }),
-    new webpack.HotModuleReplacementPlugin(),
-    // https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: 'index.html',
-      inject: true,
-      favicon: resolve('favicon.ico'),
-      title: 'vue-element-admin',
-      templateParameters: {
-        BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory,
-      },
-    }),
-  ]
-})
-
-module.exports = new Promise((resolve, reject) => {
-  portfinder.basePort = process.env.PORT || config.dev.port
-  portfinder.getPort((err, port) => {
-    if (err) {
-      reject(err)
-    } else {
-      // publish the new Port, necessary for e2e tests
-      process.env.PORT = port
-      // add port to devServer config
-      devWebpackConfig.devServer.port = port
-
-      // Add FriendlyErrorsPlugin
-      devWebpackConfig.plugins.push(
-        new FriendlyErrorsPlugin({
-          compilationSuccessInfo: {
-            messages: [
-              `Your application is running here: http://${
-                devWebpackConfig.devServer.host
-              }:${port}`
-            ]
-          },
-          onErrors: config.dev.notifyOnErrors
-            ? utils.createNotifierCallback()
-            : undefined
-        })
-      )
-
-      resolve(devWebpackConfig)
-    }
-  })
-})
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@@ -1,187 +0,0 @@
-'use strict'
-const path = require('path')
-const utils = require('./utils')
-const webpack = require('webpack')
-const config = require('../config')
-const merge = require('webpack-merge')
-const baseWebpackConfig = require('./webpack.base.conf')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-
-function resolve(dir) {
-  return path.join(__dirname, '..', dir)
-}
-
-const env = require('../config/' + process.env.env_config + '.env')
-
-// For NamedChunksPlugin
-const seen = new Set()
-const nameLength = 4
-
-const webpackConfig = merge(baseWebpackConfig, {
-  mode: 'production',
-  module: {
-    rules: utils.styleLoaders({
-      sourceMap: config.build.productionSourceMap,
-      extract: true,
-      usePostCSS: true
-    })
-  },
-  devtool: config.build.productionSourceMap ? config.build.devtool : false,
-  output: {
-    path: config.build.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash:8].js'),
-    chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].js')
-  },
-  plugins: [
-    // http://vuejs.github.io/vue-loader/en/workflow/production.html
-    new webpack.DefinePlugin({
-      'process.env': env
-    }),
-    // extract css into its own file
-    new MiniCssExtractPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash:8].css'),
-      chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css')
-    }),
-    // generate dist index.html with correct asset hash for caching.
-    // you can customize output by editing /index.html
-    // see https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: config.build.index,
-      template: 'index.html',
-      inject: true,
-      favicon: resolve('favicon.ico'),
-      title: 'vue-element-admin',
-      templateParameters: {
-        BASE_URL: config.build.assetsPublicPath + config.build.assetsSubDirectory,
-      },
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeAttributeQuotes: true
-        // more options:
-        // https://github.com/kangax/html-minifier#options-quick-reference
-      }
-      // default sort mode uses toposort which cannot handle cyclic deps
-      // in certain cases, and in webpack 4, chunk order in HTML doesn't
-      // matter anyway
-    }),
-    new ScriptExtHtmlWebpackPlugin({
-      //`runtime` must same as runtimeChunk name. default is `runtime`
-      inline: /runtime\..*\.js$/
-    }),
-    // keep chunk.id stable when chunk has no name
-    new webpack.NamedChunksPlugin(chunk => {
-      if (chunk.name) {
-        return chunk.name
-      }
-      const modules = Array.from(chunk.modulesIterable)
-      if (modules.length > 1) {
-        const hash = require('hash-sum')
-        const joinedHash = hash(modules.map(m => m.id).join('_'))
-        let len = nameLength
-        while (seen.has(joinedHash.substr(0, len))) len++
-        seen.add(joinedHash.substr(0, len))
-        return `chunk-${joinedHash.substr(0, len)}`
-      } else {
-        return modules[0].id
-      }
-    }),
-    // keep module.id stable when vender modules does not change
-    new webpack.HashedModuleIdsPlugin(),
-    // copy custom static assets
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, '../static'),
-        to: config.build.assetsSubDirectory,
-        ignore: ['.*']
-      }
-    ])
-  ],
-  optimization: {
-    splitChunks: {
-      chunks: 'all',
-      cacheGroups: {
-        libs: {
-          name: 'chunk-libs',
-          test: /[\\/]node_modules[\\/]/,
-          priority: 10,
-          chunks: 'initial' // 只打包初始时依赖的第三方
-        },
-        elementUI: {
-          name: 'chunk-elementUI', // 单独将 elementUI 拆包
-          priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
-          test: /[\\/]node_modules[\\/]element-ui[\\/]/
-        },
-        commons: {
-          name: 'chunk-commons',
-          test: resolve('src/components'), // 可自定义拓展你的规则
-          minChunks: 3, // 最小公用次数
-          priority: 5,
-          reuseExistingChunk: true
-        }
-      }
-    },
-    runtimeChunk: 'single',
-    minimizer: [
-      new UglifyJsPlugin({
-        uglifyOptions: {
-          mangle: {
-            safari10: true
-          }
-        },
-        sourceMap: config.build.productionSourceMap,
-        cache: true,
-        parallel: true
-      }),
-      // Compress extracted CSS. We are using this plugin so that possible
-      // duplicated CSS from different components can be deduped.
-      new OptimizeCSSAssetsPlugin()
-    ]
-  }
-})
-
-if (config.build.productionGzip) {
-  const CompressionWebpackPlugin = require('compression-webpack-plugin')
-
-  webpackConfig.plugins.push(
-    new CompressionWebpackPlugin({
-      algorithm: 'gzip',
-      test: new RegExp(
-        '\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
-      ),
-      threshold: 10240,
-      minRatio: 0.8
-    })
-  )
-}
-
-if (config.build.generateAnalyzerReport || config.build.bundleAnalyzerReport) {
-  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-    .BundleAnalyzerPlugin
-
-  if (config.build.bundleAnalyzerReport) {
-    webpackConfig.plugins.push(
-      new BundleAnalyzerPlugin({
-        analyzerPort: 8080,
-        generateStatsFile: false
-      })
-    )
-  }
-
-  if (config.build.generateAnalyzerReport) {
-    webpackConfig.plugins.push(
-      new BundleAnalyzerPlugin({
-        analyzerMode: 'static',
-        reportFilename: 'bundle-report.html',
-        openAnalyzer: false
-      })
-    )
-  }
-}
-
-module.exports = webpackConfig
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -1,5 +0,0 @@
-module.exports = {
-  NODE_ENV: '"development"',
-  ENV_CONFIG: '"dev"',
-  BASE_API: '"https://api-dev"'
-}
--- a/config/index.js
+++ b/config/index.js
@@ -1,88 +0,0 @@
-'use strict'
-// Template version: 1.2.6
-// see http://vuejs-templates.github.io/webpack for documentation.
-
-const path = require('path')
-
-module.exports = {
-  dev: {
-    // Paths
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
-    proxyTable: {},
-
-    // Various Dev Server settings
-
-    // can be overwritten by process.env.HOST
-    // if you want dev by ip, please set host: '0.0.0.0'
-    host: 'localhost',
-    port: 9527, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
-    autoOpenBrowser: true,
-    errorOverlay: true,
-    notifyOnErrors: false,
-    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
-
-    // Use Eslint Loader?
-    // If true, your code will be linted during bundling and
-    // linting errors and warnings will be shown in the console.
-    useEslint: true,
-    // If true, eslint errors and warnings will also be shown in the error overlay
-    // in the browser.
-    showEslintErrorsInOverlay: false,
-
-    /**
-     * Source Maps
-     */
-
-    // https://webpack.js.org/configuration/devtool/#development
-    devtool: 'cheap-source-map',
-
-    // CSS Sourcemaps off by default because relative paths are "buggy"
-    // with this option, according to the CSS-Loader README
-    // (https://github.com/webpack/css-loader#sourcemaps)
-    // In our experience, they generally work as expected,
-    // just be aware of this issue when enabling this option.
-    cssSourceMap: false
-  },
-
-  build: {
-    // Template for index.html
-    index: path.resolve(__dirname, '../dist/index.html'),
-
-    // Paths
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-
-    /**
-     * You can set by youself according to actual condition
-     * You will need to set this if you plan to deploy your site under a sub path,
-     * for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
-     * then assetsPublicPath should be set to "/bar/".
-     * In most cases please use '/' !!!
-     */
-    assetsPublicPath: '/',
-
-    /**
-     * Source Maps
-     */
-    productionSourceMap: false,
-    // https://webpack.js.org/configuration/devtool/#production
-    devtool: 'source-map',
-
-    // Gzip off by default as many popular static hosts such as
-    // Surge or Netlify already gzip all static assets for you.
-    // Before setting to `true`, make sure to:
-    // npm install --save-dev compression-webpack-plugin
-    productionGzip: false,
-    productionGzipExtensions: ['js', 'css'],
-
-    // Run the build command with an extra argument to
-    // View the bundle analyzer report after build finishes:
-    // `npm run build:prod --report`
-    // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: process.env.npm_config_report || false,
-
-    // `npm run build:prod --generate_report`
-    generateAnalyzerReport: process.env.npm_config_generate_report || false
-  }
-}
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +0,0 @@
-module.exports = {
-  NODE_ENV: '"production"',
-  ENV_CONFIG: '"prod"',
-  BASE_API: '"https://api-prod"'
-}
--- a/config/sit.env.js
+++ b/config/sit.env.js
@@ -1,5 +0,0 @@
-module.exports = {
-  NODE_ENV: '"production"',
-  ENV_CONFIG: '"sit"',
-  BASE_API: '"https://api-sit"'
-}
--- a/jest.config.js
+++ b/jest.config.js
@@ -0,0 +1,24 @@
+module.exports = {
+  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
+    '^.+\\.jsx?$': 'babel-jest'
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  snapshotSerializers: ['jest-serializer-vue'],
+  testMatch: [
+    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+  ],
+  collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
+  coverageDirectory: '<rootDir>/tests/unit/coverage',
+  // 'collectCoverage': true,
+  'coverageReporters': [
+    'lcov',
+    'text-summary'
+  ],
+  testURL: 'http://localhost/'
+}
--- a/mock/article.js
+++ b/mock/article.js
@@ -0,0 +1,116 @@
+import Mock from 'mockjs'
+
+const List = []
+const count = 100
+
+const baseContent = '<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
+const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
+
+for (let i = 0; i < count; i++) {
+  List.push(Mock.mock({
+    id: '@increment',
+    timestamp: +Mock.Random.date('T'),
+    author: '@first',
+    reviewer: '@first',
+    title: '@title(5, 10)',
+    content_short: 'mock data',
+    content: baseContent,
+    forecast: '@float(0, 100, 2, 2)',
+    importance: '@integer(1, 3)',
+    'type|1': ['CN', 'US', 'JP', 'EU'],
+    'status|1': ['published', 'draft', 'deleted'],
+    display_time: '@datetime',
+    comment_disabled: true,
+    pageviews: '@integer(300, 5000)',
+    image_uri,
+    platforms: ['a-platform']
+  }))
+}
+
+export default [
+  {
+    url: '/article/list',
+    type: 'get',
+    response: config => {
+      const { importance, type, title, page = 1, limit = 20, sort } = config.query
+
+      let mockList = List.filter(item => {
+        if (importance && item.importance !== +importance) return false
+        if (type && item.type !== type) return false
+        if (title && item.title.indexOf(title) < 0) return false
+        return true
+      })
+
+      if (sort === '-id') {
+        mockList = mockList.reverse()
+      }
+
+      const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
+
+      return {
+        code: 20000,
+        data: {
+          total: mockList.length,
+          items: pageList
+        }
+      }
+    }
+  },
+
+  {
+    url: '/article/detail',
+    type: 'get',
+    response: config => {
+      const { id } = config.query
+      for (const article of List) {
+        if (article.id === +id) {
+          return {
+            code: 20000,
+            data: article
+          }
+        }
+      }
+    }
+  },
+
+  {
+    url: '/article/pv',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 20000,
+        data: {
+          pvData: [
+            { key: 'PC', pv: 1024 },
+            { key: 'mobile', pv: 1024 },
+            { key: 'ios', pv: 1024 },
+            { key: 'android', pv: 1024 }
+          ]
+        }
+      }
+    }
+  },
+
+  {
+    url: '/article/create',
+    type: 'post',
+    response: _ => {
+      return {
+        code: 20000,
+        data: 'success'
+      }
+    }
+  },
+
+  {
+    url: '/article/update',
+    type: 'post',
+    response: _ => {
+      return {
+        code: 20000,
+        data: 'success'
+      }
+    }
+  }
+]
+
--- a/mock/index.js
+++ b/mock/index.js
@@ -0,0 +1,70 @@
+import Mock from 'mockjs'
+import { param2Obj } from '../src/utils'
+
+import user from './user'
+import role from './role'
+import article from './article'
+import search from './remote-search'
+
+const mocks = [
+  ...user,
+  ...role,
+  ...article,
+  ...search
+]
+
+// for front mock
+// please use it cautiously, it will redefine XMLHttpRequest,
+// which will cause many of your third-party libraries to be invalidated(like progress event).
+export function mockXHR() {
+  // mock patch
+  // https://github.com/nuysoft/Mock/issues/300
+  Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
+  Mock.XHR.prototype.send = function() {
+    if (this.custom.xhr) {
+      this.custom.xhr.withCredentials = this.withCredentials || false
+
+      if (this.responseType) {
+        this.custom.xhr.responseType = this.responseType
+      }
+    }
+    this.proxy_send(...arguments)
+  }
+
+  function XHR2ExpressReqWrap(respond) {
+    return function(options) {
+      let result = null
+      if (respond instanceof Function) {
+        const { body, type, url } = options
+        // https://expressjs.com/en/4x/api.html#req
+        result = respond({
+          method: type,
+          body: JSON.parse(body),
+          query: param2Obj(url)
+        })
+      } else {
+        result = respond
+      }
+      return Mock.mock(result)
+    }
+  }
+
+  for (const i of mocks) {
+    Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
+  }
+}
+
+// for mock server
+const responseFake = (url, type, respond) => {
+  return {
+    url: new RegExp(`/mock${url}`),
+    type: type || 'get',
+    response(req, res) {
+      res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
+    }
+  }
+}
+
+export default mocks.map(route => {
+  return responseFake(route.url, route.type, route.response)
+})
--- a/mock/mock-server.js
+++ b/mock/mock-server.js
@@ -0,0 +1,68 @@
+const chokidar = require('chokidar')
+const bodyParser = require('body-parser')
+const chalk = require('chalk')
+const path = require('path')
+
+const mockDir = path.join(process.cwd(), 'mock')
+
+function registerRoutes(app) {
+  let mockLastIndex
+  const { default: mocks } = require('./index.js')
+  for (const mock of mocks) {
+    app[mock.type](mock.url, mock.response)
+    mockLastIndex = app._router.stack.length
+  }
+  const mockRoutesLength = Object.keys(mocks).length
+  return {
+    mockRoutesLength: mockRoutesLength,
+    mockStartIndex: mockLastIndex - mockRoutesLength
+  }
+}
+
+function unregisterRoutes() {
+  Object.keys(require.cache).forEach(i => {
+    if (i.includes(mockDir)) {
+      delete require.cache[require.resolve(i)]
+    }
+  })
+}
+
+module.exports = app => {
+  // es6 polyfill
+  require('@babel/register')
+
+  // parse app.body
+  // https://expressjs.com/en/4x/api.html#req.body
+  app.use(bodyParser.json())
+  app.use(bodyParser.urlencoded({
+    extended: true
+  }))
+
+  const mockRoutes = registerRoutes(app)
+  var mockRoutesLength = mockRoutes.mockRoutesLength
+  var mockStartIndex = mockRoutes.mockStartIndex
+
+  // watch files, hot reload mock server
+  chokidar.watch(mockDir, {
+    ignored: /mock-server/,
+    ignoreInitial: true
+  }).on('all', (event, path) => {
+    if (event === 'change' || event === 'add') {
+      try {
+        // remove mock routes stack
+        app._router.stack.splice(mockStartIndex, mockRoutesLength)
+
+        // clear routes cache
+        unregisterRoutes()
+
+        const mockRoutes = registerRoutes(app)
+        mockRoutesLength = mockRoutes.mockRoutesLength
+        mockStartIndex = mockRoutes.mockStartIndex
+
+        console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed  ${path}`))
+      } catch (error) {
+        console.log(chalk.redBright(error))
+      }
+    }
+  })
+}
--- a/mock/remote-search.js
+++ b/mock/remote-search.js
@@ -0,0 +1,51 @@
+import Mock from 'mockjs'
+
+const NameList = []
+const count = 100
+
+for (let i = 0; i < count; i++) {
+  NameList.push(Mock.mock({
+    name: '@first'
+  }))
+}
+NameList.push({ name: 'mock-Pan' })
+
+export default [
+  // username search
+  {
+    url: '/search/user',
+    type: 'get',
+    response: config => {
+      const { name } = config.query
+      const mockNameList = NameList.filter(item => {
+        const lowerCaseName = item.name.toLowerCase()
+        return !(name && lowerCaseName.indexOf(name.toLowerCase()) < 0)
+      })
+      return {
+        code: 20000,
+        data: { items: mockNameList }
+      }
+    }
+  },
+
+  // transaction list
+  {
+    url: '/transaction/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 20000,
+        data: {
+          total: 20,
+          'items|20': [{
+            order_no: '@guid()',
+            timestamp: +Mock.Random.date('T'),
+            username: '@name()',
+            price: '@float(1000, 15000, 0, 2)',
+            'status|1': ['success', 'pending']
+          }]
+        }
+      }
+    }
+  }
+]
--- a/mock/role/index.js
+++ b/mock/role/index.js
@@ -0,0 +1,98 @@
+import Mock from 'mockjs'
+import { deepClone } from '../../src/utils/index.js'
+import { asyncRoutes, constantRoutes } from './routes.js'
+
+const routes = deepClone([...constantRoutes, ...asyncRoutes])
+
+const roles = [
+  {
+    key: 'admin',
+    name: 'admin',
+    description: 'Super Administrator. Have access to view all pages.',
+    routes: routes
+  },
+  {
+    key: 'editor',
+    name: 'editor',
+    description: 'Normal Editor. Can see all pages except permission page',
+    routes: routes.filter(i => i.path !== '/permission')// just a mock
+  },
+  {
+    key: 'visitor',
+    name: 'visitor',
+    description: 'Just a visitor. Can only see the home page and the document page',
+    routes: [{
+      path: '',
+      redirect: 'dashboard',
+      children: [
+        {
+          path: 'dashboard',
+          name: 'Dashboard',
+          meta: { title: 'dashboard', icon: 'dashboard' }
+        }
+      ]
+    }]
+  }
+]
+
+export default [
+  // mock get all routes form server
+  {
+    url: '/routes',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 20000,
+        data: routes
+      }
+    }
+  },
+
+  // mock get all roles form server
+  {
+    url: '/roles',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 20000,
+        data: roles
+      }
+    }
+  },
+
+  // add role
+  {
+    url: '/role',
+    type: 'post',
+    response: {
+      code: 20000,
+      data: {
+        key: Mock.mock('@integer(300, 5000)')
+      }
+    }
+  },
+
+  // update role
+  {
+    url: '/role/[A-Za-z0-9]',
+    type: 'put',
+    response: {
+      code: 20000,
+      data: {
+        status: 'success'
+      }
+    }
+  },
+
+  // delete role
+  {
+    url: '/role/[A-Za-z0-9]',
+    type: 'delete',
+    response: {
+      code: 20000,
+      data: {
+        status: 'success'
+      }
+    }
+  }
+]
--- a/mock/role/routes.js
+++ b/mock/role/routes.js
@@ -0,0 +1,525 @@
+// Just a mock data
+
+export const constantRoutes = [
+  {
+    path: '/redirect',
+    component: 'layout/Layout',
+    hidden: true,
+    children: [
+      {
+        path: '/redirect/:path*',
+        component: 'views/redirect/index'
+      }
+    ]
+  },
+  {
+    path: '/login',
+    component: 'views/login/index',
+    hidden: true
+  },
+  {
+    path: '/auth-redirect',
+    component: 'views/login/auth-redirect',
+    hidden: true
+  },
+  {
+    path: '/404',
+    component: 'views/error-page/404',
+    hidden: true
+  },
+  {
+    path: '/401',
+    component: 'views/error-page/401',
+    hidden: true
+  },
+  {
+    path: '',
+    component: 'layout/Layout',
+    redirect: 'dashboard',
+    children: [
+      {
+        path: 'dashboard',
+        component: 'views/dashboard/index',
+        name: 'Dashboard',
+        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
+      }
+    ]
+  },
+  {
+    path: '/documentation',
+    component: 'layout/Layout',
+    children: [
+      {
+        path: 'index',
+        component: 'views/documentation/index',
+        name: 'Documentation',
+        meta: { title: 'Documentation', icon: 'documentation', affix: true }
+      }
+    ]
+  },
+  {
+    path: '/guide',
+    component: 'layout/Layout',
+    redirect: '/guide/index',
+    children: [
+      {
+        path: 'index',
+        component: 'views/guide/index',
+        name: 'Guide',
+        meta: { title: 'Guide', icon: 'guide', noCache: true }
+      }
+    ]
+  }
+]
+
+export const asyncRoutes = [
+  {
+    path: '/permission',
+    component: 'layout/Layout',
+    redirect: '/permission/index',
+    alwaysShow: true,
+    meta: {
+      title: 'Permission',
+      icon: 'lock',
+      roles: ['admin', 'editor']
+    },
+    children: [
+      {
+        path: 'page',
+        component: 'views/permission/page',
+        name: 'PagePermission',
+        meta: {
+          title: 'Page Permission',
+          roles: ['admin']
+        }
+      },
+      {
+        path: 'directive',
+        component: 'views/permission/directive',
+        name: 'DirectivePermission',
+        meta: {
+          title: 'Directive Permission'
+        }
+      },
+      {
+        path: 'role',
+        component: 'views/permission/role',
+        name: 'RolePermission',
+        meta: {
+          title: 'Role Permission',
+          roles: ['admin']
+        }
+      }
+    ]
+  },
+
+  {
+    path: '/icon',
+    component: 'layout/Layout',
+    children: [
+      {
+        path: 'index',
+        component: 'views/icons/index',
+        name: 'Icons',
+        meta: { title: 'Icons', icon: 'icon', noCache: true }
+      }
+    ]
+  },
+
+  {
+    path: '/components',
+    component: 'layout/Layout',
+    redirect: 'noRedirect',
+    name: 'ComponentDemo',
+    meta: {
+      title: 'Components',
+      icon: 'component'
+    },
+    children: [
+      {
+        path: 'tinymce',
+        component: 'views/components-demo/tinymce',
+        name: 'TinymceDemo',
+        meta: { title: 'Tinymce' }
+      },
+      {
+        path: 'markdown',
+        component: 'views/components-demo/markdown',
+        name: 'MarkdownDemo',
+        meta: { title: 'Markdown' }
+      },
+      {
+        path: 'json-editor',
+        component: 'views/components-demo/json-editor',
+        name: 'JsonEditorDemo',
+        meta: { title: 'Json Editor' }
+      },
+      {
+        path: 'split-pane',
+        component: 'views/components-demo/split-pane',
+        name: 'SplitpaneDemo',
+        meta: { title: 'SplitPane' }
+      },
+      {
+        path: 'avatar-upload',
+        component: 'views/components-demo/avatar-upload',
+        name: 'AvatarUploadDemo',
+        meta: { title: 'Avatar Upload' }
+      },
+      {
+        path: 'dropzone',
+        component: 'views/components-demo/dropzone',
+        name: 'DropzoneDemo',
+        meta: { title: 'Dropzone' }
+      },
+      {
+        path: 'sticky',
+        component: 'views/components-demo/sticky',
+        name: 'StickyDemo',
+        meta: { title: 'Sticky' }
+      },
+      {
+        path: 'count-to',
+        component: 'views/components-demo/count-to',
+        name: 'CountToDemo',
+        meta: { title: 'Count To' }
+      },
+      {
+        path: 'mixin',
+        component: 'views/components-demo/mixin',
+        name: 'ComponentMixinDemo',
+        meta: { title: 'componentMixin' }
+      },
+      {
+        path: 'back-to-top',
+        component: 'views/components-demo/back-to-top',
+        name: 'BackToTopDemo',
+        meta: { title: 'Back To Top' }
+      },
+      {
+        path: 'drag-dialog',
+        component: 'views/components-demo/drag-dialog',
+        name: 'DragDialogDemo',
+        meta: { title: 'Drag Dialog' }
+      },
+      {
+        path: 'drag-select',
+        component: 'views/components-demo/drag-select',
+        name: 'DragSelectDemo',
+        meta: { title: 'Drag Select' }
+      },
+      {
+        path: 'dnd-list',
+        component: 'views/components-demo/dnd-list',
+        name: 'DndListDemo',
+        meta: { title: 'Dnd List' }
+      },
+      {
+        path: 'drag-kanban',
+        component: 'views/components-demo/drag-kanban',
+        name: 'DragKanbanDemo',
+        meta: { title: 'Drag Kanban' }
+      }
+    ]
+  },
+  {
+    path: '/charts',
+    component: 'layout/Layout',
+    redirect: 'noRedirect',
+    name: 'Charts',
+    meta: {
+      title: 'Charts',
+      icon: 'chart'
+    },
+    children: [
+      {
+        path: 'keyboard',
+        component: 'views/charts/keyboard',
+        name: 'KeyboardChart',
+        meta: { title: 'Keyboard Chart', noCache: true }
+      },
+      {
+        path: 'line',
+        component: 'views/charts/line',
+        name: 'LineChart',
+        meta: { title: 'Line Chart', noCache: true }
+      },
+      {
+        path: 'mixchart',
+        component: 'views/charts/mixChart',
+        name: 'MixChart',
+        meta: { title: 'Mix Chart', noCache: true }
+      }
+    ]
+  },
+  {
+    path: '/nested',
+    component: 'layout/Layout',
+    redirect: '/nested/menu1/menu1-1',
+    name: 'Nested',
+    meta: {
+      title: 'Nested',
+      icon: 'nested'
+    },
+    children: [
+      {
+        path: 'menu1',
+        component: 'views/nested/menu1/index',
+        name: 'Menu1',
+        meta: { title: 'Menu1' },
+        redirect: '/nested/menu1/menu1-1',
+        children: [
+          {
+            path: 'menu1-1',
+            component: 'views/nested/menu1/menu1-1',
+            name: 'Menu1-1',
+            meta: { title: 'Menu1-1' }
+          },
+          {
+            path: 'menu1-2',
+            component: 'views/nested/menu1/menu1-2',
+            name: 'Menu1-2',
+            redirect: '/nested/menu1/menu1-2/menu1-2-1',
+            meta: { title: 'Menu1-2' },
+            children: [
+              {
+                path: 'menu1-2-1',
+                component: 'views/nested/menu1/menu1-2/menu1-2-1',
+                name: 'Menu1-2-1',
+                meta: { title: 'Menu1-2-1' }
+              },
+              {
+                path: 'menu1-2-2',
+                component: 'views/nested/menu1/menu1-2/menu1-2-2',
+                name: 'Menu1-2-2',
+                meta: { title: 'Menu1-2-2' }
+              }
+            ]
+          },
+          {
+            path: 'menu1-3',
+            component: 'views/nested/menu1/menu1-3',
+            name: 'Menu1-3',
+            meta: { title: 'Menu1-3' }
+          }
+        ]
+      },
+      {
+        path: 'menu2',
+        name: 'Menu2',
+        component: 'views/nested/menu2/index',
+        meta: { title: 'Menu2' }
+      }
+    ]
+  },
+
+  {
+    path: '/example',
+    component: 'layout/Layout',
+    redirect: '/example/list',
+    name: 'Example',
+    meta: {
+      title: 'Example',
+      icon: 'example'
+    },
+    children: [
+      {
+        path: 'create',
+        component: 'views/example/create',
+        name: 'CreateArticle',
+        meta: { title: 'Create Article', icon: 'edit' }
+      },
+      {
+        path: 'edit/:id(\\d+)',
+        component: 'views/example/edit',
+        name: 'EditArticle',
+        meta: { title: 'Edit Article', noCache: true },
+        hidden: true
+      },
+      {
+        path: 'list',
+        component: 'views/example/list',
+        name: 'ArticleList',
+        meta: { title: 'Article List', icon: 'list' }
+      }
+    ]
+  },
+
+  {
+    path: '/tab',
+    component: 'layout/Layout',
+    children: [
+      {
+        path: 'index',
+        component: 'views/tab/index',
+        name: 'Tab',
+        meta: { title: 'Tab', icon: 'tab' }
+      }
+    ]
+  },
+
+  {
+    path: '/error',
+    component: 'layout/Layout',
+    redirect: 'noRedirect',
+    name: 'ErrorPages',
+    meta: {
+      title: 'Error Pages',
+      icon: '404'
+    },
+    children: [
+      {
+        path: '401',
+        component: 'views/error-page/401',
+        name: 'Page401',
+        meta: { title: 'Page 401', noCache: true }
+      },
+      {
+        path: '404',
+        component: 'views/error-page/404',
+        name: 'Page404',
+        meta: { title: 'Page 404', noCache: true }
+      }
+    ]
+  },
+
+  {
+    path: '/error-log',
+    component: 'layout/Layout',
+    redirect: 'noRedirect',
+    children: [
+      {
+        path: 'log',
+        component: 'views/error-log/index',
+        name: 'ErrorLog',
+        meta: { title: 'Error Log', icon: 'bug' }
+      }
+    ]
+  },
+
+  {
+    path: '/excel',
+    component: 'layout/Layout',
+    redirect: '/excel/export-excel',
+    name: 'Excel',
+    meta: {
+      title: 'Excel',
+      icon: 'excel'
+    },
+    children: [
+      {
+        path: 'export-excel',
+        component: 'views/excel/export-excel',
+        name: 'ExportExcel',
+        meta: { title: 'Export Excel' }
+      },
+      {
+        path: 'export-selected-excel',
+        component: 'views/excel/select-excel',
+        name: 'SelectExcel',
+        meta: { title: 'Select Excel' }
+      },
+      {
+        path: 'export-merge-header',
+        component: 'views/excel/merge-header',
+        name: 'MergeHeader',
+        meta: { title: 'Merge Header' }
+      },
+      {
+        path: 'upload-excel',
+        component: 'views/excel/upload-excel',
+        name: 'UploadExcel',
+        meta: { title: 'Upload Excel' }
+      }
+    ]
+  },
+
+  {
+    path: '/zip',
+    component: 'layout/Layout',
+    redirect: '/zip/download',
+    alwaysShow: true,
+    meta: { title: 'Zip', icon: 'zip' },
+    children: [
+      {
+        path: 'download',
+        component: 'views/zip/index',
+        name: 'ExportZip',
+        meta: { title: 'Export Zip' }
+      }
+    ]
+  },
+
+  {
+    path: '/pdf',
+    component: 'layout/Layout',
+    redirect: '/pdf/index',
+    children: [
+      {
+        path: 'index',
+        component: 'views/pdf/index',
+        name: 'PDF',
+        meta: { title: 'PDF', icon: 'pdf' }
+      }
+    ]
+  },
+  {
+    path: '/pdf/download',
+    component: 'views/pdf/download',
+    hidden: true
+  },
+
+  {
+    path: '/theme',
+    component: 'layout/Layout',
+    redirect: 'noRedirect',
+    children: [
+      {
+        path: 'index',
+        component: 'views/theme/index',
+        name: 'Theme',
+        meta: { title: 'Theme', icon: 'theme' }
+      }
+    ]
+  },
+
+  {
+    path: '/clipboard',
+    component: 'layout/Layout',
+    redirect: 'noRedirect',
+    children: [
+      {
+        path: 'index',
+        component: 'views/clipboard/index',
+        name: 'ClipboardDemo',
+        meta: { title: 'Clipboard Demo', icon: 'clipboard' }
+      }
+    ]
+  },
+
+  {
+    path: '/i18n',
+    component: 'layout/Layout',
+    children: [
+      {
+        path: 'index',
+        component: 'views/i18n-demo/index',
+        name: 'I18n',
+        meta: { title: 'I18n', icon: 'international' }
+      }
+    ]
+  },
+
+  {
+    path: 'external-link',
+    component: 'layout/Layout',
+    children: [
+      {
+        path: 'https://github.com/PanJiaChen/vue-element-admin',
+        meta: { title: 'External Link', icon: 'link' }
+      }
+    ]
+  },
+
+  { path: '*', redirect: '/404', hidden: true }
+]
--- a/mock/user.js
+++ b/mock/user.js
@@ -0,0 +1,84 @@
+
+const tokens = {
+  admin: {
+    token: 'admin-token'
+  },
+  editor: {
+    token: 'editor-token'
+  }
+}
+
+const users = {
+  'admin-token': {
+    roles: ['admin'],
+    introduction: 'I am a super administrator',
+    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+    name: 'Super Admin'
+  },
+  'editor-token': {
+    roles: ['editor'],
+    introduction: 'I am an editor',
+    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+    name: 'Normal Editor'
+  }
+}
+
+export default [
+  // user login
+  {
+    url: '/user/login',
+    type: 'post',
+    response: config => {
+      const { username } = config.body
+      const token = tokens[username]
+
+      // mock error
+      if (!token) {
+        return {
+          code: 60204,
+          message: 'Account and password are incorrect.'
+        }
+      }
+
+      return {
+        code: 20000,
+        data: token
+      }
+    }
+  },
+
+  // get user info
+  {
+    url: '/user/info\.*',
+    type: 'get',
+    response: config => {
+      const { token } = config.query
+      const info = users[token]
+
+      // mock error
+      if (!info) {
+        return {
+          code: 50008,
+          message: 'Login failed, unable to get user details.'
+        }
+      }
+
+      return {
+        code: 20000,
+        data: info
+      }
+    }
+  },
+
+  // user logout
+  {
+    url: '/user/logout',
+    type: 'post',
+    response: _ => {
+      return {
+        code: 20000,
+        data: 'success'
+      }
+    }
+  }
+]
--- a/package.json
+++ b/package.json
@@ -1,17 +1,24 @@
 {
  "name": "vue-element-admin",
-  "version": "3.11.0",
-  "description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
+  "version": "4.1.0",
+  "description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",
  "author": "Pan <panfree23@gmail.com>",
  "license": "MIT",
  "scripts": {
-    "dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
-    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
-    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
+    "dev": "vue-cli-service serve",
+    "build:prod": "vue-cli-service build",
+    "build:stage": "vue-cli-service build --mode staging",
+    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
-    "test": "npm run lint",
-    "precommit": "lint-staged",
-    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
+    "test:unit": "jest --clearCache && vue-cli-service test:unit",
+    "test:ci": "npm run lint && npm run test:unit",
+    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
+    "new": "plop"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
@@ -21,10 +28,12 @@
  },
  "keywords": [
    "vue",
-    "element-ui",
    "admin",
-    "management-system",
-    "admin-template"
+    "dashboard",
+    "element-ui",
+    "boilerplate",
+    "admin-template",
+    "management-system"
  ],
  "repository": {
    "type": "git",
@@ -35,93 +44,65 @@
  },
  "dependencies": {
    "axios": "0.18.0",
-    "clipboard": "1.7.1",
-    "codemirror": "5.39.2",
-    "driver.js": "0.8.1",
-    "dropzone": "5.2.0",
-    "echarts": "4.1.0",
-    "element-ui": "2.4.11",
-    "file-saver": "1.3.8",
-    "fuse.js": "3.4.2",
+    "clipboard": "2.0.4",
+    "codemirror": "5.45.0",
+    "driver.js": "0.9.5",
+    "dropzone": "5.5.1",
+    "echarts": "4.2.1",
+    "element-ui": "2.7.0",
+    "file-saver": "2.0.1",
+    "fuse.js": "3.4.4",
    "js-cookie": "2.2.0",
    "jsonlint": "1.6.3",
-    "jszip": "3.1.5",
-    "mockjs": "1.0.1-beta3",
+    "jszip": "3.2.1",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
-    "screenfull": "4.0.0",
-    "showdown": "1.8.6",
-    "sortablejs": "1.7.0",
-    "tui-editor": "1.2.7",
-    "vue": "2.5.17",
+    "path-to-regexp": "2.4.0",
+    "screenfull": "4.2.0",
+    "showdown": "1.9.0",
+    "sortablejs": "1.8.4",
+    "tui-editor": "1.3.3",
+    "vue": "2.6.10",
    "vue-count-to": "1.0.13",
-    "vue-i18n": "7.3.2",
    "vue-router": "3.0.2",
-    "vue-splitpane": "1.0.2",
-    "vuedraggable": "^2.16.0",
-    "vuex": "3.0.1",
-    "xlsx": "^0.11.16"
+    "vue-splitpane": "1.0.4",
+    "vuedraggable": "2.20.0",
+    "vuex": "3.1.0",
+    "xlsx": "0.14.1"
  },
  "devDependencies": {
-    "autoprefixer": "8.5.0",
-    "babel-core": "6.26.3",
-    "babel-eslint": "8.2.6",
-    "babel-helper-vue-jsx-merge-props": "2.0.3",
-    "babel-loader": "7.1.5",
-    "babel-plugin-dynamic-import-node": "2.0.0",
-    "babel-plugin-syntax-jsx": "6.18.0",
-    "babel-plugin-transform-runtime": "6.23.0",
-    "babel-plugin-transform-vue-jsx": "3.7.0",
-    "babel-preset-env": "1.7.0",
-    "babel-preset-stage-2": "6.24.1",
-    "chalk": "2.4.1",
-    "compression-webpack-plugin": "2.0.0",
+    "@babel/core": "7.0.0",
+    "@babel/register": "7.0.0",
+    "@vue/cli-plugin-babel": "3.5.3",
+    "@vue/cli-plugin-eslint": "3.5.1",
+    "@vue/cli-plugin-unit-jest": "3.5.3",
+    "@vue/cli-service": "3.5.3",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "10.0.1",
+    "babel-jest": "23.6.0",
+    "chalk": "2.4.2",
+    "chokidar": "2.1.5",
    "connect": "3.6.6",
-    "copy-webpack-plugin": "4.5.2",
-    "cross-env": "5.2.0",
-    "css-loader": "1.0.0",
-    "eslint": "5.15.2",
-    "eslint-friendly-formatter": "4.0.1",
-    "eslint-loader": "2.1.2",
+    "eslint": "5.15.3",
    "eslint-plugin-vue": "5.2.2",
-    "file-loader": "1.1.11",
-    "friendly-errors-webpack-plugin": "1.7.0",
-    "hash-sum": "1.0.2",
-    "html-webpack-plugin": "4.0.0-alpha",
-    "husky": "0.14.3",
-    "lint-staged": "7.2.2",
-    "mini-css-extract-plugin": "0.4.1",
-    "node-notifier": "5.2.1",
-    "node-sass": "^4.7.2",
-    "optimize-css-assets-webpack-plugin": "5.0.0",
-    "ora": "3.0.0",
-    "path-to-regexp": "2.4.0",
-    "portfinder": "1.0.13",
-    "postcss-import": "11.1.0",
-    "postcss-loader": "2.1.6",
-    "postcss-url": "7.3.2",
-    "rimraf": "2.6.2",
-    "sass-loader": "7.0.3",
-    "script-ext-html-webpack-plugin": "2.0.1",
+    "html-webpack-plugin": "3.2.0",
+    "husky": "1.3.1",
+    "lint-staged": "8.1.5",
+    "mockjs": "1.0.1-beta3",
+    "node-sass": "^4.9.0",
+    "plop": "2.3.0",
+    "runjs": "^4.3.2",
+    "sass-loader": "^7.1.0",
+    "script-ext-html-webpack-plugin": "2.1.3",
    "script-loader": "0.7.2",
-    "semver": "5.5.0",
-    "serve-static": "1.13.2",
-    "shelljs": "0.8.2",
-    "svg-sprite-loader": "3.8.0",
-    "svgo": "1.0.5",
-    "uglifyjs-webpack-plugin": "1.2.7",
-    "url-loader": "1.0.1",
-    "vue-loader": "15.3.0",
-    "vue-style-loader": "4.1.2",
-    "vue-template-compiler": "2.5.17",
-    "webpack": "4.16.5",
-    "webpack-bundle-analyzer": "2.13.1",
-    "webpack-cli": "3.1.0",
-    "webpack-dev-server": "3.1.14",
-    "webpack-merge": "4.1.4"
+    "serve-static": "^1.13.2",
+    "svg-sprite-loader": "4.1.3",
+    "svgo": "1.2.0",
+    "vue-template-compiler": "2.6.10"
  },
  "engines": {
-    "node": ">= 6.0.0",
+    "node": ">=8.9",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
--- a/plop-templates/component/index.hbs
+++ b/plop-templates/component/index.hbs
@@ -0,0 +1,26 @@
+{{#if template}}
+<template>
+  <div />
+</template>
+{{/if}}
+
+{{#if script}}
+<script>
+export default {
+  name: '{{ properCase name }}',
+  props: {},
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {}
+}
+</script>
+{{/if}}
+
+{{#if style}}
+<style lang="scss" scoped>
+
+</style>
+{{/if}}
--- a/plop-templates/component/prompt.js
+++ b/plop-templates/component/prompt.js
@@ -0,0 +1,55 @@
+const { notEmpty } = require('../utils.js')
+
+module.exports = {
+  description: 'generate vue component',
+  prompts: [{
+    type: 'input',
+    name: 'name',
+    message: 'component name please',
+    validate: notEmpty('name')
+  },
+  {
+    type: 'checkbox',
+    name: 'blocks',
+    message: 'Blocks:',
+    choices: [{
+      name: '<template>',
+      value: 'template',
+      checked: true
+    },
+    {
+      name: '<script>',
+      value: 'script',
+      checked: true
+    },
+    {
+      name: 'style',
+      value: 'style',
+      checked: true
+    }
+    ],
+    validate(value) {
+      if (value.indexOf('script') === -1 && value.indexOf('template') === -1) {
+        return 'Components require at least a <script> or <template> tag.'
+      }
+      return true
+    }
+  }
+  ],
+  actions: data => {
+    const name = '{{properCase name}}'
+    const actions = [{
+      type: 'add',
+      path: `src/components/${name}/index.vue`,
+      templateFile: 'plop-templates/component/index.hbs',
+      data: {
+        name: name,
+        template: data.blocks.includes('template'),
+        script: data.blocks.includes('script'),
+        style: data.blocks.includes('style')
+      }
+    }]
+
+    return actions
+  }
+}
--- a/plop-templates/utils.js
+++ b/plop-templates/utils.js
@@ -0,0 +1,9 @@
+exports.notEmpty = name => {
+  return v => {
+    if (!v || v.trim === '') {
+      return `${name} is required`
+    } else {
+      return true
+    }
+  }
+}
--- a/plop-templates/view/index.hbs
+++ b/plop-templates/view/index.hbs
@@ -0,0 +1,26 @@
+{{#if template}}
+<template>
+  <div />
+</template>
+{{/if}}
+
+{{#if script}}
+<script>
+export default {
+  name: '{{ properCase name }}',
+  props: {},
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {}
+}
+</script>
+{{/if}}
+
+{{#if style}}
+<style lang="scss" scoped>
+
+</style>
+{{/if}}
--- a/plop-templates/view/prompt.js
+++ b/plop-templates/view/prompt.js
@@ -0,0 +1,55 @@
+const { notEmpty } = require('../utils.js')
+
+module.exports = {
+  description: 'generate a view',
+  prompts: [{
+    type: 'input',
+    name: 'name',
+    message: 'view name please',
+    validate: notEmpty('name')
+  },
+  {
+    type: 'checkbox',
+    name: 'blocks',
+    message: 'Blocks:',
+    choices: [{
+      name: '<template>',
+      value: 'template',
+      checked: true
+    },
+    {
+      name: '<script>',
+      value: 'script',
+      checked: true
+    },
+    {
+      name: 'style',
+      value: 'style',
+      checked: true
+    }
+    ],
+    validate(value) {
+      if (value.indexOf('script') === -1 && value.indexOf('template') === -1) {
+        return 'View require at least a <script> or <template> tag.'
+      }
+      return true
+    }
+  }
+  ],
+  actions: data => {
+    const name = '{{name}}'
+    const actions = [{
+      type: 'add',
+      path: `src/views/${name}/index.vue`,
+      templateFile: 'plop-templates/view/index.hbs',
+      data: {
+        name: name,
+        template: data.blocks.includes('template'),
+        script: data.blocks.includes('script'),
+        style: data.blocks.includes('style')
+      }
+    }]
+
+    return actions
+  }
+}
--- a/plopfile.js
+++ b/plopfile.js
@@ -0,0 +1,7 @@
+const viewGenerator = require('./plop-templates/view/prompt')
+const componentGenerator = require('./plop-templates/component/prompt')
+
+module.exports = function(plop) {
+  plop.setGenerator('view', viewGenerator)
+  plop.setGenerator('component', componentGenerator)
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -5,10 +5,14 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <title>vue-element-admin</title>
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= webpackConfig.name %></title>
  </head>
  <body>
-    <script src=<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js></script>
+    <!-- import cdn js -->
+    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
+      <script src="<%=js%>"></script>
+    <% } %>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
--- a/src/api/remote-search.js
+++ b/src/api/remote-search.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function searchUser(name) {
+  return request({
+    url: '/search/user',
+    method: 'get',
+    params: { name }
+  })
+}
+
+export function transactionList(query) {
+  return request({
+    url: '/transaction/list',
+    method: 'get',
+    params: query
+  })
+}
--- a/src/api/remoteSearch.js
+++ b/src/api/remoteSearch.js
@@ -1,9 +0,0 @@
-import request from '@/utils/request'
-
-export function userSearch(name) {
-  return request({
-    url: '/search/user',
-    method: 'get',
-    params: { name }
-  })
-}
--- a/src/api/role.js
+++ b/src/api/role.js
@@ -14,25 +14,25 @@ export function getRoles() {
  })
 }

-export function deleteRole(id) {
-  return request({
-    url: `/roles/${id}`,
-    method: 'delete'
-  })
-}
-
 export function addRole(data) {
  return request({
-    url: '/roles',
+    url: '/role',
    method: 'post',
    data
  })
 }

-export function updateRole(key, data) {
+export function updateRole(id, data) {
  return request({
-    url: `/roles/${key}`,
+    url: `/role/${id}`,
    method: 'put',
    data
  })
 }
+
+export function deleteRole(id) {
+  return request({
+    url: `/role/${id}`,
+    method: 'delete'
+  })
+}
--- a/src/api/transaction.js
+++ b/src/api/transaction.js
@@ -1,9 +0,0 @@
-import request from '@/utils/request'
-
-export function fetchList(query) {
-  return request({
-    url: '/transaction/list',
-    method: 'get',
-    params: query
-  })
-}
--- a/src/api/login.js
+++ b/src/api/login.js
@@ -1,25 +1,14 @@
 import request from '@/utils/request'

-export function loginByUsername(username, password) {
-  const data = {
-    username,
-    password
-  }
+export function login(data) {
  return request({
-    url: '/login/login',
+    url: '/user/login',
    method: 'post',
    data
  })
 }

-export function logout() {
-  return request({
-    url: '/login/logout',
-    method: 'post'
-  })
-}
-
-export function getUserInfo(token) {
+export function getInfo(token) {
  return request({
    url: '/user/info',
    method: 'get',
@@ -27,3 +16,9 @@ export function getUserInfo(token) {
  })
 }

+export function logout() {
+  return request({
+    url: '/user/logout',
+    method: 'post'
+  })
+}
--- a/src/components/BackToTop/index.vue
+++ b/src/components/BackToTop/index.vue
@@ -1,12 +1,7 @@
 <template>
  <transition :name="transitionName">
    <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
-      <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px; width: 16px;">
-        <title>回到顶部</title>
-        <g>
-          <path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd" />
-        </g>
-      </svg>
+      <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height:16px;width:16px"><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg>
    </div>
  </transition>
 </template>
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -2,17 +2,14 @@
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">
-          {{ generateTitle(item.meta.title) }}
-        </span>
-        <a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a>
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
+        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
 </template>

 <script>
-import { generateTitle } from '@/utils/i18n'
 import pathToRegexp from 'path-to-regexp'

 export default {
@@ -30,17 +27,24 @@ export default {
    this.getBreadcrumb()
  },
  methods: {
-    generateTitle,
    getBreadcrumb() {
-      let matched = this.$route.matched.filter(item => item.name)
-
+      // only show routes with meta.title
+      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      const first = matched[0]
-      if (first && first.name.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
-        matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
+
+      if (!this.isDashboard(first)) {
+        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
      }

      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    },
+    isDashboard(route) {
+      const name = route && route.name
+      if (!name) {
+        return false
+      }
+      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route
@@ -59,12 +63,13 @@ export default {
 }
 </script>

-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;
+
  .no-redirect {
    color: #97a8be;
    cursor: text;
--- a/src/components/Charts/Keyboard.vue
+++ b/src/components/Charts/Keyboard.vue
@@ -0,0 +1,155 @@
+<template>
+  <div :id="id" :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      const xAxisData = []
+      const data = []
+      const data2 = []
+      for (let i = 0; i < 50; i++) {
+        xAxisData.push(i)
+        data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
+        data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
+      }
+      this.chart.setOption({
+        backgroundColor: '#08263a',
+        grid: {
+          left: '5%',
+          right: '5%'
+        },
+        xAxis: [{
+          show: false,
+          data: xAxisData
+        }, {
+          show: false,
+          data: xAxisData
+        }],
+        visualMap: {
+          show: false,
+          min: 0,
+          max: 50,
+          dimension: 0,
+          inRange: {
+            color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
+          }
+        },
+        yAxis: {
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#4a657a'
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#08263f'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: [{
+          name: 'back',
+          type: 'bar',
+          data: data2,
+          z: 1,
+          itemStyle: {
+            normal: {
+              opacity: 0.4,
+              barBorderRadius: 5,
+              shadowBlur: 3,
+              shadowColor: '#111'
+            }
+          }
+        }, {
+          name: 'Simulate Shadow',
+          type: 'line',
+          data,
+          z: 2,
+          showSymbol: false,
+          animationDelay: 0,
+          animationEasing: 'linear',
+          animationDuration: 1200,
+          lineStyle: {
+            normal: {
+              color: 'transparent'
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: '#08263a',
+              shadowBlur: 50,
+              shadowColor: '#000'
+            }
+          }
+        }, {
+          name: 'front',
+          type: 'bar',
+          data,
+          xAxisIndex: 1,
+          z: 3,
+          itemStyle: {
+            normal: {
+              barBorderRadius: 5
+            }
+          }
+        }],
+        animationEasing: 'elasticOut',
+        animationEasingUpdate: 'elasticOut',
+        animationDelay(idx) {
+          return idx * 20
+        },
+        animationDelayUpdate(idx) {
+          return idx * 20
+        }
+      })
+    }
+  }
+}
+</script>
--- a/src/components/Charts/LineMarker.vue
+++ b/src/components/Charts/LineMarker.vue
--- a/src/components/Charts/MixChart.vue
+++ b/src/components/Charts/MixChart.vue
--- a/src/components/Charts/keyboard.vue
+++ b/src/components/Charts/keyboard.vue
@@ -1,156 +0,0 @@
-<template>
-  <div :id="id" :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    id: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '200px'
-    },
-    height: {
-      type: String,
-      default: '200px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.initChart()
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(document.getElementById(this.id))
-
-      const xAxisData = []
-      const data = []
-      const data2 = []
-      for (let i = 0; i < 50; i++) {
-        xAxisData.push(i)
-        data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
-        data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
-      }
-      this.chart.setOption(
-        {
-          backgroundColor: '#08263a',
-          grid: {
-            left: '5%',
-            right: '5%'
-          },
-          xAxis: [{
-            show: false,
-            data: xAxisData
-          }, {
-            show: false,
-            data: xAxisData
-          }],
-          visualMap: {
-            show: false,
-            min: 0,
-            max: 50,
-            dimension: 0,
-            inRange: {
-              color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
-            }
-          },
-          yAxis: {
-            axisLine: {
-              show: false
-            },
-            axisLabel: {
-              textStyle: {
-                color: '#4a657a'
-              }
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#08263f'
-              }
-            },
-            axisTick: {
-              show: false
-            }
-          },
-          series: [{
-            name: 'back',
-            type: 'bar',
-            data: data2,
-            z: 1,
-            itemStyle: {
-              normal: {
-                opacity: 0.4,
-                barBorderRadius: 5,
-                shadowBlur: 3,
-                shadowColor: '#111'
-              }
-            }
-          }, {
-            name: 'Simulate Shadow',
-            type: 'line',
-            data,
-            z: 2,
-            showSymbol: false,
-            animationDelay: 0,
-            animationEasing: 'linear',
-            animationDuration: 1200,
-            lineStyle: {
-              normal: {
-                color: 'transparent'
-              }
-            },
-            areaStyle: {
-              normal: {
-                color: '#08263a',
-                shadowBlur: 50,
-                shadowColor: '#000'
-              }
-            }
-          }, {
-            name: 'front',
-            type: 'bar',
-            data,
-            xAxisIndex: 1,
-            z: 3,
-            itemStyle: {
-              normal: {
-                barBorderRadius: 5
-              }
-            }
-          }],
-          animationEasing: 'elasticOut',
-          animationEasingUpdate: 'elasticOut',
-          animationDelay(idx) {
-            return idx * 20
-          },
-          animationDelayUpdate(idx) {
-            return idx * 20
-          }
-        })
-    }
-  }
-}
-</script>
--- a/src/components/Charts/mixins/resize.js
+++ b/src/components/Charts/mixins/resize.js
@@ -3,7 +3,7 @@ import { debounce } from '@/utils'
 export default {
  data() {
    return {
-      sidebarElm: null
+      $_sidebarElm: null
    }
  },
  mounted() {
@@ -14,16 +14,18 @@ export default {
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)

-    this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-    this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
+    this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+    this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.__resizeHandler)

-    this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)
+    this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
  },
  methods: {
-    sidebarResizeHandler(e) {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.__resizeHandler()
      }
--- a/src/components/DndList/index.vue
+++ b/src/components/DndList/index.vue
@@ -2,9 +2,11 @@
  <div class="dndList">
    <div :style="{width:width1}" class="dndList-list">
      <h3>{{ list1Title }}</h3>
-      <draggable :list="list1" :options="{group:'article'}" class="dragArea">
+      <draggable :set-data="setData" :list="list1" group="article" class="dragArea">
        <div v-for="element in list1" :key="element.id" class="list-complete-item">
-          <div class="list-complete-item-handle">{{ element.id }}[{{ element.author }}] {{ element.title }}</div>
+          <div class="list-complete-item-handle">
+            {{ element.id }}[{{ element.author }}] {{ element.title }}
+          </div>
          <div style="position:absolute;right:0px;">
            <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
              <i style="color:#ff4949" class="el-icon-delete" />
@@ -15,9 +17,11 @@
    </div>
    <div :style="{width:width2}" class="dndList-list">
      <h3>{{ list2Title }}</h3>
-      <draggable :list="list2" :options="{group:'article'}" class="dragArea">
+      <draggable :list="list2" group="article" class="dragArea">
        <div v-for="element in list2" :key="element.id" class="list-complete-item">
-          <div class="list-complete-item-handle2" @click="pushEle(element)">{{ element.id }} [{{ element.author }}] {{ element.title }}</div>
+          <div class="list-complete-item-handle2" @click="pushEle(element)">
+            {{ element.id }} [{{ element.author }}] {{ element.title }}
+          </div>
        </div>
      </draggable>
    </div>
@@ -90,12 +94,17 @@ export default {
      if (this.isNotInList1(ele)) {
        this.list1.push(ele)
      }
+    },
+    setData(dataTransfer) {
+      // to avoid Firefox bug
+      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
+      dataTransfer.setData('Text', '')
    }
  }
 }
 </script>

-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .dndList {
  background: #fff;
  padding-bottom: 40px;
--- a/src/components/Dropzone/index.vue
+++ b/src/components/Dropzone/index.vue
@@ -237,7 +237,7 @@ export default {

    .dropzone .dz-preview:hover .dz-image img {
        transform: none;
-        -webkit-filter: none;
+        filter: none;
        width: 100%;
        height: 100%;
    }
--- a/src/components/ErrorLog/index.vue
+++ b/src/components/ErrorLog/index.vue
@@ -6,23 +6,29 @@
      </el-button>
    </el-badge>

-    <el-dialog :visible.sync="dialogTableVisible" title="Error Log" width="80%">
+    <el-dialog :visible.sync="dialogTableVisible" title="Error Log" width="80%" append-to-body>
      <el-table :data="errorLogs" border>
        <el-table-column label="Message">
-          <template slot-scope="scope">
+          <template slot-scope="{row}">
            <div>
              <span class="message-title">Msg:</span>
-              <el-tag type="danger">{{ scope.row.err.message }}</el-tag>
+              <el-tag type="danger">
+                {{ row.err.message }}
+              </el-tag>
            </div>
            <br>
            <div>
              <span class="message-title" style="padding-right: 10px;">Info: </span>
-              <el-tag type="warning">{{ scope.row.vm.$vnode.tag }} error in {{ scope.row.info }}</el-tag>
+              <el-tag type="warning">
+                {{ row.vm.$vnode.tag }} error in {{ row.info }}
+              </el-tag>
            </div>
            <br>
            <div>
              <span class="message-title" style="padding-right: 16px;">Url: </span>
-              <el-tag type="success">{{ scope.row.url }}</el-tag>
+              <el-tag type="success">
+                {{ row.url }}
+              </el-tag>
            </div>
          </template>
        </el-table-column>
@@ -33,7 +39,6 @@
        </el-table-column>
      </el-table>
    </el-dialog>
-
  </div>
 </template>

--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -20,10 +20,11 @@ export default {
    isActive: {
      type: Boolean,
      default: false
+    }
  },
-    toggleClick: {
-      type: Function,
-      default: null
+  methods: {
+    toggleClick() {
+      this.$emit('toggleClick')
    }
  }
 }
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@@ -18,9 +18,10 @@
 </template>

 <script>
+// fuse is a lightweight fuzzy-search module
+// make search results more in line with expectations
 import Fuse from 'fuse.js'
 import path from 'path'
-import i18n from '@/lang'

 export default {
  name: 'HeaderSearch',
@@ -36,15 +37,9 @@ export default {
  computed: {
    routes() {
      return this.$store.getters.permission_routes
-    },
-    lang() {
-      return this.$store.getters.language
    }
  },
  watch: {
-    lang() {
-      this.searchPool = this.generateRoutes(this.routes)
-    },
    routes() {
      this.searchPool = this.generateRoutes(this.routes)
    },
@@ -114,12 +109,9 @@ export default {
        }

        if (router.meta && router.meta.title) {
-          // generate internationalized title
-          const i18ntitle = i18n.t(`route.${router.meta.title}`)
+          data.title = [...data.title, router.meta.title]

-          data.title = [...data.title, i18ntitle]
-
-          if (router.redirect !== 'noredirect') {
+          if (router.redirect !== 'noRedirect') {
            // only push the routes with title
            // special case: need to exclude parent router without redirect
            res.push(data)
--- a/src/components/JsonEditor/index.vue
+++ b/src/components/JsonEditor/index.vue
@@ -25,8 +25,8 @@ export default {
  },
  watch: {
    value(value) {
-      const editor_value = this.jsonEditor.getValue()
-      if (value !== editor_value) {
+      const editorValue = this.jsonEditor.getValue()
+      if (value !== editorValue) {
        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
      }
    }
--- a/src/components/Kanban/index.vue
+++ b/src/components/Kanban/index.vue
@@ -5,8 +5,9 @@
    </div>
    <draggable
      :list="list"
-      :options="options"
+      v-bind="$attrs"
      class="board-column-content"
+      :set-data="setData"
    >
      <div v-for="element in list" :key="element.id" class="board-item">
        {{ element.name }} {{ element.id }}
@@ -14,6 +15,7 @@
    </draggable>
  </div>
 </template>
+
 <script>
 import draggable from 'vuedraggable'

@@ -39,6 +41,13 @@ export default {
        return []
      }
    }
+  },
+  methods: {
+    setData(dataTransfer) {
+      // to avoid Firefox bug
+      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
+      dataTransfer.setData('Text', '')
+    }
  }
 }
 </script>
--- a/src/components/LangSelect/index.vue
+++ b/src/components/LangSelect/index.vue
@@ -1,38 +0,0 @@
-<template>
-  <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
-    <div>
-      <svg-icon class-name="international-icon" icon-class="language" />
-    </div>
-    <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item :disabled="language==='zh'" command="zh">
-        中文
-      </el-dropdown-item>
-      <el-dropdown-item :disabled="language==='en'" command="en">
-        English
-      </el-dropdown-item>
-      <el-dropdown-item :disabled="language==='es'" command="es">
-        Español
-      </el-dropdown-item>
-    </el-dropdown-menu>
-  </el-dropdown>
-</template>
-
-<script>
-export default {
-  computed: {
-    language() {
-      return this.$store.getters.language
-    }
-  },
-  methods: {
-    handleSetLanguage(lang) {
-      this.$i18n.locale = lang
-      this.$store.dispatch('setLanguage', lang)
-      this.$message({
-        message: 'Switch Language Success',
-        type: 'success'
-      })
-    }
-  }
-}
-</script>
--- a/src/components/MDinput/index.vue
+++ b/src/components/MDinput/index.vue
@@ -197,7 +197,7 @@ export default {
 }
 </script>

-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
  // Fonts:
  $font-size-base: 16px;
  $font-size-small: 18px;
--- a/src/components/MarkdownEditor/default-options.js
+++ b/src/components/MarkdownEditor/default-options.js
--- a/src/components/MarkdownEditor/index.vue
+++ b/src/components/MarkdownEditor/index.vue
@@ -9,7 +9,7 @@ import 'tui-editor/dist/tui-editor.css' // editor ui
 import 'tui-editor/dist/tui-editor-contents.css' // editor content

 import Editor from 'tui-editor'
-import defaultOptions from './defaultOptions'
+import defaultOptions from './default-options'

 export default {
  name: 'MarddownEditor',
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -15,7 +15,7 @@
 </template>

 <script>
-import { scrollTo } from '@/utils/scrollTo'
+import { scrollTo } from '@/utils/scroll-to'

 export default {
  name: 'Pagination',
--- a/src/components/RightPanel/index.vue
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  width: 0;
+  height: 0;
+  top: 0;
+  left: 0;
+  position: fixed;
+  z-index: -1;
+}
+
+.rightPanel {
+  background: #fff;
+  z-index: 3000;
+  position: fixed;
+  height: 100vh;
+  width: 100%;
+  max-width: 260px;
+  top: 0px;
+  left: 0px;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  z-index: 40000;
+  left: auto;
+  right: 0px;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  position: absolute;
+  left: -48px;
+  border-radius: 6px 0 0 6px !important;
+  width: 48px;
+  height: 48px;
+  pointer-events: auto;
+  z-index: 0;
+  cursor: pointer;
+  pointer-events: auto;
+  font-size: 24px;
+  text-align: center;
+  color: #fff;
+  line-height: 48px;
+
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -17,6 +17,9 @@ export default {
  mounted() {
    this.init()
  },
+  beforeDestroy() {
+    this.destroy()
+  },
  methods: {
    click() {
      if (!screenfull.enabled) {
@@ -28,11 +31,17 @@ export default {
      }
      screenfull.toggle()
    },
+    change() {
+      this.isFullscreen = screenfull.isFullscreen
+    },
    init() {
      if (screenfull.enabled) {
-        screenfull.on('change', () => {
-          this.isFullscreen = screenfull.isFullscreen
-        })
+        screenfull.on('change', this.change)
+      }
+    },
+    destroy() {
+      if (screenfull.enabled) {
+        screenfull.off('change', this.change)
      }
    }
  }
--- a/src/components/Share/DropdownMenu.vue
+++ b/src/components/Share/DropdownMenu.vue
@@ -37,7 +37,7 @@ export default {
 }
 </script>

-<style rel="stylesheet/scss" lang="scss" >
+<style lang="scss" >
 $n: 8; //和items.length 相同
 $t: .1s;
 .share-dropdown-menu {
--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@@ -5,7 +5,8 @@
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
-        {{ item.label }}
+        {{
+          item.label }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
@@ -31,7 +32,7 @@ export default {
  methods: {
    handleSetSize(size) {
      this.$ELEMENT.size = size
-      this.$store.dispatch('setSize', size)
+      this.$store.dispatch('app/setSize', size)
      this.refreshView()
      this.$message({
        message: 'Switch Size Success',
@@ -40,7 +41,7 @@ export default {
    },
    refreshView() {
      // In order to make the cached page re-rendered
-      this.$store.dispatch('delAllCachedViews', this.$route)
+      this.$store.dispatch('tagsView/delAllCachedViews', this.$route)

      const { fullPath } = this.$route

--- a/src/components/Sticky/index.vue
+++ b/src/components/Sticky/index.vue
@@ -40,14 +40,14 @@ export default {
  mounted() {
    this.height = this.$el.getBoundingClientRect().height
    window.addEventListener('scroll', this.handleScroll)
-    window.addEventListener('resize', this.handleReize)
+    window.addEventListener('resize', this.handleResize)
  },
  activated() {
    this.handleScroll()
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
-    window.removeEventListener('resize', this.handleReize)
+    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    sticky() {
@@ -81,7 +81,7 @@ export default {
      }
      this.handleReset()
    },
-    handleReize() {
+    handleResize() {
      if (this.isSticky) {
        this.width = this.$el.getBoundingClientRect().width + 'px'
      }
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -1,14 +1,13 @@
 <template>
  <el-color-picker
    v-model="theme"
-    :predefine="['#409EFF', '#11a983', '#13c2c2', '#6959CD', '#f5222d', '#eb2f96', '#DB7093', '#e6a23c', '#8B8989', '#212121']"
+    :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
    class="theme-picker"
    popper-class="theme-picker-dropdown"
  />
 </template>

 <script>
-
 const version = require('element-ui/package.json').version // element-ui version from node_modules
 const ORIGINAL_THEME = '#409EFF' // default color

@@ -16,16 +15,36 @@ export default {
  data() {
    return {
      chalk: '', // content of theme-chalk css
-      theme: ORIGINAL_THEME
+      theme: ''
+    }
+  },
+  computed: {
+    defaultTheme() {
+      return this.$store.state.settings.theme
    }
  },
  watch: {
-    theme(val) {
-      const oldVal = this.theme
+    defaultTheme: {
+      handler: function(val, oldVal) {
+        this.theme = val
+      },
+      immediate: true
+    },
+    async theme(val) {
+      const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
      if (typeof val !== 'string') return
      const themeCluster = this.getThemeCluster(val.replace('#', ''))
      const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
      console.log(themeCluster, originalCluster)
+
+      const $message = this.$message({
+        message: '  Compiling the theme',
+        customClass: 'theme-message',
+        type: 'success',
+        duration: 0,
+        iconClass: 'el-icon-loading'
+      })
+
      const getHandler = (variable, id) => {
        return () => {
          const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
@@ -41,15 +60,15 @@ export default {
        }
      }

-      const chalkHandler = getHandler('chalk', 'chalk-style')
-
      if (!this.chalk) {
        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
-        this.getCSSString(url, chalkHandler, 'chalk')
-      } else {
-        chalkHandler()
+        await this.getCSSString(url, 'chalk')
      }

+      const chalkHandler = getHandler('chalk', 'chalk-style')
+
+      chalkHandler()
+
      const styles = [].slice.call(document.querySelectorAll('style'))
        .filter(style => {
          const text = style.innerText
@@ -60,39 +79,34 @@ export default {
        if (typeof innerText !== 'string') return
        style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
      })
-      this.$message({
-        message: '换肤成功',
-        type: 'success'
-      })
+
+      this.$emit('change', val)
+
+      $message.close()
    }
  },

  methods: {
    updateStyle(style, oldCluster, newCluster) {
-      const colorOverrides = [] // only capture color overides
+      let newStyle = style
      oldCluster.forEach((color, index) => {
-        const value = newCluster[index]
-        const color_plain = color.replace(/([()])/g, '\\$1')
-        const repl = new RegExp(`(^|})([^{]+{[^{}]+)${color_plain}\\b([^}]*)(?=})`, 'gi')
-        const nestRepl = new RegExp(color_plain, 'ig') // for greed matching before the 'color'
-        let v
-        while ((v = repl.exec(style))) {
-          colorOverrides.push(v[2].replace(nestRepl, value) + value + v[3] + '}') // '}' not captured in the regexp repl to reserve it as locator-boundary
-        }
+        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
      })
-      return colorOverrides.join('')
+      return newStyle
    },

-    getCSSString(url, callback, variable) {
+    getCSSString(url, variable) {
+      return new Promise(resolve => {
        const xhr = new XMLHttpRequest()
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4 && xhr.status === 200) {
            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
-          callback()
+            resolve()
          }
        }
        xhr.open('GET', url)
        xhr.send()
+      })
    },

    getThemeCluster(theme) {
@@ -144,8 +158,12 @@ export default {
 </script>

 <style>
+.theme-message,
+.theme-picker-dropdown {
+  z-index: 99999 !important;
+}
+
 .theme-picker .el-color-picker__trigger {
-  margin-top: 12px;
  height: 26px !important;
  width: 26px !important;
  padding: 2px;
--- a/src/components/Tinymce/components/EditorImage.vue
+++ b/src/components/Tinymce/components/EditorImage.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="upload-container">
    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
-      上传图片
+      upload
    </el-button>
    <el-dialog :visible.sync="dialogVisible">
      <el-upload
@@ -15,10 +15,16 @@
        action="https://httpbin.org/post"
        list-type="picture-card"
      >
-        <el-button size="small" type="primary">点击上传</el-button>
+        <el-button size="small" type="primary">
+          Click upload
+        </el-button>
      </el-upload>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+      <el-button @click="dialogVisible = false">
+        Cancel
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        Confirm
+      </el-button>
    </el-dialog>
  </div>
 </template>
@@ -48,7 +54,7 @@ export default {
    handleSubmit() {
      const arr = Object.keys(this.listObj).map(v => this.listObj[v])
      if (!this.checkAllSuccess()) {
-        this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
+        this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
        return
      }
      this.$emit('successCBK', arr)
@@ -95,7 +101,7 @@ export default {
 }
 </script>

-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .editor-slide-upload {
  margin-bottom: 20px;
  /deep/ .el-upload--picture-card {
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container">
+  <div :class="{fullscreen:fullscreen}" class="tinymce-container" :style="{width:containerWidth}">
    <textarea :id="tinymceId" class="tinymce-textarea" />
    <div class="editor-custom-btn-container">
      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
@@ -8,7 +8,11 @@
 </template>

 <script>
-import editorImage from './components/editorImage'
+/**
+ * docs:
+ * https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce
+ */
+import editorImage from './components/EditorImage'
 import plugins from './plugins'
 import toolbar from './toolbar'

@@ -38,9 +42,14 @@ export default {
      default: 'file edit insert view format table'
    },
    height: {
-      type: Number,
+      type: [Number, String],
      required: false,
      default: 360
+    },
+    width: {
+      type: [Number, String],
+      required: false,
+      default: 'auto'
    }
  },
  data() {
@@ -56,8 +65,12 @@ export default {
    }
  },
  computed: {
-    language() {
-      return this.languageTypeList[this.$store.getters.language]
+    containerWidth() {
+      const width = this.width
+      if (/^[\d]+(\.[\d]+)?$/.test(width)) { // matches `100`, `'100'`
+        return `${width}px`
+      }
+      return width
    }
  },
  watch: {
@@ -66,10 +79,6 @@ export default {
        this.$nextTick(() =>
          window.tinymce.get(this.tinymceId).setContent(val || ''))
      }
-    },
-    language() {
-      this.destroyTinymce()
-      this.$nextTick(() => this.initTinymce())
    }
  },
  mounted() {
@@ -88,7 +97,6 @@ export default {
    initTinymce() {
      const _this = this
      window.tinymce.init({
-        language: this.language,
        selector: `#${this.tinymceId}`,
        height: this.height,
        body_class: 'panel-body ',
--- a/src/components/TreeTable/README.md
+++ b/src/components/TreeTable/README.md
@@ -1,220 +0,0 @@
-
- [Enlgish](#Brief)
-
-# 中文
-
-## 写在前面
-
-此组件仅提供一个创建 `TreeTable` 的解决思路。它基于`element-ui`的 table 组件实现，通过`el-table`的`row-style`方法，在里面判断元素是否需要隐藏或者显示，从而实现`TreeTable`的展开与收起。
-
-并且本组件充分利用 `vue` 插槽的特性来方便用户自定义。
-
-`evel.js` 里面，`addAttrs` 方法会给数据添加几个属性，`treeTotable` 会对数组扁平化。这些操作都不会破坏源数据，只是会新增属性。
-
-## Props 说明
-
-|    Attribute     | Description                        |  Type   | Default  |
-| :--------------: | :--------------------------------- | :-----: | :------: |
-|       data       | 原始展示数据                       |  Array  |    []    |
-|     columns      | 列属性                             |  Array  |    []    |
-| defaultExpandAll | 默认是否全部展开                   | Boolean |  false   |
-| defaultChildren  | 指定子树为节点对象的某个属性值     | String  | children |  |
-|      indent      | 相邻级节点间的水平缩进，单位为像素 | Number  |    50    |
-
-> 任何 `el-table` 的属性都支持，例如`border`、`fit`、`size`或者`@select`、`@cell-click`等方法。详情属性见`el-table`文档。
-
---
-
-### 代码示例
-
-```html
-<tree-table :data="data" :columns="columns" border>
-```
-
-#### data(**必填**)
-
-```js
-const data = [
-  {
-    name:'1'
-    children: [
-      {
-        name: '1-1'
-      },
-      {
-        name: '1-2'
-      }
-    ]
-  },
-  {
-    name: `2`
-  }
-]
-```
-
-#### columns(**必填**)
-
- label: 显示在表头的文字
- key: 对应 data 的 key。treeTable 将显示相应的 value
- expand: `true` or `false`。若为 true，则在该列显示展开收起图标
- checkbox: `true` or `false`。若为 true，则在该列显示`checkbox`
- width: 每列的宽度，为一个数字(可选)。例如`200`
- align: 对齐方式 `left/center/right`
- header-align: 表头对齐方式 `left/center/right`
-
-```javascript
-const columns = [
-  {
-    label: 'Checkbox',
-    checkbox: true
-  },
-  {
-    label: '',
-    key: 'id',
-    expand: true
-  },
-  {
-    label: 'Event',
-    key: 'event',
-    width: 200,
-    align: 'left'
-  },
-  {
-    label: 'Scope',
-    key: 'scope'
-  }
-]
-```
-
-> 树表组件将会根据 columns 的 key 属性生成具名插槽，如果你需要对列数据进行自定义，通过插槽即可实现
-
-```html
-<template slot="your key" slot-scope="{scope}">
-  <el-tag>level: {{ scope.row._level }}</el-tag>
-  <el-tag>expand: {{ scope.row._expand }}</el-tag>
-  <el-tag>select: {{ scope.row._select }}</el-tag>
-</template>
-```
-
-## Events
-
-目前提供了几个方法，不过只是`beta`版本，之后很可能会修改。
-
-```js
-this.$refs.TreeTable.addChild(row, data) //添加子元素
-this.$refs.TreeTable.addBrother(row, data) //添加兄弟元素
-this.$refs.TreeTable.delete(row) //删除该元素
-```
-
-## 其他
-
-如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的 api 自行修改 index.vue
-
-# English
-
-## Brief
-
-This component only provides a solution for creating `TreeTable`. It is based on the `element-ui` table component. It uses the `row-style` method of `el-table` to determine whether the element needs to be hidden or displayed.
-
-And this component makes full use of the features of the `vue` slot to make it user-friendly.
-
-In `evel.js`, the `addAttrs` method adds several properties to the data, and `treeTotable` flattens the array. None of these operations will destroy the source data, just add properties.
-
-## Props
-
-|    Attribute     | Description                                                  |  Type   | Default  |
-| :--------------: | :----------------------------------------------------------- | :-----: | :------: |
-|       data       | original display data                                        |  Array  |    []    |
-|     columns      | column attribute                                             |  Array  |    []    |
-| defaultExpandAll | whether to expand all nodes by default                       | Boolean |  false   |
-| defaultChildren  | specify which node object is used as the node's subtree      | String  | children |  |
-|      indent      | horizontal indentation of nodes in adjacent levels in pixels | Number  |    50    |
-
-> Any of the `el-table` properties are supported, such as `border`, `fit`, `size` or `@select`, `@cell-click`. See the ʻel-table` documentation for details.
-
---
-
-### Example
-
-```html
-<tree-table :data="data" :columns="columns" border>
-```
-
-#### data(**Required**)
-
-```js
-const data = [
-  {
-    name:'1'
-    children: [
-      {
-        name: '1-1'
-      },
-      {
-        name: '1-2'
-      }
-    ]
-  },
-  {
-    name: `2`
-  }
-]
-```
-
-#### columns(**Required**)
-
- label: text displayed in the header
- key: data.key will show in column
- expand: `true` or `false`
- checkbox: `true` or `false`
- width: column width 。such as `200`
- align: alignment `left/center/right`
- header-align: alignment of the table header `left/center/right`
-
-```javascript
-const columns = [
-  {
-    label: 'Checkbox',
-    checkbox: true
-  },
-  {
-    label: '',
-    key: 'id',
-    expand: true
-  },
-  {
-    label: 'Event',
-    key: 'event',
-    width: 200,
-    align: 'left'
-  },
-  {
-    label: 'Scope',
-    key: 'scope'
-  }
-]
-```
-
-> The tree table component will generate a named slot based on the key property of columns. If you need to customize the column data, you can do it through the slot.
-
-```html
-<template slot="your key" slot-scope="{scope}">
-  <el-tag>level: {{ scope.row._level }}</el-tag>
-  <el-tag>expand: {{ scope.row._expand }}</el-tag>
-  <el-tag>select: {{ scope.row._select }}</el-tag>
-</template>
-```
-
-## Events
-
-Several methods are currently available, but only the `beta` version, which is likely to be modified later.
-
-```js
-this.$refs.TreeTable.addChild(row, data) //Add child elements
-this.$refs.TreeTable.addBrother(row, data) //Add a sibling element
-this.$refs.TreeTable.delete(row) //Delete the element
-```
-
-## Other
-
-If you have other requirements, please refer to the [el-table](http://element-cn.eleme.io/#/en-US/component/table) api to modify the index.vue
--- a/src/components/TreeTable/eval.js
+++ b/src/components/TreeTable/eval.js
@@ -1,48 +0,0 @@
-import Vue from 'vue'
-
-// Flattened array
-export default function treeToArray(data, children = 'children') {
-  let tmp = []
-  data.forEach((item, index) => {
-    Vue.set(item, '_index', index)
-    tmp.push(item)
-    if (item[children] && item[children].length > 0) {
-      const res = treeToArray(item[children], children)
-      tmp = tmp.concat(res)
-    }
-  })
-  return tmp
-}
-
-export function addAttrs(data, { parent = null, preIndex = false, level = 0, expand = false, children = 'children', show = true, select = false } = {}) {
-  data.forEach((item, index) => {
-    const _id = (preIndex ? `${preIndex}-${index}` : index) + ''
-    Vue.set(item, '_id', _id)
-    Vue.set(item, '_level', level)
-    Vue.set(item, '_expand', expand)
-    Vue.set(item, '_parent', parent)
-    Vue.set(item, '_show', show)
-    Vue.set(item, '_select', select)
-    if (item[children] && item[children].length > 0) {
-      addAttrs(item[children], {
-        parent: item,
-        level: level + 1,
-        expand,
-        preIndex: _id,
-        children,
-        status,
-        select
-      })
-    }
-  })
-}
-
-export function cleanParentAttr(data, children = 'children') {
-  data.forEach(item => {
-    item._parent = null
-    if (item[children] && item[children].length > 0) {
-      addAttrs(item[children], children)
-    }
-  })
-  return data
-}
--- a/src/components/TreeTable/index.vue
+++ b/src/components/TreeTable/index.vue
@@ -1,193 +0,0 @@
-<template>
-  <el-table :data="tableData" :row-style="showRow" v-bind="$attrs" v-on="$listeners">
-    <slot name="selection" />
-    <slot name="pre-column" />
-    <el-table-column
-      v-for="item in columns"
-      :key="item.key"
-      :label="item.label"
-      :width="item.width"
-      :align="item.align||'center'"
-      :header-align="item.headerAlign"
-    >
-      <template slot-scope="scope">
-        <slot :scope="scope" :name="item.key">
-          <template v-if="item.expand">
-            <span :style="{'padding-left':+scope.row._level*indent + 'px'} " />
-            <span v-show="showSperadIcon(scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
-              <i v-if="!scope.row._expand" class="el-icon-plus" />
-              <i v-else class="el-icon-minus" />
-            </span>
-          </template>
-          <template v-if="item.checkbox">
-            <el-checkbox
-              v-if="scope.row[defaultChildren]&&scope.row[defaultChildren].length>0"
-              v-model="scope.row._select"
-              :style="{'padding-left':+scope.row._level*indent + 'px'} "
-              :indeterminate="scope.row._select"
-              @change="handleCheckAllChange(scope.row)"
-            />
-            <el-checkbox
-              v-else
-              v-model="scope.row._select"
-              :style="{'padding-left':+scope.row._level*indent + 'px'} "
-              @change="handleCheckAllChange(scope.row)"
-            />
-          </template>
-          {{ scope.row[item.key] }}
-        </slot>
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-
-<script>
-import treeToArray, { addAttrs } from './eval.js'
-
-export default {
-  name: 'TreeTable',
-  props: {
-    data: {
-      type: Array,
-      required: true,
-      default: () => []
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    defaultExpandAll: {
-      type: Boolean,
-      default: false
-    },
-    defaultChildren: {
-      type: String,
-      default: 'children'
-    },
-    indent: {
-      type: Number,
-      default: 50
-    }
-  },
-  data() {
-    return {
-      guard: 1
-    }
-  },
-  computed: {
-    children() {
-      return this.defaultChildren
-    },
-    tableData() {
-      const data = this.data
-      if (this.data.length === 0) {
-        return []
-      }
-      addAttrs(data, {
-        expand: this.defaultExpandAll,
-        children: this.defaultChildren
-      })
-
-      const retval = treeToArray(data, this.defaultChildren)
-      return retval
-    }
-  },
-  methods: {
-    addBrother(row, data) {
-      if (row._parent) {
-        row._parent.children.push(data)
-      } else {
-        this.data.push(data)
-      }
-    },
-    addChild(row, data) {
-      if (!row.children) {
-        this.$set(row, 'children', [])
-      }
-      row.children.push(data)
-    },
-    delete(row) {
-      const { _index, _parent } = row
-      if (_parent) {
-        _parent.children.splice(_index, 1)
-      } else {
-        this.data.splice(_index, 1)
-      }
-    },
-    getData() {
-      return this.tableData
-    },
-    showRow: function({ row }) {
-      const parent = row._parent
-      const show = parent ? parent._expand && parent._show : true
-      row._show = show
-      return show
-        ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;'
-        : 'display:none;'
-    },
-    showSperadIcon(record) {
-      return record[this.children] && record[this.children].length > 0
-    },
-    toggleExpanded(trIndex) {
-      const record = this.tableData[trIndex]
-      const expand = !record._expand
-      record._expand = expand
-    },
-    handleCheckAllChange(row) {
-      this.selcetRecursion(row, row._select, this.defaultChildren)
-      this.isIndeterminate = row._select
-    },
-    selcetRecursion(row, select, children = 'children') {
-      if (select) {
-        this.$set(row, '_expand', true)
-        this.$set(row, '_show', true)
-      }
-      const sub_item = row[children]
-      if (sub_item && sub_item.length > 0) {
-        sub_item.map(child => {
-          child._select = select
-          this.selcetRecursion(child, select, children)
-        })
-      }
-    },
-    updateTreeNode(item) {
-      return new Promise(resolve => {
-        const { _id, _parent } = item
-        const index = _id.split('-').slice(-1)[0] // get last index
-        if (_parent) {
-          _parent.children.splice(index, 1, item)
-          resolve(this.data)
-        } else {
-          this.data.splice(index, 1, item)
-          resolve(this.data)
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style>
-@keyframes treeTableShow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@-webkit-keyframes treeTableShow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.tree-ctrl {
-  position: relative;
-  cursor: pointer;
-  color: #2196f3;
-}
-</style>
--- a/src/components/TreeTable/readme.md
+++ b/src/components/TreeTable/readme.md
@@ -1,220 +0,0 @@
-
- [Enlgish](#Brief)
-
-# 中文
-
-## 写在前面
-
-此组件仅提供一个创建 `TreeTable` 的解决思路。它基于`element-ui`的 table 组件实现，通过`el-table`的`row-style`方法，在里面判断元素是否需要隐藏或者显示，从而实现`TreeTable`的展开与收起。
-
-并且本组件充分利用 `vue` 插槽的特性来方便用户自定义。
-
-`evel.js` 里面，`addAttrs` 方法会给数据添加几个属性，`treeTotable` 会对数组扁平化。这些操作都不会破坏源数据，只是会新增属性。
-
-## Props 说明
-
-|    Attribute     | Description                        |  Type   | Default  |
-| :--------------: | :--------------------------------- | :-----: | :------: |
-|       data       | 原始展示数据                       |  Array  |    []    |
-|     columns      | 列属性                             |  Array  |    []    |
-| defaultExpandAll | 默认是否全部展开                   | Boolean |  false   |
-| defaultChildren  | 指定子树为节点对象的某个属性值     | String  | children |  |
-|      indent      | 相邻级节点间的水平缩进，单位为像素 | Number  |    50    |
-
-> 任何 `el-table` 的属性都支持，例如`border`、`fit`、`size`或者`@select`、`@cell-click`等方法。详情属性见`el-table`文档。
-
---
-
-### 代码示例
-
-```html
-<tree-table :data="data" :columns="columns" border>
-```
-
-#### data(**必填**)
-
-```js
-const data = [
-  {
-    name:'1'
-    children: [
-      {
-        name: '1-1'
-      },
-      {
-        name: '1-2'
-      }
-    ]
-  },
-  {
-    name: `2`
-  }
-]
-```
-
-#### columns(**必填**)
-
- label: 显示在表头的文字
- key: 对应 data 的 key。treeTable 将显示相应的 value
- expand: `true` or `false`。若为 true，则在该列显示展开收起图标
- checkbox: `true` or `false`。若为 true，则在该列显示`checkbox`
- width: 每列的宽度，为一个数字(可选)。例如`200`
- align: 对齐方式 `left/center/right`
- header-align: 表头对齐方式 `left/center/right`
-
-```javascript
-const columns = [
-  {
-    label: 'Checkbox',
-    checkbox: true
-  },
-  {
-    label: '',
-    key: 'id',
-    expand: true
-  },
-  {
-    label: 'Event',
-    key: 'event',
-    width: 200,
-    align: 'left'
-  },
-  {
-    label: 'Scope',
-    key: 'scope'
-  }
-]
-```
-
-> 树表组件将会根据 columns 的 key 属性生成具名插槽，如果你需要对列数据进行自定义，通过插槽即可实现
-
-```html
-<template slot="your key" slot-scope="{scope}">
-  <el-tag>level: {{ scope.row._level }}</el-tag>
-  <el-tag>expand: {{ scope.row._expand }}</el-tag>
-  <el-tag>select: {{ scope.row._select }}</el-tag>
-</template>
-```
-
-## Events
-
-目前提供了几个方法，不过只是`beta`版本，之后很可能会修改。
-
-```js
-this.$refs.TreeTable.addChild(row, data) //添加子元素
-this.$refs.TreeTable.addBrother(row, data) //添加兄弟元素
-this.$refs.TreeTable.delete(row) //删除该元素
-```
-
-## 其他
-
-如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的 api 自行修改 index.vue
-
-# English
-
-## Brief
-
-This component only provides a solution for creating `TreeTable`. It is based on the `element-ui` table component. It uses the `row-style` method of `el-table` to determine whether the element needs to be hidden or displayed.
-
-And this component makes full use of the features of the `vue` slot to make it user-friendly.
-
-In `evel.js`, the `addAttrs` method adds several properties to the data, and `treeTotable` flattens the array. None of these operations will destroy the source data, just add properties.
-
-## Props
-
-|    Attribute     | Description                                                  |  Type   | Default  |
-| :--------------: | :----------------------------------------------------------- | :-----: | :------: |
-|       data       | original display data                                        |  Array  |    []    |
-|     columns      | column attribute                                             |  Array  |    []    |
-| defaultExpandAll | whether to expand all nodes by default                       | Boolean |  false   |
-| defaultChildren  | specify which node object is used as the node's subtree      | String  | children |  |
-|      indent      | horizontal indentation of nodes in adjacent levels in pixels | Number  |    50    |
-
-> Any of the `el-table` properties are supported, such as `border`, `fit`, `size` or `@select`, `@cell-click`. See the ʻel-table` documentation for details.
-
---
-
-### Example
-
-```html
-<tree-table :data="data" :columns="columns" border>
-```
-
-#### data(**Required**)
-
-```js
-const data = [
-  {
-    name:'1'
-    children: [
-      {
-        name: '1-1'
-      },
-      {
-        name: '1-2'
-      }
-    ]
-  },
-  {
-    name: `2`
-  }
-]
-```
-
-#### columns(**Required**)
-
- label: text displayed in the header
- key: data.key will show in column
- expand: `true` or `false`
- checkbox: `true` or `false`
- width: column width 。such as `200`
- align: alignment `left/center/right`
- header-align: alignment of the table header `left/center/right`
-
-```javascript
-const columns = [
-  {
-    label: 'Checkbox',
-    checkbox: true
-  },
-  {
-    label: '',
-    key: 'id',
-    expand: true
-  },
-  {
-    label: 'Event',
-    key: 'event',
-    width: 200,
-    align: 'left'
-  },
-  {
-    label: 'Scope',
-    key: 'scope'
-  }
-]
-```
-
-> The tree table component will generate a named slot based on the key property of columns. If you need to customize the column data, you can do it through the slot.
-
-```html
-<template slot="your key" slot-scope="{scope}">
-  <el-tag>level: {{ scope.row._level }}</el-tag>
-  <el-tag>expand: {{ scope.row._expand }}</el-tag>
-  <el-tag>select: {{ scope.row._select }}</el-tag>
-</template>
-```
-
-## Events
-
-Several methods are currently available, but only the `beta` version, which is likely to be modified later.
-
-```js
-this.$refs.TreeTable.addChild(row, data) //Add child elements
-this.$refs.TreeTable.addBrother(row, data) //Add a sibling element
-this.$refs.TreeTable.delete(row) //Delete the element
-```
-
-## Other
-
-If you have other requirements, please refer to the [el-table](http://element-cn.eleme.io/#/en-US/component/table) api to modify the index.vue
--- a/src/components/Upload/SingleImage.vue
+++ b/src/components/Upload/SingleImage.vue
@@ -10,7 +10,9 @@
      action="https://httpbin.org/post"
    >
      <i class="el-icon-upload" />
-      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <div class="el-upload__text">
+        将文件拖到此处，或<em>点击上传</em>
+      </div>
    </el-upload>
    <div class="image-preview">
      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
@@ -24,7 +26,6 @@
 </template>

 <script>
-// 预览效果见付费文章
 import { getToken } from '@/api/qiniu'

 export default {
@@ -76,8 +77,8 @@ export default {
 }
 </script>

-<style rel="stylesheet/scss" lang="scss" scoped>
-    @import "src/styles/mixin.scss";
+<style lang="scss" scoped>
+    @import "~@/styles/mixin.scss";
    .upload-container {
        width: 100%;
        position: relative;
--- a/src/components/Upload/SingleImage2.vue
+++ b/src/components/Upload/SingleImage2.vue
@@ -10,7 +10,9 @@
      action="https://httpbin.org/post"
    >
      <i class="el-icon-upload" />
-      <div class="el-upload__text">Drag或<em>点击上传</em></div>
+      <div class="el-upload__text">
+        Drag或<em>点击上传</em>
+      </div>
    </el-upload>
    <div v-show="imageUrl.length>0" class="image-preview">
      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
@@ -74,7 +76,7 @@ export default {
 }
 </script>

-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .upload-container {
  width: 100%;
  height: 100%;
--- a/src/components/Upload/SingleImage3.vue
+++ b/src/components/Upload/SingleImage3.vue
@@ -10,7 +10,9 @@
      action="https://httpbin.org/post"
    >
      <i class="el-icon-upload" />
-      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <div class="el-upload__text">
+        将文件拖到此处，或<em>点击上传</em>
+      </div>
    </el-upload>
    <div class="image-preview image-app-preview">
      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
@@ -83,7 +85,7 @@ export default {
 }
 </script>

-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
 .upload-container {
  width: 100%;
--- a/src/components/UploadExcel/index.vue
+++ b/src/components/UploadExcel/index.vue
@@ -3,7 +3,9 @@
    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
    <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
      Drop excel file here or
-      <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">Browse</el-button>
+      <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">
+        Browse
+      </el-button>
    </div>
  </div>
 </template>
--- a/src/directive/el-drag-dialog/drag.js
+++ b/src/directive/el-drag-dialog/drag.js
--- a/src/directive/el-drag-dialog/index.js
+++ b/src/directive/el-drag-dialog/index.js
--- a/src/directive/el-table/adaptive.js
+++ b/src/directive/el-table/adaptive.js
@@ -1,4 +1,3 @@
-
 import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'

 /**
@@ -30,13 +29,13 @@ export default {
    el.resizeListener = () => {
      doResize(el, binding, vnode)
    }
-
-    addResizeListener(el, el.resizeListener)
+    // parameter 1 is must be "Element" type
+    addResizeListener(window.document.body, el.resizeListener)
  },
  inserted(el, binding, vnode) {
    doResize(el, binding, vnode)
  },
  unbind(el) {
-    removeResizeListener(el, el.resizeListener)
+    removeResizeListener(window.document.body, el.resizeListener)
  }
 }
--- a/src/directive/el-table/index.js
+++ b/src/directive/el-table/index.js
@@ -1,4 +1,3 @@
-
 import adaptive from './adaptive'

 const install = function(Vue) {
--- a/src/directive/permission/permission.js
+++ b/src/directive/permission/permission.js
@@ -1,4 +1,3 @@
-
 import store from '@/store'

 export default {
--- a/src/directive/waves/waves.js
+++ b/src/directive/waves/waves.js
@@ -5,8 +5,7 @@ const context = '@@wavesContext'
 function handleClick(el, binding) {
  function handle(e) {
    const customOpts = Object.assign({}, binding.value)
-    const opts = Object.assign(
-      {
+    const opts = Object.assign({
      ele: el, // 波纹作用元素
      type: 'hit', // hit 点击位置扩散 center中心点扩展
      color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
--- a/src/errorLog.js
+++ b/src/errorLog.js
@@ -1,19 +0,0 @@
-import Vue from 'vue'
-import store from './store'
-
-// you can set only in production env show the error-log
-if (process.env.NODE_ENV === 'production') {
-  Vue.config.errorHandler = function(err, vm, info, a) {
-  // Don't ask me why I use Vue.nextTick, it just a hack.
-  // detail see https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500
-    Vue.nextTick(() => {
-      store.dispatch('addErrorLog', {
-        err,
-        vm,
-        info,
-        url: window.location.href
-      })
-      console.error(err, info)
-    })
-  }
-}
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -1,6 +1,12 @@
-// set function parseTime,formatTime to filter
+// import parseTime, formatTime and set to filter
 export { parseTime, formatTime } from '@/utils'

+/**
+ * Show plural label if time is plural number
+ * @param {number} time
+ * @param {string} label
+ * @return {string}
+ */
 function pluralize(time, label) {
  if (time === 1) {
    return time + label
@@ -8,6 +14,9 @@ function pluralize(time, label) {
  return time + label + 's'
 }

+/**
+ * @param {number} time
+ */
 export function timeAgo(time) {
  const between = Date.now() / 1000 - Number(time)
  if (between < 3600) {
@@ -19,7 +28,12 @@ export function timeAgo(time) {
  }
 }

-/* 数字 格式化*/
+/**
+ * Number formatting
+ * like 10000 => 10k
+ * @param {number} num
+ * @param {number} digits
+ */
 export function numberFormatter(num, digits) {
  const si = [
    { value: 1E18, symbol: 'E' },
@@ -37,6 +51,18 @@ export function numberFormatter(num, digits) {
  return num.toString()
 }

+/**
+ * 10000 => "10,000"
+ * @param {number} num
+ */
 export function toThousandFilter(num) {
  return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
 }
+
+/**
+ * Upper case first char
+ * @param {String} string
+ */
+export function uppercaseFirst(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import SvgIcon from '@/components/SvgIcon'// svg组件
+import SvgIcon from '@/components/SvgIcon'// svg component

 // register globally
 Vue.component('svg-icon', SvgIcon)
--- a/src/icons/svg/education.svg
+++ b/src/icons/svg/education.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M88.883 119.565c-7.284 0-19.434 2.495-21.333 8.25v.127c-4.232.13-5.222 0-7.108 0-1.895-5.76-14.045-8.256-21.333-8.256H0V0h42.523c9.179 0 17.109 5.47 21.47 13.551C68.352 5.475 76.295 0 85.478 0H128v119.57l-39.113-.005h-.004zM60.442 24.763c0-9.651-8.978-16.507-17.777-16.507H7.108V111.43H39.11c7.054-.14 18.177.082 21.333 6.12v-4.628c-.134-5.722-.004-13.522 0-13.832V27.413l.004-2.655-.004.005zm60.442-16.517h-35.55c-8.802 0-17.78 6.856-17.78 16.493v74.259c.004.32.138 8.115 0 13.813v4.627c3.155-6.022 14.279-6.26 21.333-6.114h32V8.25l-.003-.005z"/></svg>
--- a/src/icons/svg/guide
+++ b/src/icons/svg/guide
@@ -1 +0,0 @@
-<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg"><path d="M11.576 547.9l282.848 126.404 409.285-383.26 137.057-128.341L361.234 714.22l362.77 146.362c8.742 3.327 18.733-1.33 21.855-10.644v-.666L999.985.374 10.327 514.636c-8.742 4.657-11.864 15.302-8.117 24.616 2.497 3.991 5.62 7.318 9.366 8.648zM360.61 999.626l141.112-161.663-141.112-61.206v222.869z"/></svg>
--- a/src/icons/svg/skill.svg
+++ b/src/icons/svg/skill.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M31.652 93.206h33.401c1.44 2.418 3.077 4.663 4.93 6.692h-38.33v-6.692zm0-10.586h28.914a44.8 44.8 0 0 1-1.264-6.688h-27.65v6.688zm0-17.27H59.39c.288-2.286.714-4.532 1.34-6.687H31.65v6.687h.003zm53.913 44.84v5.85c0 2.798-2.095 5.075-4.667 5.075h-70.07c-2.576 0-4.663-2.277-4.663-5.075V31.26l23.22-20.96v22.25H17.16v6.688h18.39V6.688h45.348c2.576 0 4.667 2.277 4.667 5.066v20.009c1.987-.675 4.053-1.128 6.17-1.445v-18.56C91.738 5.28 86.874 0 80.902 0H31.15L0 28.118v87.917c0 6.48 4.859 11.759 10.832 11.759h70.07c5.974 0 10.837-5.27 10.837-11.759v-4.41c-2.117-.312-4.183-.765-6.17-1.435h-.004zM23.279 58.667h-7.96v6.688h7.96v-6.688zm-7.956 41.23h7.96v-6.691h-7.96v6.692zm7.956-23.96h-7.96v6.687h7.96v-6.688zm89.718-15.042l-4.896-4.07-12.447 17.613-11.19-9.305-3.762 5.311 16.091 13.38 16.204-22.929zM128 70.978c0-18.632-13.97-33.782-31.147-33.782-17.168 0-31.135 15.155-31.135 33.782 0 18.628 13.97 33.783 31.135 33.783 17.172 0 31.143-15.15 31.143-33.783H128zm-6.17 0c0 14.933-11.203 27.1-24.981 27.1-13.77 0-24.987-12.158-24.987-27.1 0-14.941 11.195-27.099 24.987-27.099 13.778 0 24.982 12.158 24.982 27.1z"/></svg>
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -1,167 +0,0 @@
-export default {
-  route: {
-    dashboard: 'Dashboard',
-    introduction: 'Introduction',
-    documentation: 'Documentation',
-    guide: 'Guide',
-    permission: 'Permission',
-    pagePermission: 'Page Permission',
-    rolePermission: 'Role Permission',
-    directivePermission: 'Directive Permission',
-    icons: 'Icons',
-    components: 'Components',
-    componentIndex: 'Introduction',
-    tinymce: 'Tinymce',
-    markdown: 'Markdown',
-    jsonEditor: 'JSON Editor',
-    dndList: 'Dnd List',
-    splitPane: 'SplitPane',
-    avatarUpload: 'Avatar Upload',
-    dropzone: 'Dropzone',
-    sticky: 'Sticky',
-    countTo: 'CountTo',
-    componentMixin: 'Mixin',
-    backToTop: 'BackToTop',
-    dragDialog: 'Drag Dialog',
-    dragSelect: 'Drag Select',
-    dragKanban: 'Drag Kanban',
-    charts: 'Charts',
-    keyboardChart: 'Keyboard Chart',
-    lineChart: 'Line Chart',
-    mixChart: 'Mix Chart',
-    example: 'Example',
-    nested: 'Nested Routes',
-    menu1: 'Menu 1',
-    'menu1-1': 'Menu 1-1',
-    'menu1-2': 'Menu 1-2',
-    'menu1-2-1': 'Menu 1-2-1',
-    'menu1-2-2': 'Menu 1-2-2',
-    'menu1-3': 'Menu 1-3',
-    menu2: 'Menu 2',
-    Table: 'Table',
-    dynamicTable: 'Dynamic Table',
-    dragTable: 'Drag Table',
-    inlineEditTable: 'Inline Edit',
-    complexTable: 'Complex Table',
-    treeTable: 'Tree Table',
-    customTreeTable: 'Custom TreeTable',
-    tab: 'Tab',
-    form: 'Form',
-    createArticle: 'Create Article',
-    editArticle: 'Edit Article',
-    articleList: 'Article List',
-    errorPages: 'Error Pages',
-    page401: '401',
-    page404: '404',
-    errorLog: 'Error Log',
-    excel: 'Excel',
-    exportExcel: 'Export Excel',
-    selectExcel: 'Export Selected',
-    mergeHeader: 'Merge Header',
-    uploadExcel: 'Upload Excel',
-    zip: 'Zip',
-    pdf: 'PDF',
-    exportZip: 'Export Zip',
-    theme: 'Theme',
-    clipboardDemo: 'Clipboard',
-    i18n: 'I18n',
-    externalLink: 'External Link'
-  },
-  navbar: {
-    logOut: 'Log Out',
-    dashboard: 'Dashboard',
-    github: 'Github',
-    theme: 'Theme',
-    size: 'Global Size'
-  },
-  login: {
-    title: 'Login Form',
-    logIn: 'Log in',
-    username: 'Username',
-    password: 'Password',
-    any: 'any',
-    thirdparty: 'Or connect with',
-    thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !'
-  },
-  documentation: {
-    documentation: 'Documentation',
-    github: 'Github Repository'
-  },
-  permission: {
-    addRole: 'New Role',
-    editPermission: 'Edit Permission',
-    roles: 'Your roles',
-    switchRoles: 'Switch roles',
-    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
-    delete: 'Delete',
-    confirm: 'Confirm',
-    cancel: 'Cancel'
-  },
-  guide: {
-    description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
-    button: 'Show Guide'
-  },
-  components: {
-    documentation: 'Documentation',
-    tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the finally chose Tinymce. See documentation for more detailed rich text editor comparisons and introductions.',
-    dropzoneTips: 'Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.',
-    stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
-    backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
-    backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
-    imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.'
-  },
-  table: {
-    dynamicTips1: 'Fixed header, sorted by header order',
-    dynamicTips2: 'Not fixed header, sorted by click order',
-    dragTips1: 'The default order',
-    dragTips2: 'The after dragging order',
-    title: 'Title',
-    importance: 'Imp',
-    type: 'Type',
-    remark: 'Remark',
-    search: 'Search',
-    add: 'Add',
-    export: 'Export',
-    reviewer: 'reviewer',
-    id: 'ID',
-    date: 'Date',
-    author: 'Author',
-    readings: 'Readings',
-    status: 'Status',
-    actions: 'Actions',
-    edit: 'Edit',
-    publish: 'Publish',
-    draft: 'Draft',
-    delete: 'Delete',
-    cancel: 'Cancel',
-    confirm: 'Confirm'
-  },
-  errorLog: {
-    tips: 'Please click the bug icon in the upper right corner',
-    description: 'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.',
-    documentation: 'Document introduction'
-  },
-  excel: {
-    export: 'Export',
-    selectedExport: 'Export Selected Items',
-    placeholder: 'Please enter the file name(default excel-list)'
-  },
-  zip: {
-    export: 'Export',
-    placeholder: 'Please enter the file name(default file)'
-  },
-  pdf: {
-    tips: 'Here we use window.print() to implement the feature of downloading pdf.'
-  },
-  theme: {
-    change: 'Change Theme',
-    documentation: 'Theme documentation',
-    tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.'
-  },
-  tagsView: {
-    refresh: 'Refresh',
-    close: 'Close',
-    closeOthers: 'Close Others',
-    closeAll: 'Close All'
-  }
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Pan	4dcd4fbbb1	[release] 4.1.0	2019-05-05 17:04:44 +08:00
花裤衩	00a19db299	chore: remove i18n (#1828 )	2019-05-05 16:49:40 +08:00
Pan	e8e6c7e79c	perf: optimize page scrolling when setting fixedHeader tweak	2019-05-05 15:53:45 +08:00
Pan	41318aa0d9	docs: tips for set port	2019-05-05 15:02:27 +08:00
Pan	90af74eb40	perf[Example]: refine example demo	2019-05-03 17:29:49 +08:00
Pan	fd9ad8986c	perf[Tinymce]: refine tinymce lang	2019-05-03 16:58:33 +08:00
dolonfly	09a80688d2	fix[Example]: fixed display_time always NaN bug (#2001 )	2019-05-03 14:14:37 +08:00
linzhengen	abac07820a	feature: added ja lang (#1999 )	2019-05-02 13:59:31 +08:00
花裤衩	9e318f80ba	perf[Tinymce]: import tinymce from cdn (#1996 )	2019-04-30 16:39:42 +08:00
Pan	9c28b1dd92	fix[Mock]: add error handling	2019-04-28 17:53:37 +08:00
Pan	d4be15d9d9	perf: dashboard add cache	2019-04-28 14:51:11 +08:00
Pan	f24b64392e	chore: set ci node version	2019-04-26 17:56:33 +08:00
Tuan Duong	c58e2078bc	feature[profile]: add profile page (#1953 )	2019-04-25 17:45:46 +08:00
Pan	f9f51986e6	perf: remove redundant svg	2019-04-25 14:55:17 +08:00
Pan	3625f92041	fix[Tinymce]: fixed width bug	2019-04-23 11:25:53 +08:00
anson	f0ca1735d3	perf[Tinymce]: add width prop (#1951 )	2019-04-23 10:09:15 +08:00
Pan	d8dbf92b47	tweak	2019-04-19 17:25:11 +08:00
Pan	120c78622d	perf[jest]: clear jest test cache	2019-04-19 17:24:40 +08:00
Pan	7dc9e681bf	docs: update readme	2019-04-19 17:24:15 +08:00
toruksmakto	7ca42be603	perf[login.vue]: add tabindex for login form (#1933 )	2019-04-18 19:54:34 +08:00
dingangang	ea91066b18	fix[mock]: fixed mock-server hot reload bug in windows (#1939 )	2019-04-18 18:36:20 +08:00
Pan	50d0957409	perf: optimize some small details	2019-04-18 18:19:17 +08:00
花裤衩	806f960a80	perf[Views]: revise views/icons path (#1928 ) - Icons view includes 2 small views: svg-icons and element-icons	2019-04-17 11:47:08 +08:00
Pan	3f71147385	tweak	2019-04-17 11:45:12 +08:00
Pan	154b75b47c	perf[Sidebar]: add unique-opened option	2019-04-17 11:09:16 +08:00
Tuan Duong	6a08c79bfb	Change views/icons path - Icons view includes 2 small views: svg-icons and element-icons	2019-04-17 00:01:24 +07:00
yuntao1997	c00564617e	fix[adaptive.js]: fixed v-el-height-adaptive-table directive bug (#1924 )	2019-04-16 14:56:07 +08:00
Pan	952da32879	perf[element-ui.scss]: refine default style	2019-04-16 14:46:05 +08:00
Pan	3678bd18fb	perf[Breadcrumb]: refine getBreadcrumb function	2019-04-16 14:18:50 +08:00
Pan	4ee334ad83	perf[Breadcrumb]: set noredirect => noRedirect	2019-04-16 13:51:14 +08:00
Pan	067a2910d4	Revert "perf: add functional to template" This reverts commit `9ecec0970f`.	2019-04-16 13:28:57 +08:00
Pan	9ecec0970f	perf: add functional to template	2019-04-16 11:51:12 +08:00
花裤衩	be7ec4c0ff	docs: improve code comments (#1911 )	2019-04-16 11:20:13 +08:00
非空	26d0f40df2	feature: change page title when route change (#1910 )	2019-04-15 11:58:43 +08:00
linfei	14580da5b3	perf[Breadcrumb]: revise the breadcrumb navigation of permission and zip (#1908 )	2019-04-15 10:31:06 +08:00
花裤衩	fdea6c684a	refactor: standardized files name (#1884 ) style-guide: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/style-guide.html#style-guide	2019-04-12 17:13:27 +08:00
Pan	a6be6af46d	perf: set private property names for vue https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential	2019-04-12 10:53:12 +08:00
Tuan Duong	d0651ad2f2	perf: add jsdoc for utils and format some code (#1883 )	2019-04-11 10:41:36 +08:00
Pan	43ae8520b3	docs: update readme	2019-04-11 10:06:02 +08:00
Pan	5dd98ea47f	perf[mock-server]: optimize variable name	2019-04-11 10:00:21 +08:00
Pan	035c7d78f1	docs: change some http links to https	2019-04-11 09:42:44 +08:00
Pan	aa9d48905f	[release] 4.0.1	2019-04-10 15:54:47 +08:00
花裤衩	9cba45e971	fix[Sidebar]: fixed external link bug (#1870 )	2019-04-10 10:12:16 +08:00
Pan	dbee6ff707	refactor[mock-server]: refactor mock-server #1860	2019-04-09 14:25:14 +08:00
derrick	b627d3d0ba	fix[TagsView]: fixed close last page bug(#1866 )	2019-04-09 12:56:57 +08:00
花裤衩	8f45dbe328	feature[Icons]: add element-ui icons demo (#1865 )	2019-04-09 09:58:08 +08:00
Pan	342b7b428a	fix[Chore]: add @vue/cli-plugin-eslint	2019-04-08 22:05:10 +08:00
Pan	c833cb6efa	perf[Chore]: optimization.splitChunks adapt cnpm module name	2019-04-08 21:45:10 +08:00
Pan	afb62edc58	fix[Sidebar]: fixed sidebar background css bug	2019-04-08 18:10:41 +08:00
MaYuanhai	0358667a73	perf[Login]: password input add caps tooltip (#1845 )	2019-04-08 14:13:07 +08:00
花裤衩	e3b6602bbf	fix[Sidebar]: fixed sidebar scrollbar bug (#1853 )	2019-04-08 13:02:41 +08:00
花裤衩	79e2a604af	feature[Sidebar]: add activeMenu option (#1833 )	2019-04-08 12:58:33 +08:00
Pan	083a4ada9d	perf[request.js]: optimize error message	2019-04-08 11:08:06 +08:00
花裤衩	90b7c2fbde	feature[Mock]: mock-server support hot reload (#1850 ) https://github.com/PanJiaChen/vue-element-admin/issues/1849	2019-04-08 11:01:24 +08:00
花裤衩	f11839c8a4	docs: refine i18n (#1848 )	2019-04-07 23:10:14 +08:00
anson	7492e2097f	fix[ErrorLog]: fixed error log dialog z-index bug (#1844 ) https://github.com/PanJiaChen/vue-element-admin/issues/1830	2019-04-04 17:51:44 +08:00
Pan	770753eff2	fix[request.js]: fixed missing return	2019-04-04 17:43:12 +08:00
花裤衩	0d40222b64	fix[Drag]: fixed drag bug in firefox (#1841 )	2019-04-04 16:21:45 +08:00
Estelle00	e363c7a77b	feature[Vuex]: auto import vuex modules(#1815 )	2019-04-04 14:37:01 +08:00
花裤衩	c923726464	fix[TagsView]: fixed z-index bug (#1836 )	2019-04-04 13:07:18 +08:00
花裤衩	43115e5538	perf: optimize page view name (#1835 )	2019-04-04 12:58:37 +08:00
Pan	184125bdd3	fix[Guide]: fixed missing component id	2019-04-03 18:19:35 +08:00
Pan	25414f1fd9	fix[Guide]: fixed guide demo bug	2019-04-03 17:52:30 +08:00
Pan	cba0b789d0	chore: update issue template	2019-04-03 14:28:03 +08:00
Pan	4ad51be2db	chore: add issue template	2019-04-03 14:23:44 +08:00
MaYuanhai	a1708e9b68	perf: select demo add default-first-option 其实这个属性还是看作者写菜单模糊搜索下拉框时候发现的，觉得体验非常棒。虽然文章模块这里只是一个示例，但是我觉得还是加上比较好。	2019-04-03 13:40:24 +08:00
Pan	55fa5acb85	perf: optimize the code of el-table slot-scope	2019-04-02 16:32:51 +08:00
Pan	a8c6e11ee6	fix[Css]: fixed github-corner css bug	2019-04-02 10:39:26 +08:00
Pan	26d1bf09fd	fix[Mock]: fixed mock bug	2019-04-01 17:37:37 +08:00
花裤衩	b94e69be6f	[release] 4.0.0 (#1291 ) * fix[ExternalLink]: fixed bug when url include chinese #1182 * feature: support Spanish(#1196) * fix[MockJS]: fix bug with withCredentials after using mockjs (#1194) * 修复 Mock 导致请求丢失 Cookie 的问题修复 Mock 导致 Cookie 丢失的问题，只有在 XHR.open() 周期时，自定义的 withCredentials 会被挂载，此时检查是否是未被拦截的 xhr，并挂载自定义的 withCredentials ，无则默认为 false * update readme * perf[tagsView]: refactor the moveToTarget function (#1195) * fix[tagsView]:fixed visited view move to currentTag * edit the scroll regular friendly * tweak * fix[tagsView]: fixed moveToCurrentTag bug * feature: add pagination component (#1213) * fix[TagsView]: fixed update tags title demo bug (#1223) * chore: temporary hack cssnano bug #1222 * [release] 3.9.2 * chore: restore the hack of cssnano bug https://github.com/cssnano/cssnano/issues/643 * add an example of sort data by table (#1236) * feature: add drag select component (#1249) * feat: perfect migrate to @vue/cli-service, upgrade vue babel version (#1267) * feat: perfect migrate to @vue/cli-service, upgrade vue babel version 1. update to @vue/cli-service@3.0.5, @babel/core@7.0.0 2. use vue-cli service replace config file in build/ and config/ 3. upgrade vue and babel configuration 4. solve the svg-sprite config problem #980 refs: #932 #1087 #980 #1056 * fix: fix breadcrumb dependency * fix: fix index template and static assets load with vue-cli 3 * fix: fix import driver.js in guide page * refactor(mock): mak mock api compatible with both web-view and webpack server 1. 把 Mockjs 功能移到 server 端中间件，同时也兼容前端直接劫持 XHR 2. dev 环境下默认作为 express 中间件通过 webpack server 提供 mock api 3. prod 构建时，默认在前端用 Mockjs 劫持 XHR benefits: - dev 开发调试时能直接看到 XHR 请求，方便调试网络，能和后端对接联调 - 避开在开发时因为 Mockjs 引起的网络 bug - prod 构建时劫持 XHR，保证本项目的 Github Pages preview 能正常显示 (逻辑和 error-log 一样) - 前后台使用的 mock 是同一份代码，不会增加维护负担 ref: [#562](https://github.com/PanJiaChen/vue-element-admin/issues/562#issuecomment-378116233) * update requires the lowest version of node * add favicon * fix(TreeTable): fix `Array.prototype.concat` on custom-tree-table page * update * add test * fix bug * fix[Charts]: fixed charts resize mixins bug #1285 (#1290) * perf[Tinymce]: add searchreplace plugin * perf[avatar]:minimize the selected area of avatar on the mobile phone when user clicked avatar (#1304) * refine css * fix[DragSelect]: fixed querySelectorAll bug * perf[DragSelect]: add $listeners * fix link * fix[Breadcurmb]: fixed pathCompile bug * fix[Breadcurmb]: fixed router-link bug * perf[style]: use webpack alias instead of hard code src path (#1338) * perf[style]: use webpack alias instead of hard code src path * add sponsors * fix import path bug * update vue-router to fixed url path for non ascii urls #1362 * fix[Pagination]: apply PageSizes property to el-pagination (#1355) Apply PageSizes property to el-pagination * update dependence * add tui.editor (#1374) * tweak * add preview * fix return back bug * update guide page * fix[Tinymce]: fixed fullScreen bug #1400 * feat[Breadcrumb]: add hide Breadcrumb option #1442 * perf: use WeChat 7.0 new version icon color * refactor[login]: refactor login page style * perf[ScrollPane]: refine moveToTarget code (#1460) * feature[PDF]: add PDF demo (#1469) * perf[v-permission]: refine v-permission demo * perf[Sidebar]: refine sidebar store #1473 (#1474) * refine: GetUserInfo error message * fix typo (#1505) * perf: add sidebar width to variables.scss (#1494) * tweak * fix[ThemePicker]: fixed bug when oldVal is null (#1517) * update README.md * fix[Breadcrumb]: fixed eslint error (#1521) * fix[DndList]: fixed drag bug (#1527) https://github.com/PanJiaChen/vue-element-admin/issues/1524 * pref[Hamburger]: refactor Hamburger component (#1528) * 美化侧栏菜单切换按钮 * tweak * perf[Login Form]: optimize eye icon style (#1545) * optimiz: eye icon style for login form * change eye-open svg * perf[Sticky]: export reset method (#1550) * perf[Sticky]: refine width default value * perf[utils]: refine parseTime function (#1546) * 优化 parseTime 修复传入的时间戳是字符串类型，不能转换时间的问题例：parseTime("1548221490638") * Update index.js * perf[UploadExcel]: optimized code (#1552) * perf: adjust the import order to make it more elegant #1537 * perf[Sidebar]: use sass variables in vue template * perf[Style]: optimize the sidebar style to make it better to set (#1568) * perf[SizeSelect]: add default size option (#1566) * fix[SIdebar]: fixed bug in mobile #1567 (#1569) * perf: fixed eslint errors * perf[Lang]: make up for miss keywords * perf: optimize some code * perf[Navbar]: refactor navbar style * perf[Login]: refine css * feature[Navbar]: add header-search component(#1591) * fix[Screenfull]: fix screenfull click bug * perf[Screenfull]: refactor screenfull component * fix[Screenfull]: fix screenfull bug (#1603) * fix typo * fearure[TagsView]: add affix option (#1577) * perf[utils]: optimize code * perf[utils]: optimizate variable name * perf[Navbar]: add scroll bar when the subMenu is too long (#1619) * perf[ThemePicker]: refine updateStyle function (#554) * theme replacing should cut tons of irrelevant css * perf[ResizeHandler]: optimized the judgment of isMobile (#1633) perf[ResizeHandler]: optimized the judgment of isMobile * fix[Sidebar]: fixed infinite loop bug(#1333) * fixed infinite loop Bug when in hasOneShowingChild Edit the onlyOneChild * tweak * fix[Sidebar]: data should return a object * perf[Sidebar]: optimize code logic (#1349) * fix[TagsView]: fixed refresh affixed-tag bug (#1653) * perf[utils.js]: refactor byteLength function (#1650) * perf[TagsView]: refine code * perf[TagsView]: set the scrollPane as a business component (#1660) * fix[DragTable]: support multiple drag-table (#1666) * perf[Tree-Table]: refactor tree-table * perf[Tree-Table]: organize the structure and add documentation (#1673) * fix[Sidebar]: fixed nested router hover bug * update version * set preserveWhitespace * lint code * fix jest test case * update config * bump * remove empty file * docs: add link * fix[Sidebar]: fixed collapse animation problem (#1690) * fix[Tree-Table]: fixed update item data bug (#1692) * fix[Waves-Directive]: fixed v-waves does not support update (#1705) * update husky * rm cli-plugin-eslint * add settings (#1707) * refine settings * fix[utils]: fixed param2Obj not decoding plus sign (#1712) * feature[Directive]: add auto-height table directive (#1702) * fix bug * feature[Permission]: add role permission management page (#1605) * feature[Excel]: support export merged header export (#1718) * feature[Excel]: add export merge header excel demo * lint * refine theme color * add role mock * tweak mock * fix[Excel]: fixed export merge-header excel bug * refine code * add ThemePicker to setting * fix[HeaderSearch]: fixed bug in vue2.6+ (#1733) * fix[Sticky]: fixed bug when set stickyTop * perf[Sticky]: refine demo * refine code * tweak mock * vuex add namespaced * fix[Excel]: fixed export bug (#1736) * rm * refactor permission * perf[ThemePicker]: add predefine (#1743) * fix[Utils]: fixed deepClone error msg (#1748) * feature: add fixedHeader settings * fix style in mobile * fix chore * perf[Eslint]: update eslint rules * feature: add create template (#1762) * add comment * update vue.config.js * feature: add sidebar logo (#1767) * rm * perf settings * bump * refine script and css * update * refine settings * refine config * update docs * refine * rm * fix jest * add theme setting * dump vue-cli * perf: remove redundant code * update element-ui * fix sticky demo bug * docs * fixed password input bug * refine login form css * remove tree-table * update version * mock error * refine layout name * refine	2019-04-01 17:07:16 +08:00
MaYuanhai	96d3cfa215	perf[Login]: optimize input focus interaction (#1798 )	2019-03-29 12:55:07 +08:00
				`@@ -0,0 +1 @@`
				<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M88.883 119.565c-7.284 0-19.434 2.495-21.333 8.25v.127c-4.232.13-5.222 0-7.108 0-1.895-5.76-14.045-8.256-21.333-8.256H0V0h42.523c9.179 0 17.109 5.47 21.47 13.551C68.352 5.475 76.295 0 85.478 0H128v119.57l-39.113-.005h-.004zM60.442 24.763c0-9.651-8.978-16.507-17.777-16.507H7.108V111.43H39.11c7.054-.14 18.177.082 21.333 6.12v-4.628c-.134-5.722-.004-13.522 0-13.832V27.413l.004-2.655-.004.005zm60.442-16.517h-35.55c-8.802 0-17.78 6.856-17.78 16.493v74.259c.004.32.138 8.115 0 13.813v4.627c3.155-6.022 14.279-6.26 21.333-6.114h32V8.25l-.003-.005z"/></svg>
				`@@ -1 +0,0 @@`
				`<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg"><path d="M11.576 547.9l282.848 126.404 409.285-383.26 137.057-128.341L361.234 714.22l362.77 146.362c8.742 3.327 18.733-1.33 21.855-10.644v-.666L999.985.374 10.327 514.636c-8.742 4.657-11.864 15.302-8.117 24.616 2.497 3.991 5.62 7.318 9.366 8.648zM360.61 999.626l141.112-161.663-141.112-61.206v222.869z"/></svg>`