Merge branch 'master' of https://github.com/mayunhai/vue-element-admin

2019-06-30 09:38:48 +08:00
parent 9a50abba7e 7c89ab8d0c
commit a630ec9fcb
141 changed files with 1684 additions and 2103 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -0,0 +1,4 @@
+# These are supported funding model platforms
+
+patreon: panjiachen
+custom: https://panjiachen.github.io/vue-element-admin-site/donate
--- a/.github/ISSUE_TEMPLATE/question.md
+++ b/.github/ISSUE_TEMPLATE/question.md
@@ -12,3 +12,24 @@ about: Asking questions about use
    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.
 -->
+
+#### 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/.postcssrc.js
+++ b/.postcssrc.js
@@ -1,8 +0,0 @@
-// https://github.com/michael-ciniawsky/postcss-load-config
-
-module.exports = {
-  "plugins": {
-    // 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.es.md
+++ b/README.es.md
@@ -0,0 +1,216 @@
+<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="Estado de Construcción">
+  </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="Licencia">
+  </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="Liberación Github">
+  </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.github.io/vue-element-admin-site/donate">
+    <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="Donación">
+  </a>
+</p>
+
+Español | [English](./README.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md)
+
+## Introducción
+
+[vue-element-admin](https://panjiachen.github.io/vue-element-admin) es una interfáz de administración preparada para producción. Está basada en [vue](https://github.com/vuejs/vue) y usa [element-ui](https://github.com/ElemeFE/element) como conjunto de herramientas de interfáz de usuario.
+
+Vue Element Admin es una solución práctica basada en la nueva plataforma de desarrollo de vue, construida con soporte a i18 para el manejo de múltiples lenguajes, plantillas estándares para aplicaciones de negocio y un conjunto de asombrosas características. Esta herramienta ayuda a construir largas y complejas Aplicacones de una sola página (SPA). Creo que lo que necesites hacer, este proyecto te ayudará.
+
+- [Vista Prévia de la Aplicación](https://panjiachen.github.io/vue-element-admin)
+
+- [Documentación](https://panjiachen.github.io/vue-element-admin-site/)
+
+- [Canal de Gitter](https://gitter.im/vue-element-admin/discuss)
+
+- [Para Donaciones](https://panjiachen.github.io/vue-element-admin-site/donate/)
+
+- [Enlace de Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+
+- [Canal de Gitee](https://panjiachen.gitee.io/vue-element-admin/)
+
+- Plantilla base recomendada para usar: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
+- Aplicación de Escritorio: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+- Plantilla de Typescript: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Créditos: [@Armour](https://github.com/Armour))
+
+**Después de la versión `v4.1.0+`, la rama por defecto master no tendrá soporte para i18n. Por favor use [i18n](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), los cambios serán incluidos en la rama master**
+
+**la versión actual es `v4.0+` construida con `vue-cli`. Si encuentra algún problema, por favor coloque un [issue](https://github.com/PanJiaChen/vue-element-admin/issues/new). Si desea usar la versión anterior, puede cambiar de rama a [tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0), no relacionado con `vue-cli`**
+
+**Este proyecto no está soportado para versiones muy viejas de navegadores (e.g. IE).**
+
+## Preparación
+
+Necesita instalar [node](https://nodejs.org/) y [git](https://git-scm.com/) localmente. El proyecto es basado en [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), toda la solicitud de datos simulada se realiza a través de [Mock.js](https://github.com/nuysoft/Mock).
+Entendiendo y aprendiendo esto pudiera ayudarle con su proyecto.
+
+ <p align="center">
+  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
+</p>
+
+## Patrocinantes
+
+Se un patrocinante y pon tu logo en nuestro README on GitHub con un enlace directo a tu sitio web. [[Se un Patrocinante]](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>Plantilla de Dashboard de administración hecha con Vue, React y Angular.</p>
+
+## Características
+
+```
+- Iniciar / Cerrar Sesión
+
+- Permisos de Authentication
+  - Página de Permisos
+  - Directivas de permisos
+  - Página de configuración de permisos
+  - Autenticación por dos pasos
+
+- Construcción Multi-entorno
+  - dev sit stage  producción
+
+- Características Globales
+  - I18n
+  - Temas dinámicos
+  - Dynamic sidebar (soporte a rutas multi-nivel)
+  - Barra de rutas dinámica
+  - Tags-view (Tab page Support right-click operation)
+  - Svg Sprite
+  - Datos de simulación con Mock
+  - Pantalla completa
+  - Responsive Sidebar
+
+- Editor
+  - Editor de Texto Enriquecido
+  - Editor Markdown
+  - Editor JSON
+
+- Excel
+  - Exportación a Excel
+  - Carga de Excel
+  - Visualización de Excel
+  - Exportación como zip
+
+- Tabla
+  - Tabla Dinámica
+  - Tabla con Arrastrar y Soltar
+  - Tabla de edición en línea
+
+- Páginas de Error
+  - 401
+  - 404
+
+- Componentes
+  - Carga de Avatar
+  - Botón para subir al inicio
+  - Arrastrar y Soltar (Diaglogo)
+  - Arrastrar y Soltar (Seleccionar)
+  - Arrastrar y Soltar (Kanban)
+  - Arrastrar y Soltar (Lista)
+  - Panel de división
+  - Componente para soltar archivos
+  - Adhesión de objetos
+  - Contador hasta
+
+- Ejemplo Avanzado
+- Registro de Errores
+- Tablero de indicadores
+- Página de Guías
+- ECharts (Gráficos)
+- Portapapeles
+- Convertidor de Markdown a html
+```
+
+## Iniciando
+
+```bash
+# clone el proyecto
+git clone https://github.com/PanJiaChen/vue-element-admin.git
+
+# vaya al directorio clonado
+cd vue-element-admin
+
+# instale las dependencias
+npm install
+
+# corra el proyecto como desarrollador
+npm run dev
+```
+
+Automáticamente se abrirá el siguiente enlace en su navegador http://localhost:9527
+
+## Construcción
+
+```bash
+# Construcción para entornos de prueba
+npm run build:stage
+
+# Construcción para entornos de producción
+npm run build:prod
+```
+
+## Avanzado
+
+```bash
+# Vista previa con efectos de entorno
+npm run preview
+
+# Vista previa  con efectos + análisis de recursos estáticos
+npm run preview -- --report
+
+# Chequeo de formato de código
+npm run lint
+
+# Chequeo de formato de código y auto-corrección
+npm run lint -- --fix
+```
+
+Vaya a [Documentación](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) para mayor información
+
+## Registro de Cambios
+
+Los cambios detallados por cada liberación se encuentran en [notas de liberación](https://github.com/PanJiaChen/vue-element-admin/releases).
+
+## Demostración en línea
+
+[Vista Prévia de la Aplicación](https://panjiachen.github.io/vue-element-admin)
+
+## Donación
+
+Si este proyecto es de mucha ayuda para ti, puedes comprarle al autor un vaso de jugo :tropical_drink:
+
+![Donar](https://wpimg.wallstcn.com/bd273f0d-83a0-4ef2-92e1-9ac8ed3746b9.png)
+
+[dona por Paypal](https://www.paypal.me/panfree23)
+
+[Comprame un Café](https://www.buymeacoffee.com/Pan)
+
+## Navegadores Soportados
+
+Navegadores modernos e 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| últimas 2 versiones| últimas 2 versiones| últimas 2 versiones
+
+## Licencia
+
+[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
+
+Copyright (c) 2017-presente PanJiaChen
--- 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) | [Spanish](./README.es.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
@@ -26,7 +26,7 @@
  </a>
 </p>

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

 ## Introduction

@@ -50,7 +50,9 @@ It is a magical vue admin based on the newest development stack of vue, built-in
 - 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))

-**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'**
+**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**
+
+**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`**

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

--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -26,7 +26,7 @@
  </a>
 </p>

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

 ## 简介

@@ -50,10 +50,12 @@
 - 桌面端: [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))

-**目前版本为 `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`**
+**`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)

 ## 前序准备
@@ -66,6 +68,7 @@
 - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
 - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
 - [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
+- [手摸手，带你用vue撸后台 系列五(v4.0新版本)](https://juejin.im/post/5c92ff94f265da6128275a85)
 - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
 - [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
 - [手摸手，带你用合理的姿势使用 webpack4（上）](https://juejin.im/post/5b56909a518825195f499806)
@@ -161,7 +164,7 @@ cd vue-element-admin
 # 安装依赖
 npm install

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

 # 启动服务
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,12 +1,9 @@
 module.exports = {
-  verbose: true,
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
-  transformIgnorePatterns: [
-    'node_modules/(?!(babel-jest|jest-vue-preprocessor)/)'
-  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
-    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  moduleNameMapper: {
--- a/mock/mock-server.js
+++ b/mock/mock-server.js
@@ -48,6 +48,7 @@ module.exports = app => {
    ignoreInitial: true
  }).on('all', (event, path) => {
    if (event === 'change' || event === 'add') {
+      try {
        // remove mock routes stack
        app._router.stack.splice(mockStartIndex, mockRoutesLength)

@@ -59,6 +60,9 @@ module.exports = app => {
        mockStartIndex = mockRoutes.mockStartIndex

        console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed  ${path}`))
+      } catch (error) {
+        console.log(chalk.redBright(error))
+      }
    }
  })
 }
--- a/mock/role/routes.js
+++ b/mock/role/routes.js
@@ -41,7 +41,7 @@ export const constantRoutes = [
        path: 'dashboard',
        component: 'views/dashboard/index',
        name: 'Dashboard',
-        meta: { title: 'dashboard', icon: 'dashboard', noCache: true, affix: true }
+        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
      }
    ]
  },
@@ -53,7 +53,7 @@ export const constantRoutes = [
        path: 'index',
        component: 'views/documentation/index',
        name: 'Documentation',
-        meta: { title: 'documentation', icon: 'documentation', affix: true }
+        meta: { title: 'Documentation', icon: 'documentation', affix: true }
      }
    ]
  },
@@ -66,7 +66,7 @@ export const constantRoutes = [
        path: 'index',
        component: 'views/guide/index',
        name: 'Guide',
-        meta: { title: 'guide', icon: 'guide', noCache: true }
+        meta: { title: 'Guide', icon: 'guide', noCache: true }
      }
    ]
  }
@@ -79,7 +79,7 @@ export const asyncRoutes = [
    redirect: '/permission/index',
    alwaysShow: true,
    meta: {
-      title: 'permission',
+      title: 'Permission',
      icon: 'lock',
      roles: ['admin', 'editor']
    },
@@ -89,7 +89,7 @@ export const asyncRoutes = [
        component: 'views/permission/page',
        name: 'PagePermission',
        meta: {
-          title: 'pagePermission',
+          title: 'Page Permission',
          roles: ['admin']
        }
      },
@@ -98,7 +98,7 @@ export const asyncRoutes = [
        component: 'views/permission/directive',
        name: 'DirectivePermission',
        meta: {
-          title: 'directivePermission'
+          title: 'Directive Permission'
        }
      },
      {
@@ -106,7 +106,7 @@ export const asyncRoutes = [
        component: 'views/permission/role',
        name: 'RolePermission',
        meta: {
-          title: 'rolePermission',
+          title: 'Role Permission',
          roles: ['admin']
        }
      }
@@ -121,7 +121,7 @@ export const asyncRoutes = [
        path: 'index',
        component: 'views/icons/index',
        name: 'Icons',
-        meta: { title: 'icons', icon: 'icon', noCache: true }
+        meta: { title: 'Icons', icon: 'icon', noCache: true }
      }
    ]
  },
@@ -132,7 +132,7 @@ export const asyncRoutes = [
    redirect: 'noRedirect',
    name: 'ComponentDemo',
    meta: {
-      title: 'components',
+      title: 'Components',
      icon: 'component'
    },
    children: [
@@ -140,49 +140,49 @@ export const asyncRoutes = [
        path: 'tinymce',
        component: 'views/components-demo/tinymce',
        name: 'TinymceDemo',
-        meta: { title: 'tinymce' }
+        meta: { title: 'Tinymce' }
      },
      {
        path: 'markdown',
        component: 'views/components-demo/markdown',
        name: 'MarkdownDemo',
-        meta: { title: 'markdown' }
+        meta: { title: 'Markdown' }
      },
      {
        path: 'json-editor',
        component: 'views/components-demo/json-editor',
        name: 'JsonEditorDemo',
-        meta: { title: 'jsonEditor' }
+        meta: { title: 'Json Editor' }
      },
      {
        path: 'split-pane',
        component: 'views/components-demo/split-pane',
        name: 'SplitpaneDemo',
-        meta: { title: 'splitPane' }
+        meta: { title: 'SplitPane' }
      },
      {
        path: 'avatar-upload',
        component: 'views/components-demo/avatar-upload',
        name: 'AvatarUploadDemo',
-        meta: { title: 'avatarUpload' }
+        meta: { title: 'Avatar Upload' }
      },
      {
        path: 'dropzone',
        component: 'views/components-demo/dropzone',
        name: 'DropzoneDemo',
-        meta: { title: 'dropzone' }
+        meta: { title: 'Dropzone' }
      },
      {
        path: 'sticky',
        component: 'views/components-demo/sticky',
        name: 'StickyDemo',
-        meta: { title: 'sticky' }
+        meta: { title: 'Sticky' }
      },
      {
        path: 'count-to',
        component: 'views/components-demo/count-to',
        name: 'CountToDemo',
-        meta: { title: 'countTo' }
+        meta: { title: 'Count To' }
      },
      {
        path: 'mixin',
@@ -194,31 +194,31 @@ export const asyncRoutes = [
        path: 'back-to-top',
        component: 'views/components-demo/back-to-top',
        name: 'BackToTopDemo',
-        meta: { title: 'backToTop' }
+        meta: { title: 'Back To Top' }
      },
      {
        path: 'drag-dialog',
        component: 'views/components-demo/drag-dialog',
        name: 'DragDialogDemo',
-        meta: { title: 'dragDialog' }
+        meta: { title: 'Drag Dialog' }
      },
      {
        path: 'drag-select',
        component: 'views/components-demo/drag-select',
        name: 'DragSelectDemo',
-        meta: { title: 'dragSelect' }
+        meta: { title: 'Drag Select' }
      },
      {
        path: 'dnd-list',
        component: 'views/components-demo/dnd-list',
        name: 'DndListDemo',
-        meta: { title: 'dndList' }
+        meta: { title: 'Dnd List' }
      },
      {
        path: 'drag-kanban',
        component: 'views/components-demo/drag-kanban',
        name: 'DragKanbanDemo',
-        meta: { title: 'dragKanban' }
+        meta: { title: 'Drag Kanban' }
      }
    ]
  },
@@ -228,7 +228,7 @@ export const asyncRoutes = [
    redirect: 'noRedirect',
    name: 'Charts',
    meta: {
-      title: 'charts',
+      title: 'Charts',
      icon: 'chart'
    },
    children: [
@@ -236,19 +236,19 @@ export const asyncRoutes = [
        path: 'keyboard',
        component: 'views/charts/keyboard',
        name: 'KeyboardChart',
-        meta: { title: 'keyboardChart', noCache: true }
+        meta: { title: 'Keyboard Chart', noCache: true }
      },
      {
        path: 'line',
        component: 'views/charts/line',
        name: 'LineChart',
-        meta: { title: 'lineChart', noCache: true }
+        meta: { title: 'Line Chart', noCache: true }
      },
      {
        path: 'mixchart',
        component: 'views/charts/mixChart',
        name: 'MixChart',
-        meta: { title: 'mixChart', noCache: true }
+        meta: { title: 'Mix Chart', noCache: true }
      }
    ]
  },
@@ -258,7 +258,7 @@ export const asyncRoutes = [
    redirect: '/nested/menu1/menu1-1',
    name: 'Nested',
    meta: {
-      title: 'nested',
+      title: 'Nested',
      icon: 'nested'
    },
    children: [
@@ -266,33 +266,33 @@ export const asyncRoutes = [
        path: 'menu1',
        component: 'views/nested/menu1/index',
        name: 'Menu1',
-        meta: { title: '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' }
+            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' },
+            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' }
+                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' }
+                meta: { title: 'Menu1-2-2' }
              }
            ]
          },
@@ -300,7 +300,7 @@ export const asyncRoutes = [
            path: 'menu1-3',
            component: 'views/nested/menu1/menu1-3',
            name: 'Menu1-3',
-            meta: { title: 'menu1-3' }
+            meta: { title: 'Menu1-3' }
          }
        ]
      },
@@ -308,7 +308,7 @@ export const asyncRoutes = [
        path: 'menu2',
        name: 'Menu2',
        component: 'views/nested/menu2/index',
-        meta: { title: 'menu2' }
+        meta: { title: 'Menu2' }
      }
    ]
  },
@@ -319,7 +319,7 @@ export const asyncRoutes = [
    redirect: '/example/list',
    name: 'Example',
    meta: {
-      title: 'example',
+      title: 'Example',
      icon: 'example'
    },
    children: [
@@ -327,20 +327,20 @@ export const asyncRoutes = [
        path: 'create',
        component: 'views/example/create',
        name: 'CreateArticle',
-        meta: { title: 'createArticle', icon: 'edit' }
+        meta: { title: 'Create Article', icon: 'edit' }
      },
      {
        path: 'edit/:id(\\d+)',
        component: 'views/example/edit',
        name: 'EditArticle',
-        meta: { title: 'editArticle', noCache: true },
+        meta: { title: 'Edit Article', noCache: true },
        hidden: true
      },
      {
        path: 'list',
        component: 'views/example/list',
        name: 'ArticleList',
-        meta: { title: 'articleList', icon: 'list' }
+        meta: { title: 'Article List', icon: 'list' }
      }
    ]
  },
@@ -353,7 +353,7 @@ export const asyncRoutes = [
        path: 'index',
        component: 'views/tab/index',
        name: 'Tab',
-        meta: { title: 'tab', icon: 'tab' }
+        meta: { title: 'Tab', icon: 'tab' }
      }
    ]
  },
@@ -364,7 +364,7 @@ export const asyncRoutes = [
    redirect: 'noRedirect',
    name: 'ErrorPages',
    meta: {
-      title: 'errorPages',
+      title: 'Error Pages',
      icon: '404'
    },
    children: [
@@ -372,13 +372,13 @@ export const asyncRoutes = [
        path: '401',
        component: 'views/error-page/401',
        name: 'Page401',
-        meta: { title: 'page401', noCache: true }
+        meta: { title: 'Page 401', noCache: true }
      },
      {
        path: '404',
        component: 'views/error-page/404',
        name: 'Page404',
-        meta: { title: 'page404', noCache: true }
+        meta: { title: 'Page 404', noCache: true }
      }
    ]
  },
@@ -392,7 +392,7 @@ export const asyncRoutes = [
        path: 'log',
        component: 'views/error-log/index',
        name: 'ErrorLog',
-        meta: { title: 'errorLog', icon: 'bug' }
+        meta: { title: 'Error Log', icon: 'bug' }
      }
    ]
  },
@@ -403,7 +403,7 @@ export const asyncRoutes = [
    redirect: '/excel/export-excel',
    name: 'Excel',
    meta: {
-      title: 'excel',
+      title: 'Excel',
      icon: 'excel'
    },
    children: [
@@ -411,25 +411,25 @@ export const asyncRoutes = [
        path: 'export-excel',
        component: 'views/excel/export-excel',
        name: 'ExportExcel',
-        meta: { title: 'exportExcel' }
+        meta: { title: 'Export Excel' }
      },
      {
        path: 'export-selected-excel',
        component: 'views/excel/select-excel',
        name: 'SelectExcel',
-        meta: { title: 'selectExcel' }
+        meta: { title: 'Select Excel' }
      },
      {
        path: 'export-merge-header',
        component: 'views/excel/merge-header',
        name: 'MergeHeader',
-        meta: { title: 'mergeHeader' }
+        meta: { title: 'Merge Header' }
      },
      {
        path: 'upload-excel',
        component: 'views/excel/upload-excel',
        name: 'UploadExcel',
-        meta: { title: 'uploadExcel' }
+        meta: { title: 'Upload Excel' }
      }
    ]
  },
@@ -439,13 +439,13 @@ export const asyncRoutes = [
    component: 'layout/Layout',
    redirect: '/zip/download',
    alwaysShow: true,
-    meta: { title: 'zip', icon: 'zip' },
+    meta: { title: 'Zip', icon: 'zip' },
    children: [
      {
        path: 'download',
        component: 'views/zip/index',
        name: 'ExportZip',
-        meta: { title: 'exportZip' }
+        meta: { title: 'Export Zip' }
      }
    ]
  },
@@ -459,7 +459,7 @@ export const asyncRoutes = [
        path: 'index',
        component: 'views/pdf/index',
        name: 'PDF',
-        meta: { title: 'pdf', icon: 'pdf' }
+        meta: { title: 'PDF', icon: 'pdf' }
      }
    ]
  },
@@ -478,7 +478,7 @@ export const asyncRoutes = [
        path: 'index',
        component: 'views/theme/index',
        name: 'Theme',
-        meta: { title: 'theme', icon: 'theme' }
+        meta: { title: 'Theme', icon: 'theme' }
      }
    ]
  },
@@ -492,7 +492,7 @@ export const asyncRoutes = [
        path: 'index',
        component: 'views/clipboard/index',
        name: 'ClipboardDemo',
-        meta: { title: 'clipboardDemo', icon: 'clipboard' }
+        meta: { title: 'Clipboard Demo', icon: 'clipboard' }
      }
    ]
  },
@@ -505,7 +505,7 @@ export const asyncRoutes = [
        path: 'index',
        component: 'views/i18n-demo/index',
        name: 'I18n',
-        meta: { title: 'i18n', icon: 'international' }
+        meta: { title: 'I18n', icon: 'international' }
      }
    ]
  },
@@ -516,7 +516,7 @@ export const asyncRoutes = [
    children: [
      {
        path: 'https://github.com/PanJiaChen/vue-element-admin',
-        meta: { title: 'externalLink', icon: 'link' }
+        meta: { title: 'External Link', icon: 'link' }
      }
    ]
  },
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-element-admin",
-  "version": "4.0.1",
+  "version": "4.2.1",
  "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",
@@ -10,7 +10,7 @@
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
-    "test:unit": "vue-cli-service test:unit",
+    "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"
@@ -64,7 +64,6 @@
    "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.4",
    "vuedraggable": "2.20.0",
@@ -79,6 +78,7 @@
    "@vue/cli-plugin-unit-jest": "3.5.3",
    "@vue/cli-service": "3.5.3",
    "@vue/test-utils": "1.0.0-beta.29",
+    "autoprefixer": "^9.5.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "23.6.0",
@@ -108,7 +108,6 @@
  },
  "browserslist": [
    "> 1%",
-    "last 2 versions",