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({
+    process.stdout.write(
+      stats.toString({
        colors: true,
        modules: false,
        children: false,
        chunks: false,
        chunkModules: false
-    }) + '\n\n')
+      }) + '\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(
+    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'
-    ))
+          " 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,15 +27,18 @@ 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 ' +
+      warnings.push(
+        mod.name +
+          ': ' +
+          chalk.red(mod.currentVersion) +
+          ' should be ' +
          chalk.green(mod.versionRequirement)
      )
    }
@ -40,7 +46,11 @@ module.exports = function () {

  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'
+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'
+    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({
+      devWebpackConfig.plugins.push(
+        new FriendlyErrorsPlugin({
          compilationSuccessInfo: {
-          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+            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{
+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,34 +1,39 @@
 <template>
-<div class="vue-image-crop-upload" v-show="value">
+  <div v-show="value" class="vue-image-crop-upload">
    <div class="vicp-wrap">
      <div class="vicp-close" @click="off">
-      <i class="vicp-icon4"></i>
+        <i class="vicp-icon4"/>
      </div>

-    <div class="vicp-step1" v-show="step == 1">
+      <div v-show="step == 1" class="vicp-step1">
        <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 v-show="loading != 1" class="vicp-icon1">
+            <i class="vicp-icon1-arrow"/>
+            <i class="vicp-icon1-body"/>
+            <i class="vicp-icon1-bottom"/>
          </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">
+          <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-error" v-show="hasError">
-        <i class="vicp-icon2"></i> {{ errorMsg }}
+        <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 class="vicp-step2" v-if="step == 2">
+      <div v-if="step == 2" class="vicp-step2">
        <div class="vicp-crop">
-        <div class="vicp-crop-left" v-show="true">
+          <div v-show="true" class="vicp-crop-left">
            <div class="vicp-img-container">
-            <img :src="sourceImgUrl" :style="sourceImgStyle" class="vicp-img" draggable="false"
+              <img
+                ref="img"
+                :src="sourceImgUrl"
+                :style="sourceImgStyle"
+                class="vicp-img"
+                draggable="false"
                @drag="preventDefault"
                @dragstart="preventDefault"
                @dragend="preventDefault"
@ -43,30 +48,29 @@
                @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>
+                @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-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>
+              <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 class="vicp-rotate" v-if="!noRotate">
+            <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 class="vicp-crop-right" v-show="true">
+          <div v-show="true" class="vicp-crop-right">
            <div class="vicp-preview">
-            <div class="vicp-preview-item" v-if="!noSquare">
+              <div v-if="!noSquare" class="vicp-preview-item">
                <img :src="createImgUrl" :style="previewStyle">
                <span>{{ lang.preview }}</span>
              </div>
-            <div class="vicp-preview-item vicp-preview-item-circle" v-if="!noCircle">
+              <div v-if="!noCircle" class="vicp-preview-item vicp-preview-item-circle">
                <img :src="createImgUrl" :style="previewStyle">
                <span>{{ lang.preview }}</span>
              </div>
@ -79,17 +83,17 @@
        </div>
      </div>

-    <div class="vicp-step3" v-if="step == 3">
+      <div v-if="step == 3" class="vicp-step3">
        <div class="vicp-upload">
-        <span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span>
+          <span v-show="loading === 1" class="vicp-loading">{{ lang.loading }}</span>
          <div class="vicp-progress-wrap">
-          <span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span>
+            <span v-show="loading === 1" :style="progressStyle" class="vicp-progress"/>
          </div>
-        <div class="vicp-error" v-show="hasError">
-          <i class="vicp-icon2"></i> {{ errorMsg }}
+          <div v-show="hasError" class="vicp-error">
+            <i class="vicp-icon2"/> {{ errorMsg }}
          </div>
-        <div class="vicp-success" v-show="loading === 2">
-          <i class="vicp-icon3"></i> {{ lang.success }}
+          <div v-show="loading === 2" class="vicp-success">
+            <i class="vicp-icon3"/> {{ lang.success }}
          </div>
        </div>
        <div class="vicp-operate">
@ -97,13 +101,13 @@
          <a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
        </div>
      </div>
-    <canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas>
+      <canvas v-show="false" ref="canvas" :width="width" :height="height"/>
+    </div>
  </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,7 +32,7 @@ export default {
  transition: color 0.5s 0.25s;
  overflow: hidden;
  position: relative;
-display: inline-block;
+  display: inline-block;
  line-height: 1;
  outline: none;
  text-decoration: none;
@ -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/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,15 +1,21 @@
 <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">
-            <div class="image-preview-wrapper" v-show="imageUrl.length>1">
+      <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 @click="rmImage" class="el-icon-delete"></i>
+          <i class="el-icon-delete" @click="rmImage"/>
        </div>
      </div>
    </div>
@ -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: [{
+    children: [
+      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
-      name: 'dashboard',
+        name: 'Dashboard',
        meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
-    }]
+      }
+    ]
  },
  {
    path: '/documentation',
    component: Layout,
    redirect: '/documentation/index',
-    children: [{
+    children: [
+      {
        path: 'index',
        component: () => import('@/views/documentation/index'),
-      name: 'documentation',
+        name: 'Documentation',
        meta: { title: 'documentation', icon: 'documentation', noCache: true }
-    }]
+      }
+    ]
  },
  {
    path: '/guide',
    component: Layout,
    redirect: '/guide/index',
-    children: [{
+    children: [
+      {
        path: 'index',
        component: () => import('@/views/guide/index'),
-      name: 'guide',
+        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: [{
+    children: [
+      {
        path: 'page',
        component: () => import('@/views/permission/page'),
-      name: 'pagePermission',
+        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',
+        name: 'DirectivePermission',
        meta: {
          title: 'directivePermission'
          // if do not set roles, means: this page does not require permission
        }
-    }]
+      }
+    ]
  },

  {
    path: '/icon',
    component: Layout,
-    children: [{
+    children: [
+      {
        path: 'index',
        component: () => import('@/views/svg-icons/index'),
-      name: 'icons',
+        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' }}
+      }
    ]
  },

+  /** 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: [{
+    children: [
+      {
        path: 'index',
        component: () => import('@/views/tab/index'),
-      name: 'tab',
+        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' }
      }
    ]
  },
@ -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, {
+      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 => {
+  return cleanArray(
+    Object.keys(json).map(key => {
      if (json[key] === undefined) return ''
-    return encodeURIComponent(key) + '=' +
-            encodeURIComponent(json[key])
-  })).join('&')
+      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 => {
+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 => {
+  },
+  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,36 +3,45 @@
    <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;
+    <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/src/views/example/components/Warning.vue
+++ b/src/views/example/components/Warning.vue
@ -1,8 +1,9 @@
 <template>
  <p class="warn-content">
-    创建和编辑页面是不能被keep-alive 缓存的，因为keep-alive 的include 目前不支持根据路由来缓存，所以目前都是基于component name 来缓存的，如果你想要实现缓存的效果，可以使用localstorage 等游览器缓存方案。或者不要使用keep-alive
+    创建和编辑页面是不能被keep-alive 缓存的，因为keep-alive 的include 目前不支持根据路由来缓存，所以目前都是基于component name 来缓存的，如果你想要实现缓存的效果，可以使用localstorage 等浏览器缓存方案。或者不要使用keep-alive
    的include，直接缓存所有页面。详情见
-    <a href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
+    <a
+      href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
      target="_blank">文档</a>
  </p>
 </template>
--- a/Show More
+++ b/Show More