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

2018-08-22 11:13:14 +08:00 · 2018-08-22 11:13:14 +08:00 · 1fd60d0d8c
parent 17e65a8537 d5a8fb1e71
commit 1fd60d0d8c
143 changed files with 2194 additions and 1592 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,7 +1,7 @@
 module.exports = {
  root: true,
-  parser: 'babel-eslint',
  parserOptions: {
+    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
@ -9,22 +9,19 @@ module.exports = {
    node: true,
    es6: true,
  },
-  extends: 'eslint:recommended',
-  // required to lint *.vue files
-  plugins: [
-    'html'
-  ],
-  // check if imports actually resolve
-  'settings': {
-    'import/resolver': {
-      'webpack': {
-        'config': 'build/webpack.base.conf.js'
-      }
-    }
-  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+
  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
-  'rules': {
+  rules: {
+    "vue/max-attributes-per-line": [2, {
+      "singleline": 10,
+      "multiline": {
+        "max": 1,
+        "allowFirstLine": false
+      }
+    }],
+    "vue/name-property-casing": ["error", "PascalCase"],
    'accessor-pairs': 2,
    'arrow-spacing': [2, {
      'before': true,
@ -196,4 +193,3 @@ module.exports = {
    'array-bracket-spacing': [2, 'never']
  }
 }
-
--- 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.10-brightgreen.svg" alt="vue">
+    <img src="https://img.shields.io/badge/vue-2.5.17-brightgreen.svg" alt="vue">
  </a>
  <a href="https://github.com/ElemeFE/element">
-    <img src="https://img.shields.io/badge/element--ui-2.3.2-brightgreen.svg" alt="element-ui">
+    <img src="https://img.shields.io/badge/element--ui-2.4.6-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">
@ -38,25 +38,32 @@ It is a magical vue admin based on the newest development stack of vue, built-in

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

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

- - Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
- - Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-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)
+
+**This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.**
+
+**Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+**
+
+**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)**

 ## 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).
- Understanding and learning this knowledge in advance will greatly help the use of this project.
+Understanding and learning this knowledge in advance will greatly help the use of this project.

- **This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.**
-
- **Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+**
+---

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

 ## Features
+
 ```
 - Login / Logout

@ -136,6 +143,7 @@ npm run dev
 This will automatically open http://localhost:9527.

 ## Build
+
 ```bash
 # build for test environment
 npm run build:sit
@ -145,10 +153,14 @@ npm run build:prod
 ```

 ## Advanced
+
 ```bash
 # --report to build with bundle size analytics
 npm run build:prod --report

+# --generate a bundle size analytics. default: bundle-report.html
+npm run build:prod --generate_report
+
 # --preview to start a server in local to preview
 npm run build:prod --preview

@ -162,12 +174,15 @@ 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](http://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)
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@ -24,50 +24,58 @@

 ## 简介

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

 - [在线访问](http://panjiachen.github.io/vue-element-admin)

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

- [Gitter讨论组](https://gitter.im/vue-element-admin/discuss)
+- [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/zh/donate/)

+- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
+
+- [国内访问文档](https://panjiachen.gitee.io/vue-element-admin-site/zh/) 方便没翻墙的用户查看文档
+
 **本项目的定位是后台集成方案，不适合当基础模板来开发。**
- - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
- - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+
+- 模板建议使用: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
+- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+
+群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西，或者加入[qq 群](https://github.com/PanJiaChen/vue-element-admin/issues/602)
+
+**注意：该项目使用 element-ui@2.3.0+ 版本，所以最低兼容 vue@2.5.0+**
+
+**从`v3.8.0`开始使用`webpack4`。所以若还想使用`webpack3`开发，请使用该分支[webpack3](https://github.com/PanJiaChen/vue-element-admin/tree/webpack3)**
+
+**该项目不支持低版本浏览器(如 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/) 、[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)
- - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
- - [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
- - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
- - [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)

+- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
+- [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
+- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
+- [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
+- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
+- [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
+- [手摸手，带你用合理的姿势使用 webpack4（上）](https://juejin.im/post/5b56909a518825195f499806)
+- [手摸手，带你用合理的姿势使用 webpack4（下）](https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc)

- 或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西
-
- **如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**
-
- **本项目并不是一个脚手架，更倾向于是一个集成解决方案**
-
- **注意：该项目使用 element-ui@2.3.0+ 版本，所以最低兼容 vue@2.5.0+**
-
- **该项目不支持低版本浏览器(如ie)，有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
+**如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**

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

 ## 功能
+
 ```
 - 登录 / 注销

@ -132,22 +140,25 @@
 ```

 ## 开发
+
 ```bash
 # 克隆项目
 git clone https://github.com/PanJiaChen/vue-element-admin.git

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

 # 启动服务
 npm run dev
 ```
+
 浏览器访问 http://localhost:9527

 ## 发布
+
 ```bash
 # 构建测试环境
 npm run build:sit
@ -157,9 +168,13 @@ npm run build:prod
 ```

 ## 其它
+
 ```bash
 # --report to build with bundle size analytics
-npm run build:prod --report
+npm run build:prod
+
+# --generate a bundle size analytics. default: bundle-report.html
+npm run build:prod --generate_report

 # --preview to start a server in local to preview
 npm run build:prod --preview
@ -174,12 +189,15 @@ npm run lint -- --fix
 更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)

 ## Changelog
+
 Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).

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

 ## Donate
+
 如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 :tropical_drink:
 ![donate](https://panjiachen.github.io/donate/donation.png)

--- a/build/build.js
+++ b/build/build.js
@ -8,10 +8,12 @@ const chalk = require('chalk')
 const webpack = require('webpack')
 const config = require('../config')
 const webpackConfig = require('./webpack.prod.conf')
-var connect = require('connect');
+var connect = require('connect')
 var serveStatic = require('serve-static')

-const spinner = ora('building for ' + process.env.env_config + ' environment...')
+const spinner = ora(
+  'building for ' + process.env.env_config + ' environment...'
+)
 spinner.start()

 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
@ -19,13 +21,15 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), 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')
+    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'))
@ -33,24 +37,31 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
    }

    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'
-    ))
+    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 host = 'http://localhost:' + port
      const basePath = config.build.assetsPublicPath
      const app = connect()

-      app.use(basePath, serveStatic('./dist', {
-        'index': ['index.html', '/']
-      }))
+      app.use(
+        basePath,
+        serveStatic('./dist', {
+          index: ['index.html', '/']
+        })
+      )

-      app.listen(port, function () {
-        console.log(chalk.green(`> Listening at  http://localhost:${port}${basePath}`))
-      });
+      app.listen(port, function() {
+        console.log(
+          chalk.green(`> Listening at  http://localhost:${port}${basePath}`)
+        )
+      })
    }
  })
 })
--- a/build/check-versions.js
+++ b/build/check-versions.js
@ -4,8 +4,11 @@ const semver = require('semver')
 const packageConfig = require('../package.json')
 const shell = require('shelljs')

-function exec (cmd) {
-  return require('child_process').execSync(cmd).toString().trim()
+function exec(cmd) {
+  return require('child_process')
+    .execSync(cmd)
+    .toString()
+    .trim()
 }

 const versionRequirements = [
@ -24,23 +27,30 @@ if (shell.which('npm')) {
  })
 }

-module.exports = function () {
+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)
+      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(
+      chalk.yellow(
+        'To use this template, you must update following to modules:'
+      )
+    )
    console.log()

    for (let i = 0; i < warnings.length; i++) {
--- a/build/utils.js
+++ b/build/utils.js
@ -1,18 +1,19 @@
 'use strict'
 const path = require('path')
 const config = require('../config')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+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
+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) {
+exports.cssLoaders = function(options) {
  options = options || {}

  const cssLoader = {
@ -30,8 +31,22 @@ exports.cssLoaders = function (options) {
  }

  // generate loader string to be used with extract text plugin
-  function generateLoaders (loader, loaderOptions) {
-    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+  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({
@ -42,24 +57,16 @@ exports.cssLoaders = function (options) {
      })
    }

-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      return ExtractTextPlugin.extract({
-        use: loaders,
-        fallback: 'vue-style-loader'
-      })
-    } else {
-      return ['vue-style-loader'].concat(loaders)
-    }
+    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 }),
+    sass: generateLoaders('sass', {
+      indentedSyntax: true
+    }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
@ -67,7 +74,7 @@ exports.cssLoaders = function (options) {
 }

 // Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
+exports.styleLoaders = function(options) {
  const output = []
  const loaders = exports.cssLoaders(options)

--- a/build/vue-loader.conf.js
+++ b/build/vue-loader.conf.js
@ -1,22 +1,5 @@
 'use strict'
-const utils = require('./utils')
-const config = require('../config')
-const isProduction = process.env.NODE_ENV === 'production'
-const sourceMapEnabled = isProduction
-  ? config.build.productionSourceMap
-  : config.dev.cssSourceMap

 module.exports = {
-  loaders: utils.cssLoaders({
-    sourceMap: sourceMapEnabled,
-    extract: isProduction
-  }),
-  cssSourceMap: sourceMapEnabled,
-  cacheBusting: config.dev.cacheBusting,
-  transformToRequire: {
-    video: ['src', 'poster'],
-    source: 'src',
-    img: 'src',
-    image: 'xlink:href'
-  }
+  //You can set the vue-loader configuration by yourself.
 }
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@ -2,9 +2,10 @@
 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) {
+function resolve(dir) {
  return path.join(__dirname, '..', dir)
 }

@ -27,14 +28,15 @@ module.exports = {
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
-    publicPath: process.env.NODE_ENV === 'production'
-      ? config.build.assetsPublicPath
-      : config.dev.assetsPublicPath
+    publicPath:
+      process.env.NODE_ENV === 'production'
+        ? config.build.assetsPublicPath
+        : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
-      '@': resolve('src'),
+      '@': resolve('src')
    }
  },
  module: {
@ -48,7 +50,11 @@ module.exports = {
      {
        test: /\.js$/,
        loader: 'babel-loader?cacheDirectory',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+        include: [
+          resolve('src'),
+          resolve('test'),
+          resolve('node_modules/webpack-dev-server/client')
+        ]
      },
      {
        test: /\.svg$/,
@ -85,6 +91,7 @@ module.exports = {
      }
    ]
  },
+  plugins: [new VueLoaderPlugin()],
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@ -9,7 +9,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const portfinder = require('portfinder')

-function resolve (dir) {
+function resolve(dir) {
  return path.join(__dirname, '..', dir)
 }

@ -17,8 +17,12 @@ 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 })
+    rules: utils.styleLoaders({
+      sourceMap: config.dev.cssSourceMap,
+      usePostCSS: true
+    })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,
@ -39,7 +43,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
-      poll: config.dev.poll,
+      poll: config.dev.poll
    }
  },
  plugins: [
@ -47,8 +51,6 @@ const devWebpackConfig = merge(baseWebpackConfig, {
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
-    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
@ -57,7 +59,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
      favicon: resolve('favicon.ico'),
      title: 'vue-element-admin',
      path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
-    }),
+    })
  ]
 })

@ -73,14 +75,20 @@ module.exports = new Promise((resolve, reject) => {
      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
-      }))
+      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
@ -7,17 +7,23 @@ const merge = require('webpack-merge')
 const baseWebpackConfig = require('./webpack.base.conf')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const OptimizeCSSPlugin = require('optimize-css-assets-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) {
+function resolve(dir) {
  return path.join(__dirname, '..', dir)
 }

-const env = require('../config/'+process.env.env_config+'.env')
+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,
@ -28,37 +34,18 @@ const webpackConfig = merge(baseWebpackConfig, {
  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  output: {
    path: config.build.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+    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
    }),
-    new UglifyJsPlugin({
-      uglifyOptions: {
-        compress: {
-          warnings: false
-        }
-      },
-      sourceMap: config.build.productionSourceMap,
-      parallel: true
-    }),
    // extract css into its own file
-    new ExtractTextPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash].css'),
-      // Setting the following option to `false` will not extract CSS from codesplit chunks.
-      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
-      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
-      allChunks: false,
-    }),
-    // Compress extracted CSS. We are using this plugin so that possible
-    // duplicated CSS from different components can be deduped.
-    new OptimizeCSSPlugin({
-      cssProcessorOptions: config.build.productionSourceMap
-        ? { safe: true, map: { inline: false } }
-        : { safe: true }
+    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
@ -76,68 +63,34 @@ const webpackConfig = merge(baseWebpackConfig, {
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
-      },
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency'
+      }
+      // 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(),
-    // enable scope hoisting
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks (module) {
-        // any required modules inside node_modules are extracted to vendor
-        return (
-          module.resource &&
-          /\.js$/.test(module.resource) &&
-          module.resource.indexOf(
-            path.join(__dirname, '../node_modules')
-          ) === 0
-        )
-      }
-    }),
-    // extract webpack runtime and module manifest to its own file in order to
-    // prevent vendor hash from being updated whenever app bundle is updated
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      minChunks: Infinity
-    }),
-    // This instance extracts shared chunks from code splitted chunks and bundles them
-    // in a separate chunk, similar to the vendor chunk
-    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'app',
-      async: 'vendor-async',
-      children: true,
-      minChunks: 3
-    }),
-    // split echarts into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      async: 'echarts',
-      minChunks(module) {
-        var context = module.context;
-        return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 0);
-      }
-    }),
-    // split xlsx into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      async: 'xlsx',
-      minChunks(module) {
-        var context = module.context;
-        return context && (context.indexOf('xlsx') >= 0);
-      }
-    }),
-     // split codemirror into its own file
-     new webpack.optimize.CommonsChunkPlugin({
-      async: 'codemirror',
-      minChunks(module) {
-        var context = module.context;
-        return context && (context.indexOf('codemirror') >= 0);
-      }
-    }),
-
    // copy custom static assets
    new CopyWebpackPlugin([
      {
@ -146,7 +99,48 @@ const webpackConfig = merge(baseWebpackConfig, {
        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-comomns',
+          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) {
@ -157,9 +151,7 @@ if (config.build.productionGzip) {
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
-        '\\.(' +
-        config.build.productionGzipExtensions.join('|') +
-        ')$'
+        '\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
@ -167,9 +159,28 @@ if (config.build.productionGzip) {
  )
 }

-if (config.build.bundleAnalyzerReport) {
-  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+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/index.js
+++ b/config/index.js
@ -6,7 +6,6 @@ const path = require('path')

 module.exports = {
  dev: {
-
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
@ -36,19 +35,14 @@ module.exports = {
     */

    // https://webpack.js.org/configuration/devtool/#development
-    devtool: '#cheap-source-map',
-
-    // If you have problems debugging vue-files in devtools,
-    // set this to false - it *may* help
-    // https://vue-loader.vuejs.org/en/options.html#cachebusting
-    cacheBusting: true,
+    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,
+    cssSourceMap: false
  },

  build: {
@ -66,14 +60,14 @@ module.exports = {
     * then assetsPublicPath should be set to "/bar/".
     * In most cases please use '/' !!!
     */
-    assetsPublicPath: '/vue-element-admin/', // If you are deployed on the root path, please use '/'
+    assetsPublicPath: '/',

    /**
     * Source Maps
     */
    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
-    devtool: '#source-map',
+    devtool: 'source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
@ -84,8 +78,11 @@ module.exports = {

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
-    // `npm run build --report`
+    // `npm run build:prod --report`
    // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: process.env.npm_config_report
+    bundleAnalyzerReport: process.env.npm_config_report || false,
+
+    // `npm run build:prod --generate_report`
+    generateAnalyzerReport: process.env.npm_config_generate_report || false
  }
 }
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "vue-element-admin",
-  "version": "3.7.2",
+  "version": "3.8.1",
  "description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
  "author": "Pan <panfree23@gmail.com>",
  "license": "MIT",
@ -33,15 +33,15 @@
    "url": "https://github.com/PanJiaChen/vue-element-admin/issues"
  },
  "dependencies": {
-    "axios": "0.17.1",
+    "axios": "0.18.0",
    "clipboard": "1.7.1",
-    "codemirror": "5.32.0",
+    "codemirror": "5.39.2",
    "connect": "3.6.6",
    "driver.js": "0.5.2",
    "dropzone": "5.2.0",
-    "echarts": "3.8.5",
-    "element-ui": "2.3.2",
-    "file-saver": "1.3.3",
+    "echarts": "4.1.0",
+    "element-ui": "2.4.6",
+    "file-saver": "1.3.8",
    "font-awesome": "4.7.0",
    "js-cookie": "2.2.0",
    "jsonlint": "1.6.3",
@ -50,14 +50,13 @@
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "screenfull": "3.3.2",
-    "serve-static": "1.13.2",
-    "showdown": "1.8.5",
+    "showdown": "1.8.6",
    "simplemde": "1.11.2",
    "sortablejs": "1.7.0",
-    "vue": "2.5.10",
+    "vue": "2.5.17",
    "vue-count-to": "1.0.13",
    "vue-i18n": "7.3.2",
-    "vue-multiselect": "2.0.8",
+    "vue-multiselect": "2.1.0",
    "vue-router": "3.0.1",
    "vue-splitpane": "1.0.2",
    "vuedraggable": "^2.16.0",
@ -65,57 +64,61 @@
    "xlsx": "^0.11.16"
  },
  "devDependencies": {
-    "autoprefixer": "7.2.3",
-    "babel-core": "6.26.0",
-    "babel-eslint": "8.0.3",
+    "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.2",
-    "babel-plugin-dynamic-import-node": "^1.2.0",
+    "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.5.0",
-    "babel-preset-env": "1.6.1",
+    "babel-plugin-transform-vue-jsx": "3.7.0",
+    "babel-preset-env": "1.7.0",
    "babel-preset-stage-2": "6.24.1",
-    "chalk": "2.3.0",
-    "copy-webpack-plugin": "4.3.0",
-    "cross-env": "5.1.1",
-    "css-loader": "0.28.7",
-    "eslint": "4.13.1",
-    "eslint-friendly-formatter": "3.0.0",
-    "eslint-loader": "1.9.0",
-    "eslint-plugin-html": "4.0.1",
-    "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "1.1.5",
-    "friendly-errors-webpack-plugin": "1.6.1",
-    "html-webpack-plugin": "2.30.1",
+    "chalk": "2.4.1",
+    "copy-webpack-plugin": "4.5.2",
+    "cross-env": "5.2.0",
+    "css-loader": "1.0.0",
+    "eslint": "4.19.1",
+    "eslint-friendly-formatter": "4.0.1",
+    "eslint-loader": "2.0.0",
+    "eslint-plugin-vue": "4.7.1",
+    "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.0",
-    "node-notifier": "5.1.2",
+    "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": "3.2.0",
-    "ora": "1.3.0",
+    "optimize-css-assets-webpack-plugin": "5.0.0",
+    "ora": "3.0.0",
    "portfinder": "1.0.13",
-    "postcss-import": "11.0.0",
-    "postcss-loader": "2.0.9",
-    "postcss-url": "7.3.0",
+    "postcss-import": "11.1.0",
+    "postcss-loader": "2.1.6",
+    "postcss-url": "7.3.2",
    "rimraf": "2.6.2",
-    "sass-loader": "6.0.6",
+    "sass-loader": "7.0.3",
+    "script-ext-html-webpack-plugin": "2.0.1",
    "script-loader": "0.7.2",
-    "semver": "5.4.1",
-    "shelljs": "0.7.8",
-    "svg-sprite-loader": "3.5.2",
-    "uglifyjs-webpack-plugin": "1.1.3",
-    "url-loader": "0.6.2",
-    "vue-loader": "13.7.2",
-    "vue-style-loader": "3.0.3",
-    "vue-template-compiler": "2.5.10",
-    "webpack": "3.10.0",
-    "webpack-bundle-analyzer": "2.9.1",
-    "webpack-dev-server": "2.9.7",
-    "webpack-merge": "4.1.1"
+    "semver": "5.5.0",
+    "serve-static": "1.13.2",
+    "shelljs": "0.8.2",
+    "svg-sprite-loader": "3.8.0",
+    "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.5",
+    "webpack-merge": "4.1.4"
  },
  "engines": {
-    "node": ">= 4.0.0",
+    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
--- a/src/App.vue
+++ b/src/App.vue
@ -1,11 +1,11 @@
 <template>
  <div id="app">
-    <router-view></router-view>
+    <router-view/>
  </div>
 </template>

 <script>
-  export default{
-    name: 'App'
-  }
+export default{
+  name: 'App'
+}
 </script>
--- a/src/components/BackToTop/index.vue
+++ b/src/components/BackToTop/index.vue
@ -1,10 +1,10 @@
 <template>
  <transition :name="transitionName">
-    <div class="back-to-ceiling" @click="backToTop" v-show="visible" :style="customStyle">
+    <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"></path>
+          <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>
    </div>
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@ -1,9 +1,9 @@
 <template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path" v-if='item.meta.title'>
-        <span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{generateTitle(item.meta.title)}}</span>
-        <router-link v-else :to="item.redirect||item.path">{{generateTitle(item.meta.title)}}</router-link>
+      <el-breadcrumb-item v-for="(item,index) in levelList" v-if="item.meta.title" :key="item.path">
+        <span v-if="item.redirect===&quot;noredirect&quot;||index==levelList.length-1" class="no-redirect">{{ generateTitle(item.meta.title) }}</span>
+        <router-link v-else :to="item.redirect||item.path">{{ generateTitle(item.meta.title) }}</router-link>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
@ -13,9 +13,6 @@
 import { generateTitle } from '@/utils/i18n'

 export default {
-  created() {
-    this.getBreadcrumb()
-  },
  data() {
    return {
      levelList: null
@ -26,12 +23,15 @@ export default {
      this.getBreadcrumb()
    }
  },
+  created() {
+    this.getBreadcrumb()
+  },
  methods: {
    generateTitle,
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name)
      const first = matched[0]
-      if (first && first.name !== 'dashboard') {
+      if (first && first.name.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
        matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
      }
      this.levelList = matched
--- a/src/components/Charts/keyboard.vue
+++ b/src/components/Charts/keyboard.vue
@ -1,5 +1,5 @@
 <template>
-  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+  <div :class="className" :id="id" :style="{height:height,width:width}"/>
 </template>

 <script>
--- a/src/components/Charts/lineMarker.vue
+++ b/src/components/Charts/lineMarker.vue
@ -1,5 +1,5 @@
 <template>
-  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+  <div :class="className" :id="id" :style="{height:height,width:width}"/>
 </template>

 <script>
--- a/src/components/Charts/mixChart.vue
+++ b/src/components/Charts/mixChart.vue
@ -1,5 +1,5 @@
 <template>
-  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+  <div :class="className" :id="id" :style="{height:height,width:width}"/>
 </template>

 <script>
--- a/src/components/DndList/index.vue
+++ b/src/components/DndList/index.vue
@ -1,23 +1,23 @@
 <template>
  <div class="dndList">
-    <div class="dndList-list" :style="{width:width1}">
-      <h3>{{list1Title}}</h3>
-      <draggable :list="list1" class="dragArea" :options="{group:'article'}">
-        <div class="list-complete-item" v-for="element in list1" :key='element.id'>
-          <div class="list-complete-item-handle">[{{element.author}}] {{element.title}}</div>
+    <div :style="{width:width1}" class="dndList-list">
+      <h3>{{ list1Title }}</h3>
+      <draggable :list="list1" :options="{group:'article'}" class="dragArea">
+        <div v-for="element in list1" :key="element.id" class="list-complete-item">
+          <div class="list-complete-item-handle">[{{ 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"></i>
+              <i style="color:#ff4949" class="el-icon-delete"/>
            </span>
          </div>
        </div>
      </draggable>
    </div>
-    <div class="dndList-list" :style="{width:width2}">
-      <h3>{{list2Title}}</h3>
-      <draggable :list="filterList2" class="dragArea" :options="{group:'article'}">
-        <div class="list-complete-item" v-for="element in filterList2" :key='element.id'>
-          <div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.author}}] {{element.title}}</div>
+    <div :style="{width:width2}" class="dndList-list">
+      <h3>{{ list2Title }}</h3>
+      <draggable :list="filterList2" :options="{group:'article'}" class="dragArea">
+        <div v-for="element in filterList2" :key="element.id" class="list-complete-item">
+          <div class="list-complete-item-handle2" @click="pushEle(element)"> [{{ element.author }}] {{ element.title }}</div>
        </div>
      </draggable>
    </div>
@ -30,16 +30,6 @@ import draggable from 'vuedraggable'
 export default {
  name: 'DndList',
  components: { draggable },
-  computed: {
-    filterList2() {
-      return this.list2.filter(v => {
-        if (this.isNotInList1(v)) {
-          return v
-        }
-        return false
-      })
-    }
-  },
  props: {
    list1: {
      type: Array,
@ -70,6 +60,16 @@ export default {
      default: '48%'
    }
  },
+  computed: {
+    filterList2() {
+      return this.list2.filter(v => {
+        if (this.isNotInList1(v)) {
+          return v
+        }
+        return false
+      })
+    }
+  },
  methods: {
    isNotInList1(v) {
      return this.list1.every(k => v.id !== k.id)
--- a/src/components/Dropzone/index.vue
+++ b/src/components/Dropzone/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div :ref="id" :action="url" class="dropzone" :id="id">
+  <div :ref="id" :action="url" :id="id" class="dropzone">
    <input type="file" name="file">
  </div>
 </template>
@ -12,12 +12,81 @@ import 'dropzone/dist/dropzone.css'
 Dropzone.autoDiscover = false

 export default {
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    clickable: {
+      type: Boolean,
+      default: true
+    },
+    defaultMsg: {
+      type: String,
+      default: '上传图片'
+    },
+    acceptedFiles: {
+      type: String,
+      default: ''
+    },
+    thumbnailHeight: {
+      type: Number,
+      default: 200
+    },
+    thumbnailWidth: {
+      type: Number,
+      default: 200
+    },
+    showRemoveLink: {
+      type: Boolean,
+      default: true
+    },
+    maxFilesize: {
+      type: Number,
+      default: 2
+    },
+    maxFiles: {
+      type: Number,
+      default: 3
+    },
+    autoProcessQueue: {
+      type: Boolean,
+      default: true
+    },
+    useCustomDropzoneOptions: {
+      type: Boolean,
+      default: false
+    },
+    defaultImg: {
+      default: '',
+      type: [String, Array]
+    },
+    couldPaste: {
+      type: Boolean,
+      default: false
+    }
+  },
  data() {
    return {
      dropzone: '',
      initOnce: true
    }
  },
+  watch: {
+    defaultImg(val) {
+      if (val.length === 0) {
+        this.initOnce = false
+        return
+      }
+      if (!this.initOnce) return
+      this.initImages(val)
+      this.initOnce = false
+    }
+  },
  mounted() {
    const element = document.getElementById(this.id)
    const vm = this
@ -95,6 +164,10 @@ export default {
      vm.$emit('dropzone-successmultiple', file, error, xhr)
    })
  },
+  destroyed() {
+    document.removeEventListener('paste', this.pasteImg)
+    this.dropzone.destroy()
+  },
  methods: {
    removeAllFiles() {
      this.dropzone.removeAllFiles(true)
@ -128,76 +201,6 @@ export default {
      }
    }

-  },
-  destroyed() {
-    document.removeEventListener('paste', this.pasteImg)
-    this.dropzone.destroy()
-  },
-  watch: {
-    defaultImg(val) {
-      if (val.length === 0) {
-        this.initOnce = false
-        return
-      }
-      if (!this.initOnce) return
-      this.initImages(val)
-      this.initOnce = false
-    }
-  },
-  props: {
-    id: {
-      type: String,
-      required: true
-    },
-    url: {
-      type: String,
-      required: true
-    },
-    clickable: {
-      type: Boolean,
-      default: true
-    },
-    defaultMsg: {
-      type: String,
-      default: '上传图片'
-    },
-    acceptedFiles: {
-      type: String
-    },
-    thumbnailHeight: {
-      type: Number,
-      default: 200
-    },
-    thumbnailWidth: {
-      type: Number,
-      default: 200
-    },
-    showRemoveLink: {
-      type: Boolean,
-      default: true
-    },
-    maxFilesize: {
-      type: Number,
-      default: 2
-    },
-    maxFiles: {
-      type: Number,
-      default: 3
-    },
-    autoProcessQueue: {
-      type: Boolean,
-      default: true
-    },
-    useCustomDropzoneOptions: {
-      type: Boolean,
-      default: false
-    },
-    defaultImg: {
-      default: false
-    },
-    couldPaste: {
-      default: false
-    }
  }
 }
 </script>
--- a/src/components/ErrorLog/index.vue
+++ b/src/components/ErrorLog/index.vue
@ -2,15 +2,24 @@
  <div v-if="errorLogs.length>0">
    <el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
      <el-button size="small" type="danger" class="bug-btn">
-        <svg t="1492682037685" class="bug-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863"
-          xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128">
-          <path d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z"
-            p-id="1864"></path>
+        <svg
+          t="1492682037685"
+          class="bug-svg"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="1863"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          width="128"
+          height="128">
+          <path
+            d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z"
+            p-id="1864"/>
        </svg>
      </el-button>
    </el-badge>

-    <el-dialog title="Error Log" :visible.sync="dialogTableVisible" width="80%">
+    <el-dialog :visible.sync="dialogTableVisible" title="Error Log" width="80%">
      <el-table :data="errorLogs" border>
        <el-table-column label="Message">
          <template slot-scope="scope">
@ -18,21 +27,21 @@
              <span class="message-title">Msg:</span>
              <el-tag type="danger">{{ scope.row.err.message }}</el-tag>
            </div>
-            <br/>
+            <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">{{ scope.row.vm.$vnode.tag }} error in {{ scope.row.info }}</el-tag>
            </div>
-            <br/>
+            <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">{{ scope.row.url }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="Stack">
          <template slot-scope="scope">
-            {{ scope.row.err.stack}}
+            {{ scope.row.err.stack }}
          </template>
        </el-table-column>
      </el-table>
@ -43,7 +52,7 @@

 <script>
 export default {
-  name: 'errorLog',
+  name: 'ErrorLog',
  data() {
    return {
      dialogTableVisible: false
--- a/src/components/GithubCorner/index.vue
+++ b/src/components/GithubCorner/index.vue
@ -1,12 +1,21 @@
 <template>
  <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
-    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#40c9c6; color:#fff;"
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 250 250"
+      style="fill:#40c9c6; color:#fff;"
      aria-hidden="true">
-      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
-      <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
-        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
-      <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
-        fill="currentColor" class="octo-body"></path>
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/>
+      <path
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor"
+        style="transform-origin: 130px 106px;"
+        class="octo-arm"/>
+      <path
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor"
+        class="octo-body"/>
    </svg>
  </a>
 </template>
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@ -1,20 +1,34 @@
 <template>
  <div>
-    <svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
-      version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
-      <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
-        p-id="1692"></path>
-      <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
-        p-id="1693"></path>
-      <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
-        p-id="1694"></path>
+    <svg
+      :class="{'is-active':isActive}"
+      t="1492500959545"
+      class="hamburger"
+      style=""
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="1691"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      width="64"
+      height="64"
+      @click="toggleClick">
+      <path
+        d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
+        p-id="1692"/>
+      <path
+        d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
+        p-id="1693"/>
+      <path
+        d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
+        p-id="1694"/>
    </svg>
  </div>
 </template>

 <script>
 export default {
-  name: 'hamburger',
+  name: 'Hamburger',
  props: {
    isActive: {
      type: Boolean,
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
@ -1,109 +1,113 @@
 <template>
-<div class="vue-image-crop-upload" v-show="value">
-  <div class="vicp-wrap">
-    <div class="vicp-close" @click="off">
-      <i class="vicp-icon4"></i>
-    </div>
-
-    <div class="vicp-step1" v-show="step == 1">
-      <div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange">
-        <i class="vicp-icon1" v-show="loading != 1">
-        <i class="vicp-icon1-arrow"></i>
-        <i class="vicp-icon1-body"></i>
-        <i class="vicp-icon1-bottom"></i>
-        </i>
-        <span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</span>
-        <span class="vicp-no-supported-hint" v-show="!isSupported">{{ lang.noSupported }}</span>
-        <input type="file" v-show="false" v-if="step == 1" @change="handleChange" ref="fileinput">
+  <div v-show="value" class="vue-image-crop-upload">
+    <div class="vicp-wrap">
+      <div class="vicp-close" @click="off">
+        <i class="vicp-icon4"/>
      </div>
-      <div class="vicp-error" v-show="hasError">
-        <i class="vicp-icon2"></i> {{ errorMsg }}
-      </div>
-      <div class="vicp-operate">
-        <a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
-      </div>
-    </div>

-    <div class="vicp-step2" v-if="step == 2">
-      <div class="vicp-crop">
-        <div class="vicp-crop-left" v-show="true">
-          <div class="vicp-img-container">
-            <img :src="sourceImgUrl" :style="sourceImgStyle" class="vicp-img" draggable="false"
-              @drag="preventDefault"
-              @dragstart="preventDefault"
-              @dragend="preventDefault"
-              @dragleave="preventDefault"
-              @dragover="preventDefault"
-              @dragenter="preventDefault"
-              @drop="preventDefault"
-              @touchstart="imgStartMove"
-              @touchmove="imgMove"
-              @touchend="createImg"
-              @touchcancel="createImg"
-              @mousedown="imgStartMove"
-              @mousemove="imgMove"
-              @mouseup="createImg"
-              @mouseout="createImg"
-              ref="img">
-            <div class="vicp-img-shade vicp-img-shade-1" :style="sourceImgShadeStyle"></div>
-            <div class="vicp-img-shade vicp-img-shade-2" :style="sourceImgShadeStyle"></div>
-          </div>
-
-          <div class="vicp-range">
-            <input type="range" :value="scale.range" step="1" min="0" max="100" @input="zoomChange">
-            <i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" class="vicp-icon5"></i>
-            <i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="vicp-icon6"></i>
-          </div>
-
-          <div class="vicp-rotate" v-if="!noRotate">
-                        <i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate">↺</i>
-                        <i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i>
-                    </div>
+      <div v-show="step == 1" class="vicp-step1">
+        <div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange">
+          <i v-show="loading != 1" class="vicp-icon1">
+            <i class="vicp-icon1-arrow"/>
+            <i class="vicp-icon1-body"/>
+            <i class="vicp-icon1-bottom"/>
+          </i>
+          <span v-show="loading !== 1" class="vicp-hint">{{ lang.hint }}</span>
+          <span v-show="!isSupported" class="vicp-no-supported-hint">{{ lang.noSupported }}</span>
+          <input v-show="false" v-if="step == 1" ref="fileinput" type="file" @change="handleChange">
        </div>
-        <div class="vicp-crop-right" v-show="true">
-          <div class="vicp-preview">
-            <div class="vicp-preview-item" v-if="!noSquare">
-              <img :src="createImgUrl" :style="previewStyle">
-              <span>{{ lang.preview }}</span>
+        <div v-show="hasError" class="vicp-error">
+          <i class="vicp-icon2"/> {{ errorMsg }}
+        </div>
+        <div class="vicp-operate">
+          <a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
+        </div>
+      </div>
+
+      <div v-if="step == 2" class="vicp-step2">
+        <div class="vicp-crop">
+          <div v-show="true" class="vicp-crop-left">
+            <div class="vicp-img-container">
+              <img
+                ref="img"
+                :src="sourceImgUrl"
+                :style="sourceImgStyle"
+                class="vicp-img"
+                draggable="false"
+                @drag="preventDefault"
+                @dragstart="preventDefault"
+                @dragend="preventDefault"
+                @dragleave="preventDefault"
+                @dragover="preventDefault"
+                @dragenter="preventDefault"
+                @drop="preventDefault"
+                @touchstart="imgStartMove"
+                @touchmove="imgMove"
+                @touchend="createImg"
+                @touchcancel="createImg"
+                @mousedown="imgStartMove"
+                @mousemove="imgMove"
+                @mouseup="createImg"
+                @mouseout="createImg">
+              <div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-1"/>
+              <div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-2"/>
            </div>
-            <div class="vicp-preview-item vicp-preview-item-circle" v-if="!noCircle">
-              <img :src="createImgUrl" :style="previewStyle">
-              <span>{{ lang.preview }}</span>
+
+            <div class="vicp-range">
+              <input :value="scale.range" type="range" step="1" min="0" max="100" @input="zoomChange">
+              <i class="vicp-icon5" @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub"/>
+              <i class="vicp-icon6" @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd"/>
+            </div>
+
+            <div v-if="!noRotate" class="vicp-rotate">
+              <i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate">↺</i>
+              <i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i>
+            </div>
+          </div>
+          <div v-show="true" class="vicp-crop-right">
+            <div class="vicp-preview">
+              <div v-if="!noSquare" class="vicp-preview-item">
+                <img :src="createImgUrl" :style="previewStyle">
+                <span>{{ lang.preview }}</span>
+              </div>
+              <div v-if="!noCircle" class="vicp-preview-item vicp-preview-item-circle">
+                <img :src="createImgUrl" :style="previewStyle">
+                <span>{{ lang.preview }}</span>
+              </div>
            </div>
          </div>
        </div>
+        <div class="vicp-operate">
+          <a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
+          <a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a>
+        </div>
      </div>
-      <div class="vicp-operate">
-        <a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
-        <a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a>
-      </div>
-    </div>

-    <div class="vicp-step3" v-if="step == 3">
-      <div class="vicp-upload">
-        <span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span>
-        <div class="vicp-progress-wrap">
-          <span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span>
+      <div v-if="step == 3" class="vicp-step3">
+        <div class="vicp-upload">
+          <span v-show="loading === 1" class="vicp-loading">{{ lang.loading }}</span>
+          <div class="vicp-progress-wrap">
+            <span v-show="loading === 1" :style="progressStyle" class="vicp-progress"/>
+          </div>
+          <div v-show="hasError" class="vicp-error">
+            <i class="vicp-icon2"/> {{ errorMsg }}
+          </div>
+          <div v-show="loading === 2" class="vicp-success">
+            <i class="vicp-icon3"/> {{ lang.success }}
+          </div>
        </div>
-        <div class="vicp-error" v-show="hasError">
-          <i class="vicp-icon2"></i> {{ errorMsg }}
-        </div>
-        <div class="vicp-success" v-show="loading === 2">
-          <i class="vicp-icon3"></i> {{ lang.success }}
+        <div class="vicp-operate">
+          <a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
+          <a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
        </div>
      </div>
-      <div class="vicp-operate">
-        <a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
-        <a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
-      </div>
+      <canvas v-show="false" ref="canvas" :width="width" :height="height"/>
    </div>
-    <canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas>
  </div>
-</div>
 </template>

 <script>
- /* eslint-disable */
+/* eslint-disable */
 'use strict'
 import request from '@/utils/request'
 import language from './utils/language.js'
--- a/src/components/JsonEditor/index.vue
+++ b/src/components/JsonEditor/index.vue
@ -1,6 +1,6 @@
 <template>
  <div class="json-editor">
-    <textarea ref="textarea"></textarea>
+    <textarea ref="textarea"/>
  </div>
 </template>

@ -15,13 +15,14 @@ import 'codemirror/addon/lint/lint'
 import 'codemirror/addon/lint/json-lint'

 export default {
-  name: 'jsonEditor',
+  name: 'JsonEditor',
+  /* eslint-disable vue/require-prop-types */
+  props: ['value'],
  data() {
    return {
      jsonEditor: false
    }
  },
-  props: ['value'],
  watch: {
    value(value) {
      const editor_value = this.jsonEditor.getValue()
--- a/src/components/Kanban/index.vue
+++ b/src/components/Kanban/index.vue
@ -1,14 +1,14 @@
 <template>
  <div class="board-column">
    <div class="board-column-header">
-      {{headerText}}
+      {{ headerText }}
    </div>
    <draggable
-      class="board-column-content"
      :list="list"
-      :options="options">
-      <div class="board-item" v-for="element in list" :key="element.id">
-        {{element.name}} {{element.id}}
+      :options="options"
+      class="board-column-content">
+      <div v-for="element in list" :key="element.id" class="board-item">
+        {{ element.name }} {{ element.id }}
      </div>
    </draggable>
  </div>
@ -17,7 +17,7 @@
 import draggable from 'vuedraggable'

 export default {
-  name: 'dragKanban-demo',
+  name: 'DragKanbanDemo',
  components: {
    draggable
  },
--- a/src/components/LangSelect/index.vue
+++ b/src/components/LangSelect/index.vue
@ -1,11 +1,11 @@
 <template>
-  <el-dropdown trigger="click" class='international' @command="handleSetLanguage">
+  <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
    <div>
-      <svg-icon class-name='international-icon' icon-class="language" />
+      <svg-icon class-name="international-icon" icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
-      <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
+      <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-menu>
  </el-dropdown>
 </template>
@ -38,4 +38,3 @@ export default {
 }
 </style>

-
--- a/src/components/MDinput/index.vue
+++ b/src/components/MDinput/index.vue
@ -1,28 +1,103 @@
 <template>
-  <div class="material-input__component" :class="computedClasses">
+  <div :class="computedClasses" class="material-input__component">
    <div :class="{iconClass:icon}">
-      <i class="el-input__icon material-input__icon" :class="['el-icon-' + icon]" v-if="icon"></i>
-      <input v-if="type === 'email'" type="email" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
-        @blur="handleMdBlur" @input="handleModelInput">
-      <input v-if="type === 'url'" type="url" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
-        @blur="handleMdBlur" @input="handleModelInput">
-      <input v-if="type === 'number'" type="number" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-        :step="step" :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :minlength="minlength"
-        :maxlength="maxlength" :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
-      <input v-if="type === 'password'" type="password" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :required="required" @focus="handleMdFocus"
-        @blur="handleMdBlur" @input="handleModelInput">
-      <input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
-        @blur="handleMdBlur" @input="handleModelInput">
-      <input v-if="type === 'text'" type="text" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :minlength="minlength" :maxlength="maxlength"
-        :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
-      <span class="material-input-bar"></span>
+      <i v-if="icon" :class="['el-icon-' + icon]" class="el-input__icon material-input__icon"/>
+      <input
+        v-if="type === 'email'"
+        :name="name"
+        :placeholder="fillPlaceHolder"
+        v-model="currentValue"
+        :readonly="readonly"
+        :disabled="disabled"
+        :autoComplete="autoComplete"
+        :required="required"
+        type="email"
+        class="material-input"
+        @focus="handleMdFocus"
+        @blur="handleMdBlur"
+        @input="handleModelInput">
+      <input
+        v-if="type === 'url'"
+        :name="name"
+        :placeholder="fillPlaceHolder"
+        v-model="currentValue"
+        :readonly="readonly"
+        :disabled="disabled"
+        :autoComplete="autoComplete"
+        :required="required"
+        type="url"
+        class="material-input"
+        @focus="handleMdFocus"
+        @blur="handleMdBlur"
+        @input="handleModelInput">
+      <input
+        v-if="type === 'number'"
+        :name="name"
+        :placeholder="fillPlaceHolder"
+        v-model="currentValue"
+        :step="step"
+        :readonly="readonly"
+        :disabled="disabled"
+        :autoComplete="autoComplete"
+        :max="max"
+        :min="min"
+        :minlength="minlength"
+        :maxlength="maxlength"
+        :required="required"
+        type="number"
+        class="material-input"
+        @focus="handleMdFocus"
+        @blur="handleMdBlur"
+        @input="handleModelInput">
+      <input
+        v-if="type === 'password'"
+        :name="name"
+        :placeholder="fillPlaceHolder"
+        v-model="currentValue"
+        :readonly="readonly"
+        :disabled="disabled"
+        :autoComplete="autoComplete"
+        :max="max"
+        :min="min"
+        :required="required"
+        type="password"
+        class="material-input"
+        @focus="handleMdFocus"
+        @blur="handleMdBlur"
+        @input="handleModelInput">
+      <input
+        v-if="type === 'tel'"
+        :name="name"
+        :placeholder="fillPlaceHolder"
+        v-model="currentValue"
+        :readonly="readonly"
+        :disabled="disabled"
+        :autoComplete="autoComplete"
+        :required="required"
+        type="tel"
+        class="material-input"
+        @focus="handleMdFocus"
+        @blur="handleMdBlur"
+        @input="handleModelInput">
+      <input
+        v-if="type === 'text'"
+        :name="name"
+        :placeholder="fillPlaceHolder"
+        v-model="currentValue"
+        :readonly="readonly"
+        :disabled="disabled"
+        :autoComplete="autoComplete"
+        :minlength="minlength"
+        :maxlength="maxlength"
+        :required="required"
+        type="text"
+        class="material-input"
+        @focus="handleMdFocus"
+        @blur="handleMdBlur"
+        @input="handleModelInput">
+      <span class="material-input-bar"/>
      <label class="material-label">
-        <slot></slot>
+        <slot/>
      </label>
    </div>
  </div>
@ -32,8 +107,9 @@
 // source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue

 export default {
-  name: 'md-input',
+  name: 'MdInput',
  props: {
+    /* eslint-disable */
    icon: String,
    name: String,
    type: {
@ -62,6 +138,13 @@ export default {
      default: true
    }
  },
+  data() {
+    return {
+      currentValue: this.value,
+      focus: false,
+      fillPlaceHolder: null
+    }
+  },
  computed: {
    computedClasses() {
      return {
@ -76,13 +159,6 @@ export default {
      this.currentValue = newValue
    }
  },
-  data() {
-    return {
-      currentValue: this.value,
-      focus: false,
-      fillPlaceHolder: null
-    }
-  },
  methods: {
    handleModelInput(event) {
      const value = event.target.value
--- a/src/components/MarkdownEditor/index.vue
+++ b/src/components/MarkdownEditor/index.vue
@ -1,7 +1,6 @@
 <template>
-  <div class="simplemde-container" :style="{height:height+'px',zIndex:zIndex}">
-    <textarea :id="id">
-    </textarea>
+  <div :style="{height:height+'px',zIndex:zIndex}" class="simplemde-container">
+    <textarea :id="id"/>
  </div>
 </template>

@ -11,11 +10,16 @@ import 'simplemde/dist/simplemde.min.css'
 import SimpleMDE from 'simplemde'

 export default {
-  name: 'simplemde-md',
+  name: 'SimplemdeMd',
  props: {
-    value: String,
+    value: {
+      type: String,
+      default: ''
+    },
    id: {
-      type: String
+      type: String,
+      required: false,
+      default: 'markdown-editor-' + +new Date()
    },
    autofocus: {
      type: Boolean,
@ -34,7 +38,10 @@ export default {
      default: 10
    },
    toolbar: {
-      type: Array
+      type: Array,
+      default: function() {
+        return []
+      }
    }
  },
  data() {
@ -51,10 +58,10 @@ export default {
  },
  mounted() {
    this.simplemde = new SimpleMDE({
-      element: document.getElementById(this.id || 'markdown-editor-' + +new Date()),
+      element: document.getElementById(this.id),
      autoDownloadFontAwesome: false,
      autofocus: this.autofocus,
-      toolbar: this.toolbar,
+      toolbar: this.toolbar.length > 0 ? this.toolbar : undefined,
      spellChecker: false,
      insertTexts: {
        link: ['[', ']( )']
--- a/src/components/PanThumb/index.vue
+++ b/src/components/PanThumb/index.vue
@ -1,11 +1,11 @@
 <template>
-  <div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
+  <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
    <div class="pan-info">
      <div class="pan-info-roles-container">
-        <slot></slot>
+        <slot/>
      </div>
    </div>
-    <img class="pan-thumb" :src="image">
+    <img :src="image" class="pan-thumb">
  </div>
 </template>

--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@ -1,15 +1,28 @@
 <template>
  <div>
-    <svg t="1508738709248" @click='click' class="screenfull-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-      p-id="2069" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
-      <path d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
-        p-id="2070"></path>
-      <path d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
-        p-id="2071"></path>
-      <path d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
-        p-id="2072"></path>
-      <path d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
-        p-id="2073"></path>
+    <svg
+      t="1508738709248"
+      class="screenfull-svg"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="2069"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      width="32"
+      height="32"
+      @click="click">
+      <path
+        d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
+        p-id="2070"/>
+      <path
+        d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
+        p-id="2071"/>
+      <path
+        d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
+        p-id="2072"/>
+      <path
+        d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
+        p-id="2073"/>
    </svg>
  </div>
 </template>
@ -18,7 +31,7 @@
 import screenfull from 'screenfull'

 export default {
-  name: 'screenfull',
+  name: 'Screenfull',
  props: {
    width: {
      type: Number,
--- a/src/components/ScrollPane/index.vue
+++ b/src/components/ScrollPane/index.vue
@ -1,7 +1,7 @@
 <template>
-  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
-    <div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
-      <slot></slot>
+  <div ref="scrollContainer" class="scroll-container" @wheel.prevent="handleScroll">
+    <div ref="scrollWrapper" :style="{left: left + 'px'}" class="scroll-wrapper">
+      <slot/>
    </div>
  </div>
 </template>
@ -10,7 +10,7 @@
 const padding = 15 // tag's padding

 export default {
-  name: 'scrollPane',
+  name: 'ScrollPane',
  data() {
    return {
      left: 0
--- a/src/components/Share/dropdownMenu.vue
+++ b/src/components/Share/dropdownMenu.vue
@ -1,10 +1,10 @@
 <template>
-  <div class="share-dropdown-menu" :class="{active:isActive}">
+  <div :class="{active:isActive}" class="share-dropdown-menu">
    <div class="share-dropdown-menu-wrapper">
-      <span class="share-dropdown-menu-title" @click.self="clickTitle">{{title}}</span>
-      <div class="share-dropdown-menu-item" v-for="(item,index) of items" :key='index'>
-        <a v-if="item.href" :href="item.href" target="_blank">{{item.title}}</a>
-        <span v-else>{{item.title}}</span>
+      <span class="share-dropdown-menu-title" @click.self="clickTitle">{{ title }}</span>
+      <div v-for="(item,index) of items" :key="index" class="share-dropdown-menu-item">
+        <a v-if="item.href" :href="item.href" target="_blank">{{ item.title }}</a>
+        <span v-else>{{ item.title }}</span>
      </div>
    </div>
  </div>
@ -14,7 +14,10 @@
 export default {
  props: {
    items: {
-      type: Array
+      type: Array,
+      default: function() {
+        return []
+      }
    },
    title: {
      type: String,
@ -35,7 +38,7 @@ export default {
 </script>

 <style rel="stylesheet/scss" lang="scss" >
-$n: 6; //和items.length 相同
+$n: 8; //和items.length 相同
 $t: .1s;
 .share-dropdown-menu {
  width: 250px;
--- a/src/components/Sticky/index.vue
+++ b/src/components/Sticky/index.vue
@ -21,7 +21,8 @@ export default {
      default: 1
    },
    className: {
-      type: String
+      type: String,
+      default: ''
    }
  },
  data() {
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@ -1,19 +1,20 @@
 <template>
  <svg :class="svgClass" aria-hidden="true">
-    <use :xlink:href="iconName"></use>
+    <use :xlink:href="iconName"/>
  </svg>
 </template>

 <script>
 export default {
-  name: 'svg-icon',
+  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
-      type: String
+      type: String,
+      default: ''
    }
  },
  computed: {
--- a/src/components/TextHoverEffect/Mallki.vue
+++ b/src/components/TextHoverEffect/Mallki.vue
@ -1,8 +1,8 @@
 <template>
-  <a class="link--mallki" :class="className" href="#">
-    {{text}}
-    <span :data-letters="text"></span>
-    <span :data-letters="text"></span>
+  <a :class="className" class="link--mallki" href="#">
+    {{ text }}
+    <span :data-letters="text"/>
+    <span :data-letters="text"/>
  </a>
 </template>

@ -10,7 +10,8 @@
 export default {
  props: {
    className: {
-      type: String
+      type: String,
+      default: ''
    },
    text: {
      type: String,
@ -20,9 +21,9 @@ export default {
 }
 </script>

-
 <style>
 /* Mallki */
+
 .link--mallki {
  font-weight: 800;
  color: #4dd9d5;
@ -31,10 +32,10 @@ export default {
  transition: color 0.5s 0.25s;
  overflow: hidden;
  position: relative;
-display: inline-block;
-    line-height: 1;
-        outline: none;
-    text-decoration: none;
+  display: inline-block;
+  line-height: 1;
+  outline: none;
+  text-decoration: none;
 }

 .link--mallki:hover {
@ -109,5 +110,4 @@ display: inline-block;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
 }
-
 </style>
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@ -1,8 +1,8 @@
 <template>
  <el-color-picker
+    v-model="theme"
    class="theme-picker"
-    popper-class="theme-picker-dropdown"
-    v-model="theme"></el-color-picker>
+    popper-class="theme-picker-dropdown"/>
 </template>

 <script>
--- a/src/components/Tinymce/components/editorImage.vue
+++ b/src/components/Tinymce/components/editorImage.vue
@ -1,10 +1,18 @@
 <template>
  <div class="upload-container">
-    <el-button icon='el-icon-upload' size="mini" :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
+    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">上传图片
    </el-button>
-    <el-dialog append-to-body :visible.sync="dialogVisible">
-      <el-upload class="editor-slide-upload" action="https://httpbin.org/post" :multiple="true" :file-list="fileList" :show-file-list="true"
-        list-type="picture-card" :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload">
+    <el-dialog :visible.sync="dialogVisible">
+      <el-upload
+        :multiple="true"
+        :file-list="fileList"
+        :show-file-list="true"
+        :on-remove="handleRemove"
+        :on-success="handleSuccess"
+        :before-upload="beforeUpload"
+        class="editor-slide-upload"
+        action="https://httpbin.org/post"
+        list-type="picture-card">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <el-button @click="dialogVisible = false">取 消</el-button>
@ -17,7 +25,7 @@
 // import { getToken } from 'api/qiniu'

 export default {
-  name: 'editorSlideUpload',
+  name: 'EditorSlideUpload',
  props: {
    color: {
      type: String,
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@ -1,8 +1,8 @@
 <template>
-  <div class="tinymce-container editor-container" :class="{fullscreen:fullscreen}">
-    <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
+  <div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container">
+    <textarea :id="tinymceId" class="tinymce-textarea"/>
    <div class="editor-custom-btn-container">
-      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
+      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"/>
    </div>
  </div>
 </template>
@ -13,11 +13,12 @@ import plugins from './plugins'
 import toolbar from './toolbar'

 export default {
-  name: 'tinymce',
+  name: 'Tinymce',
  components: { editorImage },
  props: {
    id: {
-      type: String
+      type: String,
+      default: 'vue-tinymce-' + +new Date()
    },
    value: {
      type: String,
@ -31,6 +32,7 @@ export default {
      }
    },
    menubar: {
+      type: String,
      default: 'file edit insert view format table'
    },
    height: {
@ -43,7 +45,7 @@ export default {
    return {
      hasChange: false,
      hasInit: false,
-      tinymceId: this.id || 'vue-tinymce-' + +new Date(),
+      tinymceId: this.id,
      fullscreen: false
    }
  },
@ -64,6 +66,9 @@ export default {
  deactivated() {
    this.destroyTinymce()
  },
+  destroyed() {
+    this.destroyTinymce()
+  },
  methods: {
    initTinymce() {
      const _this = this
@ -152,9 +157,6 @@ export default {
        window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
      })
    }
-  },
-  destroyed() {
-    this.destroyTinymce()
  }
 }
 </script>
--- a/src/components/Tinymce/toolbar.js
+++ b/src/components/Tinymce/toolbar.js
@ -1,6 +1,6 @@
 // Here is a list of the toolbar
 // Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols

-const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap	 preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
+const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']

 export default toolbar
--- a/src/components/TreeTable/index.vue
+++ b/src/components/TreeTable/index.vue
@ -2,25 +2,27 @@
  <el-table :data="formatData" :row-style="showRow" v-bind="$attrs">
    <el-table-column v-if="columns.length===0" width="150">
      <template slot-scope="scope">
-        <span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
-        <span class="tree-ctrl" v-if="iconShow(0,scope.row)" @click="toggleExpanded(scope.$index)">
-          <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
-          <i v-else class="el-icon-minus"></i>
+        <span v-for="space in scope.row._level" :key="space" class="ms-tree-space"/>
+        <span v-if="iconShow(0,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
+          <i v-if="!scope.row._expanded" class="el-icon-plus"/>
+          <i v-else class="el-icon-minus"/>
        </span>
-        {{scope.$index}}
+        {{ scope.$index }}
      </template>
    </el-table-column>
-    <el-table-column v-else v-for="(column, index) in columns" :key="column.value" :label="column.text" :width="column.width">
+    <el-table-column v-for="(column, index) in columns" v-else :key="column.value" :label="column.text" :width="column.width">
      <template slot-scope="scope">
-        <span v-if="index === 0" v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
-        <span class="tree-ctrl" v-if="iconShow(index,scope.row)" @click="toggleExpanded(scope.$index)">
-          <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
-          <i v-else class="el-icon-minus"></i>
+        <!-- Todo -->
+        <!-- eslint-disable-next-line vue/no-confusing-v-for-v-if -->
+        <span v-for="space in scope.row._level" v-if="index === 0" :key="space" class="ms-tree-space"/>
+        <span v-if="iconShow(index,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
+          <i v-if="!scope.row._expanded" class="el-icon-plus"/>
+          <i v-else class="el-icon-minus"/>
        </span>
-        {{scope.row[column.value]}}
+        {{ scope.row[column.value] }}
      </template>
    </el-table-column>
-    <slot></slot>
+    <slot/>
  </el-table>
 </template>

@ -31,8 +33,9 @@
 */
 import treeToArray from './eval'
 export default {
-  name: 'treeTable',
+  name: 'TreeTable',
  props: {
+    /* eslint-disable */
    data: {
      type: [Array, Object],
      required: true
--- a/src/components/Upload/singleImage.vue
+++ b/src/components/Upload/singleImage.vue
@ -1,19 +1,25 @@
 <template>
-    <div class="upload-container">
-        <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
-            :on-success="handleImageScucess">
-            <i class="el-icon-upload"></i>
-            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        </el-upload>
-        <div class="image-preview">
-            <div class="image-preview-wrapper" v-show="imageUrl.length>1">
-                <img :src="imageUrl+'?imageView2/1/w/200/h/200'">
-                <div class="image-preview-action">
-                    <i @click="rmImage" class="el-icon-delete"></i>
-                </div>
-            </div>
+  <div class="upload-container">
+    <el-upload
+      :data="dataObj"
+      :multiple="false"
+      :show-file-list="false"
+      :on-success="handleImageSuccess"
+      class="image-uploader"
+      drag
+      action="https://httpbin.org/post">
+      <i class="el-icon-upload"/>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+    </el-upload>
+    <div class="image-preview">
+      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
+        <img :src="imageUrl+'?imageView2/1/w/200/h/200'">
+        <div class="image-preview-action">
+          <i class="el-icon-delete" @click="rmImage"/>
        </div>
+      </div>
    </div>
+  </div>
 </template>

 <script>
@ -21,13 +27,11 @@
 import { getToken } from '@/api/qiniu'

 export default {
-  name: 'singleImageUpload',
+  name: 'SingleImageUpload',
  props: {
-    value: String
-  },
-  computed: {
-    imageUrl() {
-      return this.value
+    value: {
+      type: String,
+      default: ''
    }
  },
  data() {
@ -36,6 +40,11 @@ export default {
      dataObj: { token: '', key: '' }
    }
  },
+  computed: {
+    imageUrl() {
+      return this.value
+    }
+  },
  methods: {
    rmImage() {
      this.emitInput('')
@ -43,7 +52,7 @@ export default {
    emitInput(val) {
      this.$emit('input', val)
    },
-    handleImageScucess() {
+    handleImageSuccess() {
      this.emitInput(this.tempUrl)
    },
    beforeUpload() {
--- a/src/components/Upload/singleImage2.vue
+++ b/src/components/Upload/singleImage2.vue
@ -1,15 +1,21 @@
 <template>
  <div class="singleImageUpload2 upload-container">
-    <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
-      :on-success="handleImageScucess">
-      <i class="el-icon-upload"></i>
+    <el-upload
+      :data="dataObj"
+      :multiple="false"
+      :show-file-list="false"
+      :on-success="handleImageSuccess"
+      class="image-uploader"
+      drag
+      action="https://httpbin.org/post">
+      <i class="el-icon-upload"/>
      <div class="el-upload__text">Drag或<em>点击上传</em></div>
    </el-upload>
    <div v-show="imageUrl.length>0" class="image-preview">
-      <div class="image-preview-wrapper" v-show="imageUrl.length>1">
+      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
        <img :src="imageUrl">
        <div class="image-preview-action">
-          <i @click="rmImage" class="el-icon-delete"></i>
+          <i class="el-icon-delete" @click="rmImage"/>
        </div>
      </div>
    </div>
@ -20,13 +26,11 @@
 import { getToken } from '@/api/qiniu'

 export default {
-  name: 'singleImageUpload2',
+  name: 'SingleImageUpload2',
  props: {
-    value: String
-  },
-  computed: {
-    imageUrl() {
-      return this.value
+    value: {
+      type: String,
+      default: ''
    }
  },
  data() {
@ -35,6 +39,11 @@ export default {
      dataObj: { token: '', key: '' }
    }
  },
+  computed: {
+    imageUrl() {
+      return this.value
+    }
+  },
  methods: {
    rmImage() {
      this.emitInput('')
@ -42,7 +51,7 @@ export default {
    emitInput(val) {
      this.$emit('input', val)
    },
-    handleImageScucess() {
+    handleImageSuccess() {
      this.emitInput(this.tempUrl)
    },
    beforeUpload() {
--- a/src/components/Upload/singleImage3.vue
+++ b/src/components/Upload/singleImage3.vue
@ -1,23 +1,29 @@
 <template>
  <div class="upload-container">
-    <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
-      :on-success="handleImageScucess">
-      <i class="el-icon-upload"></i>
+    <el-upload
+      :data="dataObj"
+      :multiple="false"
+      :show-file-list="false"
+      :on-success="handleImageSuccess"
+      class="image-uploader"
+      drag
+      action="https://httpbin.org/post">
+      <i class="el-icon-upload"/>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <div class="image-preview image-app-preview">
-      <div class="image-preview-wrapper" v-show="imageUrl.length>1">
+      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
        <img :src="imageUrl">
        <div class="image-preview-action">
-          <i @click="rmImage" class="el-icon-delete"></i>
+          <i class="el-icon-delete" @click="rmImage"/>
        </div>
      </div>
    </div>
    <div class="image-preview">
-      <div class="image-preview-wrapper" v-show="imageUrl.length>1">
+      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
        <img :src="imageUrl">
        <div class="image-preview-action">
-          <i @click="rmImage" class="el-icon-delete"></i>
+          <i class="el-icon-delete" @click="rmImage"/>
        </div>
      </div>
    </div>
@ -28,13 +34,11 @@
 import { getToken } from '@/api/qiniu'

 export default {
-  name: 'singleImageUpload3',
+  name: 'SingleImageUpload3',
  props: {
-    value: String
-  },
-  computed: {
-    imageUrl() {
-      return this.value
+    value: {
+      type: String,
+      default: ''
    }
  },
  data() {
@ -43,6 +47,11 @@ export default {
      dataObj: { token: '', key: '' }
    }
  },
+  computed: {
+    imageUrl() {
+      return this.value
+    }
+  },
  methods: {
    rmImage() {
      this.emitInput('')
@ -50,7 +59,7 @@ export default {
    emitInput(val) {
      this.$emit('input', val)
    },
-    handleImageScucess(file) {
+    handleImageSuccess(file) {
      this.emitInput(file.files.file)
    },
    beforeUpload() {
--- a/src/components/UploadExcel/index.vue
+++ b/src/components/UploadExcel/index.vue
@ -13,8 +13,8 @@ import XLSX from 'xlsx'

 export default {
  props: {
-    beforeUpload: Function,
-    onSuccess: Function
+    beforeUpload: Function, // eslint-disable-line
+    onSuccess: Function// eslint-disable-line
  },
  data() {
    return {
--- a/src/directive/waves/waves.js
+++ b/src/directive/waves/waves.js
@ -29,8 +29,8 @@ export default{
            ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
            break
          default:
-            ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'
-            ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'
+            ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.documentElement.scrollTop || document.body.scrollTop) + 'px'
+            ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft || document.body.scrollLeft) + 'px'
        }
        ripple.style.backgroundColor = opts.color
        ripple.className = 'waves-ripple z-active'
--- a/src/lang/en.js
+++ b/src/lang/en.js
@ -132,7 +132,7 @@ export default {
  },
  excel: {
    export: 'Export',
-    selectedExport: 'Export selected items',
+    selectedExport: 'Export Selected Items',
    placeholder: 'Please enter the file name(default excel-list)'
  },
  zip: {
@ -140,7 +140,7 @@ export default {
    placeholder: 'Please enter the file name(default file)'
  },
  theme: {
-    change: 'Theme change',
+    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.'
  },
--- a/src/main.js
+++ b/src/main.js
@ -1,6 +1,6 @@
 import Vue from 'vue'

-import 'normalize.css/normalize.css'// A modern alternative to CSS resets
+import 'normalize.css/normalize.css' // A modern alternative to CSS resets

 import Element from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
@ -13,7 +13,7 @@ import store from './store'

 import i18n from './lang' // Internationalization
 import './icons' // icon
-import './errorLog'// error log
+import './errorLog' // error log
 import './permission' // permission control
 import './mock' // simulation data

--- a/src/permission.js
+++ b/src/permission.js
@ -40,7 +40,7 @@ router.beforeEach((to, from, next) => {
      } else {
        // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
        if (hasPermission(store.getters.roles, to.meta.roles)) {
-          next()//
+          next()
        } else {
          next({ path: '/401', replace: true, query: { noGoBack: true }})
        }
--- a/src/router/index.js
+++ b/src/router/index.js
@ -6,9 +6,15 @@ Vue.use(Router)
 /* Layout */
 import Layout from '@/views/layout/Layout'

+/* Router Modules */
+import componentsRouter from './modules/components'
+import chartsRouter from './modules/charts'
+import tableRouter from './modules/table'
+import nestedRouter from './modules/nested'
+
 /** note: submenu only apppear when children.length>=1
-*   detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
-**/
+ *  detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
+ **/

 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@ -25,42 +31,64 @@ import Layout from '@/views/layout/Layout'
  }
 **/
 export const constantRouterMap = [
-  { path: '/login', component: () => import('@/views/login/index'), hidden: true },
-  { path: '/authredirect', component: () => import('@/views/login/authredirect'), hidden: true },
-  { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  {
+    path: '/login',
+    component: () => import('@/views/login/index'),
+    hidden: true
+  },
+  {
+    path: '/authredirect',
+    component: () => import('@/views/login/authredirect'),
+    hidden: true
+  },
+  {
+    path: '/404',
+    component: () => import('@/views/errorPage/404'),
+    hidden: true
+  },
+  {
+    path: '/401',
+    component: () => import('@/views/errorPage/401'),
+    hidden: true
+  },
  {
    path: '',
    component: Layout,
    redirect: 'dashboard',
-    children: [{
-      path: 'dashboard',
-      component: () => import('@/views/dashboard/index'),
-      name: 'dashboard',
-      meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
-    }]
+    children: [
+      {
+        path: 'dashboard',
+        component: () => import('@/views/dashboard/index'),
+        name: 'Dashboard',
+        meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
+      }
+    ]
  },
  {
    path: '/documentation',
    component: Layout,
    redirect: '/documentation/index',
-    children: [{
-      path: 'index',
-      component: () => import('@/views/documentation/index'),
-      name: 'documentation',
-      meta: { title: 'documentation', icon: 'documentation', noCache: true }
-    }]
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/documentation/index'),
+        name: 'Documentation',
+        meta: { title: 'documentation', icon: 'documentation', noCache: true }
+      }
+    ]
  },
  {
    path: '/guide',
    component: Layout,
    redirect: '/guide/index',
-    children: [{
-      path: 'index',
-      component: () => import('@/views/guide/index'),
-      name: 'guide',
-      meta: { title: 'guide', icon: 'guide', noCache: true }
-    }]
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/guide/index'),
+        name: 'Guide',
+        meta: { title: 'guide', icon: 'guide', noCache: true }
+      }
+    ]
  }
 ]

@ -81,181 +109,88 @@ export const asyncRouterMap = [
      icon: 'lock',
      roles: ['admin', 'editor'] // you can set roles in root nav
    },
-    children: [{
-      path: 'page',
-      component: () => import('@/views/permission/page'),
-      name: 'pagePermission',
-      meta: {
-        title: 'pagePermission',
-        roles: ['admin'] // or you can only set roles in sub nav
+    children: [
+      {
+        path: 'page',
+        component: () => import('@/views/permission/page'),
+        name: 'PagePermission',
+        meta: {
+          title: 'pagePermission',
+          roles: ['admin'] // or you can only set roles in sub nav
+        }
+      },
+      {
+        path: 'directive',
+        component: () => import('@/views/permission/directive'),
+        name: 'DirectivePermission',
+        meta: {
+          title: 'directivePermission'
+          // if do not set roles, means: this page does not require permission
+        }
      }
-    }, {
-      path: 'directive',
-      component: () => import('@/views/permission/directive'),
-      name: 'directivePermission',
-      meta: {
-        title: 'directivePermission'
-        // if do not set roles, means: this page does not require permission
-      }
-    }]
+    ]
  },

  {
    path: '/icon',
    component: Layout,
-    children: [{
-      path: 'index',
-      component: () => import('@/views/svg-icons/index'),
-      name: 'icons',
-      meta: { title: 'icons', icon: 'icon', noCache: true }
-    }]
-  },
-
-  {
-    path: '/components',
-    component: Layout,
-    redirect: 'noredirect',
-    name: 'component-demo',
-    meta: {
-      title: 'components',
-      icon: 'component'
-    },
    children: [
-      { path: 'tinymce', component: () => import('@/views/components-demo/tinymce'), name: 'tinymce-demo', meta: { title: 'tinymce' }},
-      { path: 'markdown', component: () => import('@/views/components-demo/markdown'), name: 'markdown-demo', meta: { title: 'markdown' }},
-      { path: 'json-editor', component: () => import('@/views/components-demo/jsonEditor'), name: 'jsonEditor-demo', meta: { title: 'jsonEditor' }},
-      { path: 'splitpane', component: () => import('@/views/components-demo/splitpane'), name: 'splitpane-demo', meta: { title: 'splitPane' }},
-      { path: 'avatar-upload', component: () => import('@/views/components-demo/avatarUpload'), name: 'avatarUpload-demo', meta: { title: 'avatarUpload' }},
-      { path: 'dropzone', component: () => import('@/views/components-demo/dropzone'), name: 'dropzone-demo', meta: { title: 'dropzone' }},
-      { path: 'sticky', component: () => import('@/views/components-demo/sticky'), name: 'sticky-demo', meta: { title: 'sticky' }},
-      { path: 'count-to', component: () => import('@/views/components-demo/countTo'), name: 'countTo-demo', meta: { title: 'countTo' }},
-      { path: 'mixin', component: () => import('@/views/components-demo/mixin'), name: 'componentMixin-demo', meta: { title: 'componentMixin' }},
-      { path: 'back-to-top', component: () => import('@/views/components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }},
-      { path: 'drag-dialog', component: () => import('@/views/components-demo/dragDialog'), name: 'dragDialog-demo', meta: { title: 'dragDialog' }},
-      { path: 'dnd-list', component: () => import('@/views/components-demo/dndList'), name: 'dndList-demo', meta: { title: 'dndList' }},
-      { path: 'drag-kanban', component: () => import('@/views/components-demo/dragKanban'), name: 'dragKanban-demo', meta: { title: 'dragKanban' }}
+      {
+        path: 'index',
+        component: () => import('@/views/svg-icons/index'),
+        name: 'Icons',
+        meta: { title: 'icons', icon: 'icon', noCache: true }
+      }
    ]
  },

+  /** When your routing table is too long, you can split it into small modules**/
+  componentsRouter,
+  chartsRouter,
+  nestedRouter,
+  tableRouter,
+
  {
-    path: '/charts',
+    path: '/example',
    component: Layout,
-    redirect: 'noredirect',
-    name: 'charts',
+    redirect: '/example/list',
+    name: 'Example',
    meta: {
-      title: 'charts',
-      icon: 'chart'
+      title: 'example',
+      icon: 'example'
    },
    children: [
-      { path: 'keyboard', component: () => import('@/views/charts/keyboard'), name: 'keyboardChart', meta: { title: 'keyboardChart', noCache: true }},
-      { path: 'line', component: () => import('@/views/charts/line'), name: 'lineChart', meta: { title: 'lineChart', noCache: true }},
-      { path: 'mixchart', component: () => import('@/views/charts/mixChart'), name: 'mixChart', meta: { title: 'mixChart', noCache: true }}
+      {
+        path: 'create',
+        component: () => import('@/views/example/create'),
+        name: 'CreateArticle',
+        meta: { title: 'createArticle', icon: 'edit' }
+      },
+      {
+        path: 'edit/:id(\\d+)',
+        component: () => import('@/views/example/edit'),
+        name: 'EditArticle',
+        meta: { title: 'editArticle', noCache: true },
+        hidden: true
+      },
+      {
+        path: 'list',
+        component: () => import('@/views/example/list'),
+        name: 'ArticleList',
+        meta: { title: 'articleList', icon: 'list' }
+      }
    ]
  },

  {
    path: '/tab',
    component: Layout,
-    children: [{
-      path: 'index',
-      component: () => import('@/views/tab/index'),
-      name: 'tab',
-      meta: { title: 'tab', icon: 'tab' }
-    }]
-  },
-
-  {
-    path: '/table',
-    component: Layout,
-    redirect: '/table/complex-table',
-    name: 'table',
-    meta: {
-      title: 'Table',
-      icon: 'table'
-    },
-    children: [
-      { path: 'dynamic-table', component: () => import('@/views/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: 'dynamicTable' }},
-      { path: 'drag-table', component: () => import('@/views/table/dragTable'), name: 'dragTable', meta: { title: 'dragTable' }},
-      { path: 'inline-edit-table', component: () => import('@/views/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'inlineEditTable' }},
-      { path: 'tree-table', component: () => import('@/views/table/treeTable/treeTable'), name: 'treeTableDemo', meta: { title: 'treeTable' }},
-      { path: 'custom-tree-table', component: () => import('@/views/table/treeTable/customTreeTable'), name: 'customTreeTableDemo', meta: { title: 'customTreeTable' }},
-      { path: 'complex-table', component: () => import('@/views/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }}
-    ]
-  },
-
-  {
-    path: '/example',
-    component: Layout,
-    redirect: '/example/list',
-    name: 'example',
-    meta: {
-      title: 'example',
-      icon: 'example'
-    },
-    children: [
-      { path: 'create', component: () => import('@/views/example/create'), name: 'createArticle', meta: { title: 'createArticle', icon: 'edit' }},
-      { path: 'edit/:id(\\d+)', component: () => import('@/views/example/edit'), name: 'editArticle', meta: { title: 'editArticle', noCache: true }, hidden: true },
-      { path: 'list', component: () => import('@/views/example/list'), name: 'articleList', meta: { title: 'articleList', icon: 'list' }}
-    ]
-  },
-
-  {
-    path: '/nested',
-    component: Layout,
-    redirect: '/nested/menu1/menu1-1',
-    name: 'nested',
-    meta: {
-      title: 'nested',
-      icon: 'nested'
-    },
    children: [
      {
-        path: 'menu1',
-        component: () => import('@/views/nested/menu1/index'), // Parent router-view
-        name: 'menu1',
-        meta: { title: 'menu1' },
-        redirect: '/nested/menu1/menu1-1',
-        children: [
-          {
-            path: 'menu1-1',
-            component: () => import('@/views/nested/menu1/menu1-1'),
-            name: 'menu1-1',
-            meta: { title: 'menu1-1' }
-          },
-          {
-            path: 'menu1-2',
-            component: () => import('@/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: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-                name: 'menu1-2-1',
-                meta: { title: 'menu1-2-1' }
-              },
-              {
-                path: 'menu1-2-2',
-                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-                name: 'menu1-2-2',
-                meta: { title: 'menu1-2-2' }
-              }
-            ]
-          },
-          {
-            path: 'menu1-3',
-            component: () => import('@/views/nested/menu1/menu1-3'),
-            name: 'menu1-3',
-            meta: { title: 'menu1-3' }
-          }
-        ]
-      },
-      {
-        path: 'menu2',
-        name: 'menu2',
-        component: () => import('@/views/nested/menu2/index'),
-        meta: { title: 'menu2' }
+        path: 'index',
+        component: () => import('@/views/tab/index'),
+        name: 'Tab',
+        meta: { title: 'tab', icon: 'tab' }
      }
    ]
  },
@ -264,14 +199,24 @@ export const asyncRouterMap = [
    path: '/error',
    component: Layout,
    redirect: 'noredirect',
-    name: 'errorPages',
+    name: 'ErrorPages',
    meta: {
      title: 'errorPages',
      icon: '404'
    },
    children: [
-      { path: '401', component: () => import('@/views/errorPage/401'), name: 'page401', meta: { title: 'page401', noCache: true }},
-      { path: '404', component: () => import('@/views/errorPage/404'), name: 'page404', meta: { title: 'page404', noCache: true }}
+      {
+        path: '401',
+        component: () => import('@/views/errorPage/401'),
+        name: 'Page401',
+        meta: { title: 'page401', noCache: true }
+      },
+      {
+        path: '404',
+        component: () => import('@/views/errorPage/404'),
+        name: 'Page404',
+        meta: { title: 'page404', noCache: true }
+      }
    ]
  },

@ -279,22 +224,44 @@ export const asyncRouterMap = [
    path: '/error-log',
    component: Layout,
    redirect: 'noredirect',
-    children: [{ path: 'log', component: () => import('@/views/errorLog/index'), name: 'errorLog', meta: { title: 'errorLog', icon: 'bug' }}]
+    children: [
+      {
+        path: 'log',
+        component: () => import('@/views/errorLog/index'),
+        name: 'ErrorLog',
+        meta: { title: 'errorLog', icon: 'bug' }
+      }
+    ]
  },

  {
    path: '/excel',
    component: Layout,
    redirect: '/excel/export-excel',
-    name: 'excel',
+    name: 'Excel',
    meta: {
      title: 'excel',
      icon: 'excel'
    },
    children: [
-      { path: 'export-excel', component: () => import('@/views/excel/exportExcel'), name: 'exportExcel', meta: { title: 'exportExcel' }},
-      { path: 'export-selected-excel', component: () => import('@/views/excel/selectExcel'), name: 'selectExcel', meta: { title: 'selectExcel' }},
-      { path: 'upload-excel', component: () => import('@/views/excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'uploadExcel' }}
+      {
+        path: 'export-excel',
+        component: () => import('@/views/excel/exportExcel'),
+        name: 'ExportExcel',
+        meta: { title: 'exportExcel' }
+      },
+      {
+        path: 'export-selected-excel',
+        component: () => import('@/views/excel/selectExcel'),
+        name: 'EelectExcel',
+        meta: { title: 'selectExcel' }
+      },
+      {
+        path: 'upload-excel',
+        component: () => import('@/views/excel/uploadExcel'),
+        name: 'UploadExcel',
+        meta: { title: 'uploadExcel' }
+      }
    ]
  },

@ -304,27 +271,55 @@ export const asyncRouterMap = [
    redirect: '/zip/download',
    alwaysShow: true,
    meta: { title: 'zip', icon: 'zip' },
-    children: [{ path: 'download', component: () => import('@/views/zip/index'), name: 'exportZip', meta: { title: 'exportZip' }}]
+    children: [
+      {
+        path: 'download',
+        component: () => import('@/views/zip/index'),
+        name: 'ExportZip',
+        meta: { title: 'exportZip' }
+      }
+    ]
  },

  {
    path: '/theme',
    component: Layout,
    redirect: 'noredirect',
-    children: [{ path: 'index', component: () => import('@/views/theme/index'), name: 'theme', meta: { title: 'theme', icon: 'theme' }}]
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/theme/index'),
+        name: 'Theme',
+        meta: { title: 'theme', icon: 'theme' }
+      }
+    ]
  },

  {
    path: '/clipboard',
    component: Layout,
    redirect: 'noredirect',
-    children: [{ path: 'index', component: () => import('@/views/clipboard/index'), name: 'clipboardDemo', meta: { title: 'clipboardDemo', icon: 'clipboard' }}]
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/clipboard/index'),
+        name: 'ClipboardDemo',
+        meta: { title: 'clipboardDemo', icon: 'clipboard' }
+      }
+    ]
  },

  {
    path: '/i18n',
    component: Layout,
-    children: [{ path: 'index', component: () => import('@/views/i18n-demo/index'), name: 'i18n', meta: { title: 'i18n', icon: 'international' }}]
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/i18n-demo/index'),
+        name: 'I18n',
+        meta: { title: 'i18n', icon: 'international' }
+      }
+    ]
  },

  { path: '*', redirect: '/404', hidden: true }
--- a/src/router/modules/charts.js
+++ b/src/router/modules/charts.js
@ -0,0 +1,36 @@
+/** When your routing table is too long, you can split it into small modules**/
+
+import Layout from '@/views/layout/Layout'
+
+const chartsRouter = {
+  path: '/charts',
+  component: Layout,
+  redirect: 'noredirect',
+  name: 'Charts',
+  meta: {
+    title: 'charts',
+    icon: 'chart'
+  },
+  children: [
+    {
+      path: 'keyboard',
+      component: () => import('@/views/charts/keyboard'),
+      name: 'KeyboardChart',
+      meta: { title: 'keyboardChart', noCache: true }
+    },
+    {
+      path: 'line',
+      component: () => import('@/views/charts/line'),
+      name: 'LineChart',
+      meta: { title: 'lineChart', noCache: true }
+    },
+    {
+      path: 'mixchart',
+      component: () => import('@/views/charts/mixChart'),
+      name: 'MixChart',
+      meta: { title: 'mixChart', noCache: true }
+    }
+  ]
+}
+
+export default chartsRouter
--- a/src/router/modules/components.js
+++ b/src/router/modules/components.js
@ -0,0 +1,96 @@
+/** When your routing table is too long, you can split it into small modules**/
+
+import Layout from '@/views/layout/Layout'
+
+const componentsRouter = {
+  path: '/components',
+  component: Layout,
+  redirect: 'noredirect',
+  name: 'ComponentDemo',
+  meta: {
+    title: 'components',
+    icon: 'component'
+  },
+  children: [
+    {
+      path: 'tinymce',
+      component: () => import('@/views/components-demo/tinymce'),
+      name: 'TinymceDemo',
+      meta: { title: 'tinymce' }
+    },
+    {
+      path: 'markdown',
+      component: () => import('@/views/components-demo/markdown'),
+      name: 'MarkdownDemo',
+      meta: { title: 'markdown' }
+    },
+    {
+      path: 'json-editor',
+      component: () => import('@/views/components-demo/jsonEditor'),
+      name: 'JsonEditorDemo',
+      meta: { title: 'jsonEditor' }
+    },
+    {
+      path: 'splitpane',
+      component: () => import('@/views/components-demo/splitpane'),
+      name: 'SplitpaneDemo',
+      meta: { title: 'splitPane' }
+    },
+    {
+      path: 'avatar-upload',
+      component: () => import('@/views/components-demo/avatarUpload'),
+      name: 'AvatarUploadDemo',
+      meta: { title: 'avatarUpload' }
+    },
+    {
+      path: 'dropzone',
+      component: () => import('@/views/components-demo/dropzone'),
+      name: 'DropzoneDemo',
+      meta: { title: 'dropzone' }
+    },
+    {
+      path: 'sticky',
+      component: () => import('@/views/components-demo/sticky'),
+      name: 'StickyDemo',
+      meta: { title: 'sticky' }
+    },
+    {
+      path: 'count-to',
+      component: () => import('@/views/components-demo/countTo'),
+      name: 'CountToDemo',
+      meta: { title: 'countTo' }
+    },
+    {
+      path: 'mixin',
+      component: () => import('@/views/components-demo/mixin'),
+      name: 'ComponentMixinDemo',
+      meta: { title: 'componentMixin' }
+    },
+    {
+      path: 'back-to-top',
+      component: () => import('@/views/components-demo/backToTop'),
+      name: 'BackToTopDemo',
+      meta: { title: 'backToTop' }
+    },
+    {
+      path: 'drag-dialog',
+      component: () => import('@/views/components-demo/dragDialog'),
+      name: 'DragDialogDemo',
+      meta: { title: 'dragDialog' }
+    },
+    {
+      path: 'dnd-list',
+      component: () => import('@/views/components-demo/dndList'),
+      name: 'DndListDemo',
+      meta: { title: 'dndList' }
+    },
+    {
+      path: 'drag-kanban',
+      component: () => import('@/views/components-demo/dragKanban'),
+      name: 'DragKanbanDemo',
+      meta: { title: 'dragKanban' }
+    }
+  ]
+}
+
+export default componentsRouter
--- a/src/router/modules/nested.js
+++ b/src/router/modules/nested.js
@ -0,0 +1,66 @@
+/** When your routing table is too long, you can split it into small modules**/
+
+import Layout from '@/views/layout/Layout'
+
+const nestedRouter = {
+  path: '/nested',
+  component: Layout,
+  redirect: '/nested/menu1/menu1-1',
+  name: 'Nested',
+  meta: {
+    title: 'nested',
+    icon: 'nested'
+  },
+  children: [
+    {
+      path: 'menu1',
+      component: () => import('@/views/nested/menu1/index'), // Parent router-view
+      name: 'Menu1',
+      meta: { title: 'menu1' },
+      redirect: '/nested/menu1/menu1-1',
+      children: [
+        {
+          path: 'menu1-1',
+          component: () => import('@/views/nested/menu1/menu1-1'),
+          name: 'Menu1-1',
+          meta: { title: 'menu1-1' }
+        },
+        {
+          path: 'menu1-2',
+          component: () => import('@/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: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
+              name: 'Menu1-2-1',
+              meta: { title: 'menu1-2-1' }
+            },
+            {
+              path: 'menu1-2-2',
+              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
+              name: 'Menu1-2-2',
+              meta: { title: 'menu1-2-2' }
+            }
+          ]
+        },
+        {
+          path: 'menu1-3',
+          component: () => import('@/views/nested/menu1/menu1-3'),
+          name: 'Menu1-3',
+          meta: { title: 'menu1-3' }
+        }
+      ]
+    },
+    {
+      path: 'menu2',
+      name: 'Menu2',
+      component: () => import('@/views/nested/menu2/index'),
+      meta: { title: 'menu2' }
+    }
+  ]
+}
+
+export default nestedRouter
--- a/src/router/modules/table.js
+++ b/src/router/modules/table.js
@ -0,0 +1,53 @@
+/** When your routing table is too long, you can split it into small modules**/
+
+import Layout from '@/views/layout/Layout'
+
+const tableRouter = {
+  path: '/table',
+  component: Layout,
+  redirect: '/table/complex-table',
+  name: 'Table',
+  meta: {
+    title: 'Table',
+    icon: 'table'
+  },
+  children: [
+    {
+      path: 'dynamic-table',
+      component: () => import('@/views/table/dynamicTable/index'),
+      name: 'DynamicTable',
+      meta: { title: 'dynamicTable' }
+    },
+    {
+      path: 'drag-table',
+      component: () => import('@/views/table/dragTable'),
+      name: 'DragTable',
+      meta: { title: 'dragTable' }
+    },
+    {
+      path: 'inline-edit-table',
+      component: () => import('@/views/table/inlineEditTable'),
+      name: 'InlineEditTable',
+      meta: { title: 'inlineEditTable' }
+    },
+    {
+      path: 'tree-table',
+      component: () => import('@/views/table/treeTable/treeTable'),
+      name: 'TreeTableDemo',
+      meta: { title: 'treeTable' }
+    },
+    {
+      path: 'custom-tree-table',
+      component: () => import('@/views/table/treeTable/customTreeTable'),
+      name: 'CustomTreeTableDemo',
+      meta: { title: 'customTreeTable' }
+    },
+    {
+      path: 'complex-table',
+      component: () => import('@/views/table/complexTable'),
+      name: 'ComplexTable',
+      meta: { title: 'complexTable' }
+    }
+  ]
+}
+export default tableRouter
--- a/src/store/modules/tagsView.js
+++ b/src/store/modules/tagsView.js
@ -6,9 +6,11 @@ const tagsView = {
  mutations: {
    ADD_VISITED_VIEWS: (state, view) => {
      if (state.visitedViews.some(v => v.path === view.path)) return
-      state.visitedViews.push(Object.assign({}, view, {
-        title: view.meta.title || 'no-name'
-      }))
+      state.visitedViews.push(
+        Object.assign({}, view, {
+          title: view.meta.title || 'no-name'
+        })
+      )
      if (!view.meta.noCache) {
        state.cachedViews.push(view.name)
      }
@ -43,7 +45,7 @@ const tagsView = {
        }
      }
    },
-    DEL_ALL_VIEWS: (state) => {
+    DEL_ALL_VIEWS: state => {
      state.visitedViews = []
      state.cachedViews = []
    }
@ -53,19 +55,19 @@ const tagsView = {
      commit('ADD_VISITED_VIEWS', view)
    },
    delVisitedViews({ commit, state }, view) {
-      return new Promise((resolve) => {
+      return new Promise(resolve => {
        commit('DEL_VISITED_VIEWS', view)
        resolve([...state.visitedViews])
      })
    },
    delOthersViews({ commit, state }, view) {
-      return new Promise((resolve) => {
+      return new Promise(resolve => {
        commit('DEL_OTHERS_VIEWS', view)
        resolve([...state.visitedViews])
      })
    },
    delAllViews({ commit, state }) {
-      return new Promise((resolve) => {
+      return new Promise(resolve => {
        commit('DEL_ALL_VIEWS')
        resolve([...state.visitedViews])
      })
--- a/src/styles/btn.scss
+++ b/src/styles/btn.scss
@ -46,7 +46,6 @@
  border-radius: 8px;
  border: none;
  outline: none;
-  margin-right: 25px;
  transition: 600ms ease all;
  position: relative;
  display: inline-block;
--- a/src/utils/index.js
+++ b/src/utils/index.js
@ -25,7 +25,7 @@ export function parseTime(time, cFormat) {
  }
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
-    if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
+    if (key === 'a') { return ['一', '二', '三', '四', '五', '六', '日'][value - 1] }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
@ -43,7 +43,8 @@ export function formatTime(time, option) {

  if (diff < 30) {
    return '刚刚'
-  } else if (diff < 3600) { // less 1 hour
+  } else if (diff < 3600) {
+    // less 1 hour
    return Math.ceil(diff / 60) + '分钟前'
  } else if (diff < 3600 * 24) {
    return Math.ceil(diff / 3600) + '小时前'
@ -53,7 +54,17 @@ export function formatTime(time, option) {
  if (option) {
    return parseTime(time, option)
  } else {
-    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
+    return (
+      d.getMonth() +
+      1 +
+      '月' +
+      d.getDate() +
+      '日' +
+      d.getHours() +
+      '时' +
+      d.getMinutes() +
+      '分'
+    )
  }
 }

@ -81,9 +92,11 @@ export function getQueryObject(url) {
 export function getByteLen(val) {
  let len = 0
  for (let i = 0; i < val.length; i++) {
-    if (val[i].match(/[^\x00-\xff]/ig) != null) {
+    if (val[i].match(/[^\x00-\xff]/gi) != null) {
      len += 1
-    } else { len += 0.5 }
+    } else {
+      len += 0.5
+    }
  }
  return Math.floor(len)
 }
@ -100,11 +113,12 @@ export function cleanArray(actual) {

 export function param(json) {
  if (!json) return ''
-  return cleanArray(Object.keys(json).map(key => {
-    if (json[key] === undefined) return ''
-    return encodeURIComponent(key) + '=' +
-            encodeURIComponent(json[key])
-  })).join('&')
+  return cleanArray(
+    Object.keys(json).map(key => {
+      if (json[key] === undefined) return ''
+      return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
+    })
+  ).join('&')
 }

 export function param2Obj(url) {
@ -112,7 +126,14 @@ export function param2Obj(url) {
  if (!search) {
    return {}
  }
-  return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
+  return JSON.parse(
+    '{"' +
+      decodeURIComponent(search)
+        .replace(/"/g, '\\"')
+        .replace(/&/g, '","')
+        .replace(/=/g, '":"') +
+      '"}'
+  )
 }

 export function html2Text(val) {
@ -131,7 +152,7 @@ export function objectMerge(target, source) {
  if (Array.isArray(source)) {
    return source.slice()
  }
-  Object.keys(source).forEach((property) => {
+  Object.keys(source).forEach(property => {
    const sourceProperty = source[property]
    if (typeof sourceProperty === 'object') {
      target[property] = objectMerge(target[property], sourceProperty)
@ -145,7 +166,7 @@ export function objectMerge(target, source) {
 export function scrollTo(element, to, duration) {
  if (duration <= 0) return
  const difference = to - element.scrollTop
-  const perTick = difference / duration * 10
+  const perTick = (difference / duration) * 10
  setTimeout(() => {
    console.log(new Date())
    element.scrollTop = element.scrollTop + perTick
@ -163,7 +184,9 @@ export function toggleClass(element, className) {
  if (nameIndex === -1) {
    classString += '' + className
  } else {
-    classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length)
+    classString =
+      classString.substr(0, nameIndex) +
+      classString.substr(nameIndex + className.length)
  }
  element.className = classString
 }
@ -177,7 +200,8 @@ export const pickerOptions = [
      end.setTime(start.getTime())
      picker.$emit('pick', [start, end])
    }
-  }, {
+  },
+  {
    text: '最近一周',
    onClick(picker) {
      const end = new Date(new Date().toDateString())
@ -185,7 +209,8 @@ export const pickerOptions = [
      start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
      picker.$emit('pick', [start, end])
    }
-  }, {
+  },
+  {
    text: '最近一个月',
    onClick(picker) {
      const end = new Date(new Date().toDateString())
@ -193,7 +218,8 @@ export const pickerOptions = [
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      picker.$emit('pick', [start, end])
    }
-  }, {
+  },
+  {
    text: '最近三个月',
    onClick(picker) {
      const end = new Date(new Date().toDateString())
@ -201,7 +227,8 @@ export const pickerOptions = [
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      picker.$emit('pick', [start, end])
    }
-  }]
+  }
+]

 export function getTime(type) {
  if (type === 'start') {
@ -256,7 +283,7 @@ export function deepClone(source) {
    throw new Error('error arguments', 'shallowClone')
  }
  const targetObj = source.constructor === Array ? [] : {}
-  Object.keys(source).forEach((keys) => {
+  Object.keys(source).forEach(keys => {
    if (source[keys] && typeof source[keys] === 'object') {
      targetObj[keys] = deepClone(source[keys])
    } else {
--- a/src/utils/permission.js
+++ b/src/utils/permission.js
@ -23,4 +23,3 @@ export default function checkPermission(value) {
    return false
  }
 }
-
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -10,18 +10,21 @@ const service = axios.create({
 })

 // request interceptor
-service.interceptors.request.use(config => {
-  // Do something before request is sent
-  if (store.getters.token) {
-    // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
-    config.headers['X-Token'] = getToken()
+service.interceptors.request.use(
+  config => {
+    // Do something before request is sent
+    if (store.getters.token) {
+      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
+      config.headers['X-Token'] = getToken()
+    }
+    return config
+  },
+  error => {
+    // Do something with request error
+    console.log(error) // for debug
+    Promise.reject(error)
  }
-  return config
-}, error => {
-  // Do something with request error
-  console.log(error) // for debug
-  Promise.reject(error)
-})
+)

 // respone interceptor
 service.interceptors.response.use(
@ -67,6 +70,7 @@ service.interceptors.response.use(
      duration: 5 * 1000
    })
    return Promise.reject(error)
-  })
+  }
+)

 export default service
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@ -40,4 +40,3 @@ export function validateEmail(email) {
  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return re.test(email)
 }
-
--- a/src/views/charts/keyboard.vue
+++ b/src/views/charts/keyboard.vue
@ -1,6 +1,6 @@
 <template>
-  <div class='chart-container'>
-    <chart height='100%' width='100%'></chart>
+  <div class="chart-container">
+    <chart height="100%" width="100%"/>
  </div>
 </template>

@ -8,7 +8,7 @@
 import Chart from '@/components/Charts/keyboard'

 export default {
-  name: 'keyboardChart',
+  name: 'KeyboardChart',
  components: { Chart }
 }
 </script>
--- a/src/views/charts/line.vue
+++ b/src/views/charts/line.vue
@ -1,6 +1,6 @@
 <template>
-  <div class='chart-container'>
-    <chart height='100%' width='100%'></chart>
+  <div class="chart-container">
+    <chart height="100%" width="100%"/>
  </div>
 </template>

@ -8,7 +8,7 @@
 import Chart from '@/components/Charts/lineMarker'

 export default {
-  name: 'lineChart',
+  name: 'LineChart',
  components: { Chart }
 }
 </script>
--- a/src/views/charts/mixChart.vue
+++ b/src/views/charts/mixChart.vue
@ -1,6 +1,6 @@
 <template>
-  <div class='chart-container'>
-    <chart height='100%' width='100%'></chart>
+  <div class="chart-container">
+    <chart height="100%" width="100%"/>
  </div>
 </template>

@ -8,7 +8,7 @@
 import Chart from '@/components/Charts/mixChart'

 export default {
-  name: 'mixChart',
+  name: 'MixChart',
  components: { Chart }
 }
 </script>
--- a/src/views/clipboard/index.vue
+++ b/src/views/clipboard/index.vue
@ -2,12 +2,12 @@
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="use clipboard  directly" name="directly">
-        <el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input>
-        <el-button type="primary" icon="document" @click='handleCopy(inputData,$event)'>copy</el-button>
+        <el-input v-model="inputData" placeholder="Please input" style="width:400px;"/>
+        <el-button type="primary" icon="document" @click="handleCopy(inputData,$event)">copy</el-button>
      </el-tab-pane>
      <el-tab-pane label="use clipboard by v-directive" name="v-directive">
-        <el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input>
-        <el-button type="primary" icon="document" v-clipboard:copy='inputData' v-clipboard:success='clipboardSuccess'>copy</el-button>
+        <el-input v-model="inputData" placeholder="Please input" style="width:400px;"/>
+        <el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="document">copy</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
@ -18,7 +18,7 @@ import clip from '@/utils/clipboard' // use clipboard directly
 import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive

 export default {
-  name: 'clipboardDemo',
+  name: 'ClipboardDemo',
  directives: {
    clipboard
  },
--- a/src/views/components-demo/avatarUpload.vue
+++ b/src/views/components-demo/avatarUpload.vue
@ -2,16 +2,23 @@
  <div class="components-container">
    <code>This is based on
      <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
-      {{$t('components.imageUploadTips')}}
+      {{ $t('components.imageUploadTips') }}
    </code>

-    <pan-thumb :image="image"></pan-thumb>
+    <pan-thumb :image="image"/>

-    <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">Change avatar
+    <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">Change Avatar
    </el-button>

-    <image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess" langType="en"
-      :key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
+    <image-cropper
+      v-show="imagecropperShow"
+      :width="300"
+      :height="300"
+      :key="imagecropperKey"
+      url="https://httpbin.org/post"
+      lang-type="en"
+      @close="close"
+      @crop-upload-success="cropSuccess"/>
  </div>
 </template>

@ -20,7 +27,7 @@ import ImageCropper from '@/components/ImageCropper'
 import PanThumb from '@/components/PanThumb'

 export default {
-  name: 'avatarUpload-demo',
+  name: 'AvatarUploadDemo',
  components: { ImageCropper, PanThumb },
  data() {
    return {
--- a/src/views/components-demo/backToTop.vue
+++ b/src/views/components-demo/backToTop.vue
@ -1,7 +1,7 @@
 <template>
  <div class="components-container">
-    <code>{{$t('components.backToTopTips1')}}</code>
-    <code>{{$t('components.backToTopTips2')}}</code>
+    <code>{{ $t('components.backToTopTips1') }}</code>
+    <code>{{ $t('components.backToTopTips2') }}</code>
    <div class="placeholder-container">
      <div>placeholder</div>
      <div>placeholder</div>
@ -116,7 +116,7 @@
    <!--可自定义按钮的样式、show/hide临界点、返回的位置  -->
    <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
    <el-tooltip placement="top" content="tooltip">
-      <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
+      <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade"/>
    </el-tooltip>
  </div>
 </template>
@ -125,7 +125,7 @@
 import BackToTop from '@/components/BackToTop'

 export default {
-  name: 'backToTop-demo',
+  name: 'BackToTopDemo',
  components: { BackToTop },
  data() {
    return {
--- a/src/views/components-demo/countTo.vue
+++ b/src/views/components-demo/countTo.vue
@ -3,37 +3,46 @@
    <p class="warn-content">
      <a href="https://github.com/PanJiaChen/vue-countTo" target="_blank">countTo-component</a>
    </p>
-    <count-to ref="example" class="example" :start-val="_startVal" :end-val="_endVal" :duration="_duration" :decimals="_decimals"
-      :separator="_separator" :prefix="_prefix" :suffix="_suffix" :autoplay="false"></count-to>
+    <count-to
+      ref="example"
+      :start-val="_startVal"
+      :end-val="_endVal"
+      :duration="_duration"
+      :decimals="_decimals"
+      :separator="_separator"
+      :prefix="_prefix"
+      :suffix="_suffix"
+      :autoplay="false"
+      class="example"/>
    <div style="margin-left: 25%;margin-top: 40px;">
      <label class="label" for="startValInput">startVal:
-        <input type="number" v-model.number="setStartVal" name="startValInput" />
+        <input v-model.number="setStartVal" type="number" name="startValInput" >
      </label>
      <label class="label" for="endValInput">endVal:
-        <input type="number" v-model.number="setEndVal" name="endVaInput" />
+        <input v-model.number="setEndVal" type="number" name="endVaInput" >
      </label>
      <label class="label" for="durationInput">duration:
-        <input type="number" v-model.number="setDuration" name="durationInput" />
+        <input v-model.number="setDuration" type="number" name="durationInput" >
      </label>
      <div class="startBtn example-btn" @click="start">开始</div>
      <div class="pause-resume-btn example-btn" @click="pauseResume">暂停/恢复</div>
-      <br/>
+      <br>
      <label class="label" for="decimalsInput">decimals:
-        <input type="number" v-model.number="setDecimals" name="decimalsInput" />
+        <input v-model.number="setDecimals" type="number" name="decimalsInput" >
      </label>
      <label class="label" for="separatorInput">separator:
-        <input v-model="setSeparator" name="separatorInput" />
+        <input v-model="setSeparator" name="separatorInput" >
      </label>
      <label class="label" for="prefixInput">prefix:
-        <input v-model="setPrefix" name="prefixInput" />
+        <input v-model="setPrefix" name="prefixInput" >
      </label>
      <label class="label" for="suffixInput">suffix:
-        <input v-model="setSuffix" name="suffixInput" />
+        <input v-model="setSuffix" name="suffixInput" >
      </label>
    </div>
-    <code>&lt;count-to :start-val=&#x27;{{_startVal}}&#x27; :end-val=&#x27;{{_endVal}}&#x27; :duration=&#x27;{{_duration}}&#x27;
-      :decimals=&#x27;{{_decimals}}&#x27; :separator=&#x27;{{_separator}}&#x27; :prefix=&#x27;{{_prefix}}&#x27; :suffix=&#x27;{{_suffix}}&#x27;
-      :autoplay=false&gt;</code>
+    <code>&lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{ _duration }}&#x27;
+    :decimals=&#x27;{{ _decimals }}&#x27; :separator=&#x27;{{ _separator }}&#x27; :prefix=&#x27;{{ _prefix }}&#x27; :suffix=&#x27;{{ _suffix }}&#x27;
+    :autoplay=false&gt;</code>
  </div>
 </template>

@ -41,7 +50,7 @@
 import countTo from 'vue-count-to'

 export default {
-  name: 'countTo-demo',
+  name: 'CountToDemo',
  components: { countTo },
  data() {
    return {
@ -202,4 +211,3 @@ input {
 }
 </style>

-
--- a/src/views/components-demo/dndList.vue
+++ b/src/views/components-demo/dndList.vue
@ -4,7 +4,7 @@
      <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
    </code>
    <div class="editor-container">
-      <dnd-list :list1="list1" :list2="list2" list1Title="List" list2Title="Article pool"></dnd-list>
+      <dnd-list :list1="list1" :list2="list2" list1-title="List" list2-title="Article pool"/>
    </div>
  </div>
 </template>
@ -14,7 +14,7 @@ import DndList from '@/components/DndList'
 import { fetchList } from '@/api/article'

 export default {
-  name: 'dndList-demo',
+  name: 'DndListDemo',
  components: { DndList },
  data() {
    return {
@ -37,4 +37,3 @@ export default {
 }
 </script>

-
--- a/src/views/components-demo/dragDialog.vue
+++ b/src/views/components-demo/dragDialog.vue
@ -1,15 +1,14 @@
 <template>
  <div class="components-container">
    <el-button type="primary" @click="dialogTableVisible = true">open a Drag Dialog</el-button>
-    <el-dialog v-el-drag-dialog @dragDialog="handleDrag" title="Shipping address" :visible.sync="dialogTableVisible">
+    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="Shipping address" @dragDialog="handleDrag">
      <el-select ref="select" v-model="value" placeholder="请选择">
-        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-        </el-option>
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-table :data="gridData">
-        <el-table-column property="date" label="Date" width="150"></el-table-column>
-        <el-table-column property="name" label="Name" width="200"></el-table-column>
-        <el-table-column property="address" label="Address"></el-table-column>
+        <el-table-column property="date" label="Date" width="150"/>
+        <el-table-column property="name" label="Name" width="200"/>
+        <el-table-column property="address" label="Address"/>
      </el-table>
    </el-dialog>
  </div>
@ -19,7 +18,7 @@
 import elDragDialog from '@/directive/el-dragDialog' // base on element-ui

 export default {
-  name: 'dragDialog-demo',
+  name: 'DragDialogDemo',
  directives: { elDragDialog },
  data() {
    return {
--- a/src/views/components-demo/dragKanban.vue
+++ b/src/views/components-demo/dragKanban.vue
@ -1,15 +1,15 @@
 <template>
  <div class="components-container board">
-    <Kanban :key="1" class="kanban todo" :list="list1" :options="options" header-text="Todo"/>
-    <Kanban :key="2" class="kanban working" :list="list2" :options="options" header-text="Working"/>
-    <Kanban :key="3" class="kanban done" :list="list3" :options="options" header-text="Done"/>
+    <Kanban :key="1" :list="list1" :options="options" class="kanban todo" header-text="Todo"/>
+    <Kanban :key="2" :list="list2" :options="options" class="kanban working" header-text="Working"/>
+    <Kanban :key="3" :list="list3" :options="options" class="kanban done" header-text="Done"/>
  </div>
 </template>
 <script>
 import Kanban from '@/components/Kanban'

 export default {
-  name: 'dragKanban-demo',
+  name: 'DragKanbanDemo',
  components: {
    Kanban
  },
--- a/src/views/components-demo/dropzone.vue
+++ b/src/views/components-demo/dropzone.vue
@ -2,10 +2,10 @@
  <div class="components-container">
    <code>
      Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>.
-      {{$t('components.dropzoneTips')}}
+      {{ $t('components.dropzoneTips') }}
    </code>
    <div class="editor-container">
-      <dropzone v-on:dropzone-removedFile="dropzoneR" v-on:dropzone-success="dropzoneS" id="myVueDropzone" url="https://httpbin.org/post"></dropzone>
+      <dropzone id="myVueDropzone" url="https://httpbin.org/post" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS"/>
    </div>
  </div>
 </template>
@ -14,7 +14,7 @@
 import Dropzone from '@/components/Dropzone'

 export default {
-  name: 'dropzone-demo',
+  name: 'DropzoneDemo',
  components: { Dropzone },
  methods: {
    dropzoneS(file) {
@ -29,4 +29,3 @@ export default {
 }
 </script>

-
--- a/src/views/components-demo/jsonEditor.vue
+++ b/src/views/components-demo/jsonEditor.vue
@ -2,7 +2,7 @@
  <div class="components-container">
    <code>JsonEditor is base on  <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a> , lint base on json-lint </code>
    <div class="editor-container">
-      <json-editor ref="jsonEditor" v-model="value"></json-editor>
+      <json-editor ref="jsonEditor" v-model="value"/>
    </div>
  </div>
 </template>
@ -13,7 +13,7 @@ import JsonEditor from '@/components/JsonEditor'
 const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]'

 export default {
-  name: 'jsonEditor-demo',
+  name: 'JsonEditorDemo',
  components: { JsonEditor },
  data() {
    return {
--- a/src/views/components-demo/markdown.vue
+++ b/src/views/components-demo/markdown.vue
@ -2,14 +2,14 @@
  <div class="components-container">
    <code>Markdown is based on
      <a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，Simply encapsulated in Vue.
-      <a target="_blank" href="https://segmentfault.com/a/1190000009762198#articleHeader14">
+      <a target="_blank" href="https://juejin.im/post/593121aa0ce4630057f70d35#heading-15">
        相关文章 </a>
    </code>
    <div class="editor-container">
-      <markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :zIndex="20"></markdown-editor>
+      <markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :z-index="20"/>
    </div>
-    <el-button @click="markdown2Html" style="margin-top:80px;" type="primary" icon="el-icon-document">To HTML</el-button>
-    <div v-html="html"></div>
+    <el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="markdown2Html">To HTML</el-button>
+    <div v-html="html"/>
  </div>
 </template>

@ -27,7 +27,7 @@ const content = `
 `

 export default {
-  name: 'markdown-demo',
+  name: 'MarkdownDemo',
  components: { MarkdownEditor },
  data() {
    return {
@ -46,4 +46,3 @@ export default {
 }
 </script>

-
--- a/src/views/components-demo/mixin.vue
+++ b/src/views/components-demo/mixin.vue
@ -7,19 +7,19 @@
        </div>
        <div style="margin-bottom:50px;">
          <el-col :span="4" class="text-center">
-            <router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
+            <router-link class="pan-btn blue-btn" to="/documentation/index">Documentation</router-link>
          </el-col>
          <el-col :span="4" class="text-center">
-            <router-link class="pan-btn light-blue-btn" to="/charts/index">Charts</router-link>
+            <router-link class="pan-btn light-blue-btn" to="/icon/index">Icons</router-link>
          </el-col>
          <el-col :span="4" class="text-center">
-            <router-link class="pan-btn pink-btn" to="/excel/download">Excel</router-link>
+            <router-link class="pan-btn pink-btn" to="/excel/export-excel">Excel</router-link>
          </el-col>
          <el-col :span="4" class="text-center">
-            <router-link class="pan-btn green-btn" to="/example/table/complex-table">Table</router-link>
+            <router-link class="pan-btn green-btn" to="/table/complex-table">Table</router-link>
          </el-col>
          <el-col :span="4" class="text-center">
-            <router-link class="pan-btn tiffany-btn" to="/form/edit-form">Form</router-link>
+            <router-link class="pan-btn tiffany-btn" to="/example/create">Form</router-link>
          </el-col>
          <el-col :span="4" class="text-center">
            <router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
@ -37,7 +37,7 @@
          <div style="height:100px;">
            <el-form :model="demo" :rules="demoRules">
              <el-form-item prop="title">
-                <md-input icon="search" name="title" placeholder="输入标题" v-model="demo.title">标题</md-input>
+                <md-input v-model="demo.title" icon="search" name="title" placeholder="输入标题">标题</md-input>
              </el-form-item>
            </el-form>
          </div>
@ -74,20 +74,20 @@
            <span>hover text</span>
          </div>
          <div class="component-item">
-            <mallki className="mallki-text" text="vue-element-admin"></mallki>
+            <mallki class-name="mallki-text" text="vue-element-admin"/>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top:50px;">
-      <el-col :span="6">
+      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>Share</span>
          </div>
          <div class="component-item" style="height:420px;">
-            <dropdown-menu style="margin:0 auto;" title='系列文章' :items='articleList'></dropdown-menu>
+            <dropdown-menu :items="articleList" style="margin:0 auto;" title="系列文章"/>
          </div>
        </el-card>
      </el-col>
@ -104,7 +104,7 @@ import DropdownMenu from '@/components/Share/dropdownMenu'
 import waves from '@/directive/waves/index.js' // 水波纹指令

 export default {
-  name: 'componentMixin-demo',
+  name: 'ComponentMixinDemo',
  components: {
    PanThumb,
    MdInput,
@ -130,12 +130,11 @@ export default {
        title: [{ required: true, trigger: 'change', validator: validate }]
      },
      articleList: [
-        { title: '基础篇', href: 'https://segmentfault.com/a/1190000009275424' },
-        { title: '登录权限篇', href: 'https://segmentfault.com/a/1190000009506097' },
-        { title: '实战篇', href: 'https://segmentfault.com/a/1190000009762198' },
-        { title: 'vueAdmin-template 篇', href: 'https://segmentfault.com/a/1190000010043013' },
-        { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
-        { title: '优雅的使用 icon', href: 'https://segmentfault.com/a/https://segmentfault.com/a/1190000012213278' }
+        { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
+        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
+        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
+        { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
+        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' }
      ]
    }
  }
--- a/src/views/components-demo/splitpane.vue
+++ b/src/views/components-demo/splitpane.vue
@ -3,19 +3,19 @@
    <code><strong>SplitPane</strong> If you've used
      <a href="http://codepen.io/" target="_blank"> codepen</a>,
      <a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.
-      <a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'> Github repository</a>
+      <a href="https://github.com/PanJiaChen/vue-split-pane" target="_blank"> Github repository</a>
    </code>
-    <split-pane v-on:resize="resize" split="vertical">
+    <split-pane split="vertical" @resize="resize">
      <template slot="paneL">
-        <div class="left-container"></div>
+        <div class="left-container"/>
      </template>
      <template slot="paneR">
        <split-pane split="horizontal">
          <template slot="paneL">
-            <div class="top-container"></div>
+            <div class="top-container"/>
          </template>
          <template slot="paneR">
-            <div class="bottom-container"></div>
+            <div class="bottom-container"/>
          </template>
        </split-pane>
      </template>
@ -27,7 +27,7 @@
 import splitPane from 'vue-splitpane'

 export default {
-  name: 'splitpane-demo',
+  name: 'SplitpaneDemo',
  components: { splitPane },
  methods: {
    resize() {
--- a/src/views/components-demo/sticky.vue
+++ b/src/views/components-demo/sticky.vue
@ -1,14 +1,14 @@
 <template>
  <div>
-    <sticky className="sub-navbar">
+    <sticky class-name="sub-navbar">
      <el-dropdown trigger="click">
        <el-button plain>
-          Platform<i class="el-icon-caret-bottom el-icon--right"></i>
+          Platform<i class="el-icon-caret-bottom el-icon--right"/>
        </el-button>
-        <el-dropdown-menu class="no-border" slot="dropdown">
+        <el-dropdown-menu slot="dropdown" class="no-border">
          <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
            <el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
-              {{item.name}}
+              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-dropdown-menu>
@ -16,18 +16,17 @@

      <el-dropdown trigger="click">
        <el-button plain>
-          Link<i class="el-icon-caret-bottom el-icon--right"></i>
+          Link<i class="el-icon-caret-bottom el-icon--right"/>
        </el-button>
-        <el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown">
-          <el-input placeholder="Please enter the content" v-model="url">
+        <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:300px">
+          <el-input v-model="url" placeholder="Please enter the content">
            <template slot="prepend">Url</template>
          </el-input>
        </el-dropdown-menu>
      </el-dropdown>

      <div class="time-container">
-        <el-date-picker v-model="time" type="datetime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time">
-        </el-date-picker>
+        <el-date-picker v-model="time" :picker-options="pickerOptions" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time"/>
      </div>

      <el-button style="margin-left: 10px;" type="success">publish
@ -35,7 +34,7 @@
    </sticky>

    <div class="components-container">
-      <code>Sticky header, {{$t('components.stickyTips')}}</code>
+      <code>Sticky header, {{ $t('components.stickyTips') }}</code>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
@ -92,12 +91,11 @@
  </div>
 </template>

-
 <script>
 import Sticky from '@/components/Sticky'

 export default {
-  name: 'sticky-demo',
+  name: 'StickyDemo',
  components: { Sticky },
  data() {
    return {
--- a/src/views/components-demo/tinymce.vue
+++ b/src/views/components-demo/tinymce.vue
@ -1,13 +1,13 @@
 <template>
  <div class="components-container">
    <code>
-      {{$t('components.tinymceTips')}}
-      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html"> {{$t('components.documentation')}}</a>
+      {{ $t('components.tinymceTips') }}
+      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html"> {{ $t('components.documentation') }}</a>
    </code>
    <div>
-      <tinymce :height="300" v-model="content"></tinymce>
+      <tinymce :height="300" v-model="content"/>
    </div>
-    <div class="editor-content" v-html="content"></div>
+    <div class="editor-content" v-html="content"/>
  </div>
 </template>

@ -15,7 +15,7 @@
 import Tinymce from '@/components/Tinymce'

 export default {
-  name: 'tinymce-demo',
+  name: 'TinymceDemo',
  components: { Tinymce },
  data() {
    return {
@ -34,4 +34,3 @@ export default {
 }
 </style>

-
--- a/src/views/dashboard/admin/components/BarChart.vue
+++ b/src/views/dashboard/admin/components/BarChart.vue
@ -1,5 +1,5 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}"></div>
+  <div :class="className" :style="{height:height,width:width}"/>
 </template>

 <script>
--- a/src/views/dashboard/admin/components/BoxCard.vue
+++ b/src/views/dashboard/admin/components/BoxCard.vue
@ -1,26 +1,26 @@
 <template>
  <el-card class="box-card-component" style="margin-left:8px;">
    <div slot="header" class="box-card-header">
-      <img src='https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png'>
+      <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
    </div>
    <div style="position:relative;">
-      <pan-thumb class="panThumb" :image="avatar"></pan-thumb>
-      <mallki className='mallki-text' text='vue-element-admin'></mallki>
-      <div style="padding-top:35px;" class='progress-item'>
+      <pan-thumb :image="avatar" class="panThumb"/>
+      <mallki class-name="mallki-text" text="vue-element-admin"/>
+      <div style="padding-top:35px;" class="progress-item">
        <span>Vue</span>
-        <el-progress :percentage="70"></el-progress>
+        <el-progress :percentage="70"/>
      </div>
-      <div class='progress-item'>
+      <div class="progress-item">
        <span>JavaScript</span>
-        <el-progress :percentage="18"></el-progress>
+        <el-progress :percentage="18"/>
      </div>
-      <div class='progress-item'>
+      <div class="progress-item">
        <span>Css</span>
-        <el-progress :percentage="12"></el-progress>
+        <el-progress :percentage="12"/>
      </div>
-       <div class='progress-item'>
+      <div class="progress-item">
        <span>ESLint</span>
-        <el-progress :percentage="100" status="success"></el-progress>
+        <el-progress :percentage="100" status="success"/>
      </div>
    </div>
  </el-card>
@ -34,6 +34,15 @@ import Mallki from '@/components/TextHoverEffect/Mallki'
 export default {
  components: { PanThumb, Mallki },

+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        success: 'success',
+        pending: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
  data() {
    return {
      statisticsData: {
@ -48,15 +57,6 @@ export default {
      'avatar',
      'roles'
    ])
-  },
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        success: 'success',
-        pending: 'danger'
-      }
-      return statusMap[status]
-    }
  }
 }
 </script>
--- a/src/views/dashboard/admin/components/LineChart.vue
+++ b/src/views/dashboard/admin/components/LineChart.vue
@ -1,5 +1,5 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}"></div>
+  <div :class="className" :style="{height:height,width:width}"/>
 </template>

 <script>
@ -26,7 +26,8 @@ export default {
      default: true
    },
    chartData: {
-      type: Object
+      type: Object,
+      required: true
    }
  },
  data() {
@ -34,6 +35,14 @@ export default {
      chart: null
    }
  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
  mounted() {
    this.initChart()
    if (this.autoResize) {
@ -63,14 +72,6 @@ export default {
    this.chart.dispose()
    this.chart = null
  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-      }
-    }
-  },
  methods: {
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@ -1,13 +1,13 @@
 <template>
-  <el-row class="panel-group" :gutter="40">
+  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class='card-panel' @click="handleSetLineChartData('newVisitis')">
+      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">New Visits</div>
-          <count-to class="card-panel-num" :startVal="0" :endVal="102400" :duration="2600"></count-to>
+          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num"/>
        </div>
      </div>
    </el-col>
@ -18,7 +18,7 @@
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">Messages</div>
-          <count-to class="card-panel-num" :startVal="0" :endVal="81212" :duration="3000"></count-to>
+          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num"/>
        </div>
      </div>
    </el-col>
@ -29,7 +29,7 @@
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">Purchases</div>
-          <count-to class="card-panel-num" :startVal="0" :endVal="9280" :duration="3200"></count-to>
+          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num"/>
        </div>
      </div>
    </el-col>
@ -40,7 +40,7 @@
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">Shoppings</div>
-          <count-to class="card-panel-num" :startVal="0" :endVal="13600" :duration="3600"></count-to>
+          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num"/>
        </div>
      </div>
    </el-col>
--- a/src/views/dashboard/admin/components/PieChart.vue
+++ b/src/views/dashboard/admin/components/PieChart.vue
@ -1,5 +1,5 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}"></div>
+  <div :class="className" :style="{height:height,width:width}"/>
 </template>

 <script>
--- a/src/views/dashboard/admin/components/RaddarChart.vue
+++ b/src/views/dashboard/admin/components/RaddarChart.vue
@ -1,5 +1,5 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}"></div>
+  <div :class="className" :style="{height:height,width:width}"/>
 </template>

 <script>
--- a/src/views/dashboard/admin/components/TodoList/Todo.vue
+++ b/src/views/dashboard/admin/components/TodoList/Todo.vue
@ -1,17 +1,19 @@
 <template>
-  <li class="todo" :class="{ completed: todo.done, editing: editing }">
+  <li :class="{ completed: todo.done, editing: editing }" class="todo">
    <div class="view">
-      <input class="toggle"
-        type="checkbox"
+      <input
        :checked="todo.done"
+        class="toggle"
+        type="checkbox"
        @change="toggleTodo( todo)">
-      <label v-text="todo.text" @dblclick="editing = true"></label>
-      <button class="destroy" @click="deleteTodo( todo )"></button>
+      <label @dblclick="editing = true" v-text="todo.text"/>
+      <button class="destroy" @click="deleteTodo( todo )"/>
    </div>
-    <input class="edit"
-      v-show="editing"
+    <input
      v-focus="editing"
+      v-show="editing"
      :value="todo.text"
+      class="edit"
      @keyup.enter="doneEdit"
      @keyup.esc="cancelEdit"
      @blur="doneEdit">
@ -21,12 +23,6 @@
 <script>
 export default {
  name: 'Todo',
-  props: ['todo'],
-  data() {
-    return {
-      editing: false
-    }
-  },
  directives: {
    focus(el, { value }, { context }) {
      if (value) {
@ -36,6 +32,19 @@ export default {
      }
    }
  },
+  props: {
+    todo: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      editing: false
+    }
+  },
  methods: {
    deleteTodo(todo) {
      this.$emit('deleteTodo', todo)
--- a/src/views/dashboard/admin/components/TodoList/index.scss
+++ b/src/views/dashboard/admin/components/TodoList/index.scss
@ -201,6 +201,7 @@
    font-size: 30px;
    color: #cc9a9a;
    transition: color 0.2s ease-out;
+    cursor: pointer;
  }
  .todo-list li .destroy:hover {
    color: #af5b5e;
--- a/src/views/dashboard/admin/components/TodoList/index.vue
+++ b/src/views/dashboard/admin/components/TodoList/index.vue
@ -5,16 +5,21 @@
      <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
    </header>
    <!-- main section -->
-    <section class="main" v-show="todos.length">
-      <input class="toggle-all" id="toggle-all" type="checkbox" :checked="allChecked" @change="toggleAll({ done: !allChecked })">
-      <label for="toggle-all"></label>
+    <section v-show="todos.length" class="main">
+      <input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
+      <label for="toggle-all"/>
      <ul class="todo-list">
-        <todo @toggleTodo='toggleTodo' @editTodo='editTodo' @deleteTodo='deleteTodo' v-for="(todo, index) in filteredTodos" :key="index"
-          :todo="todo"></todo>
+        <todo
+          v-for="(todo, index) in filteredTodos"
+          :key="index"
+          :todo="todo"
+          @toggleTodo="toggleTodo"
+          @editTodo="editTodo"
+          @deleteTodo="deleteTodo"/>
      </ul>
    </section>
    <!-- footer -->
-    <footer class="footer" v-show="todos.length">
+    <footer v-show="todos.length" class="footer">
      <span class="todo-count">
        <strong>{{ remaining }}</strong>
        {{ remaining | pluralize('item') }} left
@ -52,6 +57,10 @@ const defalutList = [
 ]
 export default {
  components: { Todo },
+  filters: {
+    pluralize: (n, w) => n === 1 ? w : w + 's',
+    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
+  },
  data() {
    return {
      visibility: 'all',
@ -108,10 +117,6 @@ export default {
        this.setLocalStorage()
      })
    }
-  },
-  filters: {
-    pluralize: (n, w) => n === 1 ? w : w + 's',
-    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
  }
 }
 </script>
--- a/src/views/dashboard/admin/components/TransactionTable.vue
+++ b/src/views/dashboard/admin/components/TransactionTable.vue
@ -2,17 +2,17 @@
  <el-table :data="list" style="width: 100%;padding-top: 15px;">
    <el-table-column label="Order_No" min-width="200">
      <template slot-scope="scope">
-        {{scope.row.order_no |  orderNoFilter}}
+        {{ scope.row.order_no | orderNoFilter }}
      </template>
    </el-table-column>
    <el-table-column label="Price" width="195" align="center">
      <template slot-scope="scope">
-        ¥{{scope.row.price | toThousandslsFilter}}
+        ¥{{ scope.row.price | toThousandslsFilter }}
      </template>
    </el-table-column>
    <el-table-column label="Status" width="100" align="center">
      <template slot-scope="scope">
-        <el-tag :type="scope.row.status | statusFilter"> {{scope.row.status}}</el-tag>
+        <el-tag :type="scope.row.status | statusFilter"> {{ scope.row.status }}</el-tag>
      </template>
    </el-table-column>
  </el-table>
@ -22,11 +22,6 @@
 import { fetchList } from '@/api/transaction'

 export default {
-  data() {
-    return {
-      list: null
-    }
-  },
  filters: {
    statusFilter(status) {
      const statusMap = {
@ -39,6 +34,11 @@ export default {
      return str.substring(0, 30)
    }
  },
+  data() {
+    return {
+      list: null
+    }
+  },
  created() {
    this.fetchData()
  },
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@ -1,48 +1,47 @@
 <template>
  <div class="dashboard-editor-container">

-    <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"></github-corner>
+    <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"/>

-    <panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group>
+    <panel-group @handleSetLineChartData="handleSetLineChartData"/>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData"></line-chart>
+      <line-chart :chart-data="lineChartData"/>
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
-          <raddar-chart></raddar-chart>
+          <raddar-chart/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
-          <pie-chart></pie-chart>
+          <pie-chart/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
-          <bar-chart></bar-chart>
+          <bar-chart/>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="8">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
-        <transaction-table></transaction-table>
+        <transaction-table/>
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <todo-list></todo-list>
+        <todo-list/>
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <box-card></box-card>
+        <box-card/>
      </el-col>
    </el-row>

  </div>
 </template>

-
 <script>
 import GithubCorner from '@/components/GithubCorner'
 import PanelGroup from './components/PanelGroup'
@ -74,7 +73,7 @@ const lineChartData = {
 }

 export default {
-  name: 'dashboard-admin',
+  name: 'DashboardAdmin',
  components: {
    GithubCorner,
    PanelGroup,
--- a/src/views/dashboard/editor/index.vue
+++ b/src/views/dashboard/editor/index.vue
@ -1,17 +1,17 @@
 <template>
  <div class="dashboard-editor-container">
    <div class=" clearfix">
-      <pan-thumb style="float: left" :image="avatar"> Your roles:
-        <span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
+      <pan-thumb :image="avatar" style="float: left"> Your roles:
+        <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
      </pan-thumb>
-      <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"></github-corner>
+      <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"/>
      <div class="info-container">
-        <span class="display_name">{{name}}</span>
+        <span class="display_name">{{ name }}</span>
        <span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
      </div>
    </div>
    <div>
-      <img class="emptyGif" :src="emptyGif">
+      <img :src="emptyGif" class="emptyGif">
    </div>
  </div>
 </template>
@ -22,7 +22,7 @@ import PanThumb from '@/components/PanThumb'
 import GithubCorner from '@/components/GithubCorner'

 export default {
-  name: 'dashboard-editor',
+  name: 'DashboardEditor',
  components: { PanThumb, GithubCorner },
  data() {
    return {
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@ -1,6 +1,6 @@
 <template>
  <div class="dashboard-container">
-    <component :is="currentRole"></component>
+    <component :is="currentRole"/>
  </div>
 </template>

@ -10,7 +10,7 @@ import adminDashboard from './admin'
 import editorDashboard from './editor'

 export default {
-  name: 'dashboard',
+  name: 'Dashboard',
  components: { adminDashboard, editorDashboard },
  data() {
    return {
--- a/src/views/documentation/index.vue
+++ b/src/views/documentation/index.vue
@ -1,25 +1,28 @@
 <template>
  <div class="app-container documentation-container">
-    <a class="document-btn" target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/">{{$t('documentation.documentation')}}</a>
-    <a class="document-btn" target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">{{$t('documentation.github')}}</a>
-    <dropdown-menu style="float:left;margin-left:50px;" title='系列文章' :items='articleList'></dropdown-menu>
+    <a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/">{{ $t('documentation.documentation') }}</a>
+    <a class="document-btn" target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">{{ $t('documentation.github') }}</a>
+    <a class="document-btn" target="_blank" href="https://panjiachen.gitee.io/vue-element-admin-site/zh/">国内文档</a>
+    <dropdown-menu :items="articleList" style="float:left;margin-left:50px;" title="系列文章"/>
  </div>
 </template>
 <script>
 import DropdownMenu from '@/components/Share/dropdownMenu'

 export default {
-  name: 'documentation',
+  name: 'Documentation',
  components: { DropdownMenu },
  data() {
    return {
      articleList: [
-        { title: '基础篇', href: 'https://segmentfault.com/a/1190000009275424' },
-        { title: '登录权限篇', href: 'https://segmentfault.com/a/1190000009506097' },
-        { title: '实战篇', href: 'https://segmentfault.com/a/1190000009762198' },
-        { title: 'vueAdmin-template 篇', href: 'https://segmentfault.com/a/1190000010043013' },
+        { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
+        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
+        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
+        { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
        { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
-        { title: '优雅的使用 icon', href: 'https://segmentfault.com/a/1190000012213278' }
+        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
+        { title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
+        { title: 'webpack4（下）', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
      ]
    }
  }
--- a/src/views/errorLog/errorTestA.vue
+++ b/src/views/errorLog/errorTestA.vue
@ -1,13 +1,13 @@
 <template>
  <div>
    <!--error code-->
-    {{a.a}}
+    {{ a.a }}
    <!--error code-->
  </div>
 </template>

 <script>
 export default {
-  name: 'errorTestA'
+  name: 'ErrorTestA'
 }
 </script>
--- a/src/views/errorLog/errorTestB.vue
+++ b/src/views/errorLog/errorTestB.vue
@ -1,5 +1,5 @@
 <template>
-  <div></div>
+  <div/>
 </template>

 <script>
--- a/src/views/errorLog/index.vue
+++ b/src/views/errorLog/index.vue
@ -1,17 +1,17 @@
 <template>
  <div class="errPage-container">
-    <errorA></errorA>
-    <errorB></errorB>
+    <errorA/>
+    <errorB/>
    <!-- $t is vue-i18n global function to translate lang -->
-    <h3>{{$t('errorLog.tips')}}</h3>
+    <h3>{{ $t('errorLog.tips') }}</h3>
    <code>
-      {{$t('errorLog.description')}}
+      {{ $t('errorLog.description') }}
      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/error.html">
-        {{$t('errorLog.documentation')}}
+        {{ $t('errorLog.documentation') }}
      </a>
    </code>
    <a href="#">
-      <img src='https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif'>
+      <img src="https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif">
    </a>
  </div>
 </template>
@ -21,7 +21,7 @@ import errorA from './errorTestA'
 import errorB from './errorTestB'

 export default {
-  name: 'errorLog',
+  name: 'ErrorLog',
  components: { errorA, errorB }
 }
 </script>
--- a/src/views/errorPage/401.vue
+++ b/src/views/errorPage/401.vue
@ -1,10 +1,10 @@
 <template>
  <div class="errPage-container">
-    <el-button @click="back" icon='arrow-left' class="pan-back-btn">返回</el-button>
+    <el-button icon="arrow-left" class="pan-back-btn" @click="back">返回</el-button>
    <el-row>
      <el-col :span="12">
        <h1 class="text-jumbo text-ginormous">Oops!</h1>
-        gif来源<a href='https://zh.airbnb.com/' target='_blank'>airbnb</a> 页面
+        gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
        <h2>你没有权限去该页面</h2>
        <h6>如有不满请联系你领导</h6>
        <ul class="list-unstyled">
@ -13,15 +13,15 @@
            <router-link to="/dashboard">回首页</router-link>
          </li>
          <li class="link-type"><a href="https://www.taobao.com/">随便看看</a></li>
-          <li><a @click.prevent="dialogVisible=true" href="#">点我看图</a></li>
+          <li><a href="#" @click.prevent="dialogVisible=true">点我看图</a></li>
        </ul>
      </el-col>
      <el-col :span="12">
        <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
      </el-col>
    </el-row>
-    <el-dialog title="随便看" :visible.sync="dialogVisible">
-      <img class="pan-img" :src="ewizardClap">
+    <el-dialog :visible.sync="dialogVisible" title="随便看">
+      <img :src="ewizardClap" class="pan-img">
    </el-dialog>
  </div>
 </template>
@ -30,7 +30,7 @@
 import errGif from '@/assets/401_images/401.gif'

 export default {
-  name: 'page401',
+  name: 'Page401',
  data() {
    return {
      errGif: errGif + '?' + +new Date(),
--- a/src/views/errorPage/404.vue
+++ b/src/views/errorPage/404.vue
@ -2,15 +2,15 @@
  <div class="wscn-http404-container">
    <div class="wscn-http404">
      <div class="pic-404">
-        <img class="pic-404__parent" :src="img_404" alt="404">
-        <img class="pic-404__child left" :src="img_404_cloud" alt="404">
-        <img class="pic-404__child mid" :src="img_404_cloud" alt="404">
-        <img class="pic-404__child right" :src="img_404_cloud" alt="404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
      </div>
      <div class="bullshit">
        <div class="bullshit__oops">OOPS!</div>
        <div class="bullshit__info">版权所有
-          <a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a>
+          <a class="link-type" href="https://wallstreetcn.com" target="_blank">华尔街见闻</a>
        </div>
        <div class="bullshit__headline">{{ message }}</div>
        <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
@ -21,17 +21,9 @@
 </template>

 <script>
-import img_404 from '@/assets/404_images/404.png'
-import img_404_cloud from '@/assets/404_images/404_cloud.png'

 export default {
-  name: 'page404',
-  data() {
-    return {
-      img_404,
-      img_404_cloud
-    }
-  },
+  name: 'Page404',
  computed: {
    message() {
      return '网管说这个页面你不能进......'
--- a/src/views/example/components/ArticleDetail.vue
+++ b/src/views/example/components/ArticleDetail.vue
@ -1,8 +1,8 @@
 <template>
  <div class="createPost-container">
-    <el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">
+    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">

-      <sticky :className="'sub-navbar '+postForm.status">
+      <sticky :class-name="'sub-navbar '+postForm.status">
        <CommentDropdown v-model="postForm.comment_disabled" />
        <PlatformDropdown v-model="postForm.platforms" />
        <SourceUrlDropdown v-model="postForm.source_uri" />
@ -18,7 +18,7 @@

          <el-col :span="24">
            <el-form-item style="margin-bottom: 40px;" prop="title">
-              <MDinput name="name" v-model="postForm.title" required :maxlength="100">
+              <MDinput v-model="postForm.title" :maxlength="100" name="name" required>
                标题
              </MDinput>
            </el-form-item>
@ -27,25 +27,27 @@
              <el-row>
                <el-col :span="8">
                  <el-form-item label-width="45px" label="作者:" class="postInfo-container-item">
-                    <el-select v-model="postForm.author" filterable remote placeholder="搜索用户" :remote-method="getRemoteUserList">
-                      <el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item">
-                      </el-option>
+                    <el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable remote placeholder="搜索用户">
+                      <el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item"/>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="10">
                  <el-form-item label-width="80px" label="发布时间:" class="postInfo-container-item">
-                    <el-date-picker v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
-                    </el-date-picker>
+                    <el-date-picker v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"/>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label-width="60px" label="重要性:" class="postInfo-container-item">
-                    <el-rate style="margin-top:8px;" v-model="postForm.importance" :max='3' :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :low-threshold="1"
-                      :high-threshold="3">
-                    </el-rate>
+                    <el-rate
+                      v-model="postForm.importance"
+                      :max="3"
+                      :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
+                      :low-threshold="1"
+                      :high-threshold="3"
+                      style="margin-top:8px;"/>
                  </el-form-item>
                </el-col>
              </el-row>
@ -54,13 +56,12 @@
        </el-row>

        <el-form-item style="margin-bottom: 40px;" label-width="45px" label="摘要:">
-          <el-input type="textarea" class="article-textarea" :rows="1" autosize placeholder="请输入内容" v-model="postForm.content_short">
-          </el-input>
-          <span class="word-counter" v-show="contentShortLength">{{contentShortLength}}字</span>
+          <el-input :rows="1" v-model="postForm.content_short" type="textarea" class="article-textarea" autosize placeholder="请输入内容"/>
+          <span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}字</span>
        </el-form-item>

        <div class="editor-container">
-          <Tinymce :height=400 ref="editor" v-model="postForm.content" />
+          <Tinymce ref="editor" :height="400" v-model="postForm.content" />
        </div>

        <div style="margin-bottom: 20px;">
@ -100,7 +101,7 @@ const defaultForm = {
 }

 export default {
-  name: 'articleDetail',
+  name: 'ArticleDetail',
  components: { Tinymce, MDinput, Upload, Multiselect, Sticky, Warning, CommentDropdown, PlatformDropdown, SourceUrlDropdown },
  props: {
    isEdit: {
@ -115,7 +116,7 @@ export default {
          message: rule.field + '为必传项',
          type: 'error'
        })
-        callback(null)
+        callback(new Error(rule.field + '为必传项'))
      } else {
        callback()
      }
@ -129,7 +130,7 @@ export default {
            message: '外链url填写不正确',
            type: 'error'
          })
-          callback(null)
+          callback(new Error('外链url填写不正确'))
        }
      } else {
        callback()
--- a/src/views/example/components/Dropdown/Comment.vue
+++ b/src/views/example/components/Dropdown/Comment.vue
@ -1,11 +1,11 @@
 <template>
-  <el-dropdown trigger="click" :show-timeout="100">
-    <el-button plain>{{!comment_disabled?'评论已打开':'评论已关闭'}}
-      <i class="el-icon-caret-bottom el-icon--right"></i>
+  <el-dropdown :show-timeout="100" trigger="click">
+    <el-button plain>{{ !comment_disabled?'评论已打开':'评论已关闭' }}
+      <i class="el-icon-caret-bottom el-icon--right"/>
    </el-button>
-    <el-dropdown-menu class="no-padding" slot="dropdown">
+    <el-dropdown-menu slot="dropdown" class="no-padding">
      <el-dropdown-item>
-        <el-radio-group style="padding: 10px;" v-model="comment_disabled">
+        <el-radio-group v-model="comment_disabled" style="padding: 10px;">
          <el-radio :label="true">关闭评论</el-radio>
          <el-radio :label="false">打开评论</el-radio>
        </el-radio-group>
@ -16,7 +16,12 @@

 <script>
 export default {
-  props: ['value'],
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
  computed: {
    comment_disabled: {
      get() {
--- a/src/views/example/components/Dropdown/Platform.vue
+++ b/src/views/example/components/Dropdown/Platform.vue
@ -1,13 +1,13 @@
 <template>
  <el-dropdown :hide-on-click="false" :show-timeout="100" trigger="click">
    <el-button plain>
-      平台({{platforms.length}})
-      <i class="el-icon-caret-bottom el-icon--right"></i>
+      平台({{ platforms.length }})
+      <i class="el-icon-caret-bottom el-icon--right"/>
    </el-button>
-    <el-dropdown-menu class="no-border" slot="dropdown">
+    <el-dropdown-menu slot="dropdown" class="no-border">
      <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
        <el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
-          {{item.name}}
+          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
    </el-dropdown-menu>
@ -16,7 +16,13 @@

 <script>
 export default {
-  props: ['value'],
+  props: {
+    value: {
+      required: true,
+      default: () => [],
+      type: Array
+    }
+  },
  data() {
    return {
      platformsOptions: [
--- a/src/views/example/components/Dropdown/SourceUrl.vue
+++ b/src/views/example/components/Dropdown/SourceUrl.vue
@ -2,11 +2,11 @@
  <el-dropdown :show-timeout="100" trigger="click">
    <el-button plain>
      外链
-      <i class="el-icon-caret-bottom el-icon--right"></i>
+      <i class="el-icon-caret-bottom el-icon--right"/>
    </el-button>
-    <el-dropdown-menu class="no-padding no-border" style="width:400px" slot="dropdown">
+    <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:400px">
      <el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
-        <el-input placeholder="请输入内容" v-model="source_uri">
+        <el-input v-model="source_uri" placeholder="请输入内容">
          <template slot="prepend">填写url</template>
        </el-input>
      </el-form-item>
@ -16,7 +16,12 @@

 <script>
 export default {
-  props: ['value'],
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
  computed: {
    source_uri: {
      get() {
--- a/Show More
+++ b/Show More