From 1e0b9c0055d37bcefa9ae63257903747c3971471 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Tue, 31 Jul 2018 11:12:38 +0800
Subject: [PATCH 01/19] fix[Tinymce]: fixed tinymce upload dialog bug #654

---
 src/components/Tinymce/components/editorImage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Tinymce/components/editorImage.vue b/src/components/Tinymce/components/editorImage.vue
index dd46916a..7569e4f2 100644
--- a/src/components/Tinymce/components/editorImage.vue
+++ b/src/components/Tinymce/components/editorImage.vue
@@ -2,7 +2,7 @@
   <div class="upload-container">
     <el-button icon='el-icon-upload' size="mini" :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
     </el-button>
-    <el-dialog append-to-body :visible.sync="dialogVisible">
+    <el-dialog :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-button size="small" type="primary">点击上传</el-button>

From 63d39727ac3849cd54249393a033f0f137fc7726 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Tue, 31 Jul 2018 11:14:18 +0800
Subject: [PATCH 02/19] [release] 3.7.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 803a6fb5..e8ee8955 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-element-admin",
-  "version": "3.7.2",
+  "version": "3.7.3",
   "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",

From 48a966fe1cdd676d468ba543f2703a5bfcbf07bf Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Tue, 31 Jul 2018 11:26:45 +0800
Subject: [PATCH 03/19] docs: add gitee

---
 README.md       | 2 ++
 README.zh-CN.md | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/README.md b/README.md
index 7624c398..7dfa567d 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,8 @@ 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)  
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 11360760..ef5251f5 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -36,6 +36,8 @@
 
 - [Donate](https://panjiachen.github.io/vue-element-admin-site/zh/donate/)
 
+- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
+
 **本项目的定位是后台集成方案，不适合当基础模板来开发。**
  - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
  - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)

From fe190b61884b6570d4b6e65d064186bc16a861a3 Mon Sep 17 00:00:00 2001
From: _xiaotian <952822399@qq.com>
Date: Wed, 1 Aug 2018 11:03:29 +0800
Subject: [PATCH 04/19] perf[login.vue]: Improve input background and cursor
 color (#927)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 完善input背景和光标色;

1.完善在Chrome浏览器时登陆界面的input标签 使用记住密码之后颜色和背景不一致;
2.目前的rgb值是 #2d3a4b  修改的rgb值是 #283443;
3.修复光标使用Chrome记录的账号之后变黑色;
4.移除 .title-container .title 重复的font-weight: 400;
5.不用IE我们大家都是好朋友！~

* Update index.vue
---
 src/views/login/index.vue | 65 +++++++++++++++++++++++----------------
 1 file changed, 39 insertions(+), 26 deletions(-)

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 4d15c055..1ff3d311 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -142,36 +142,50 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-$bg:#2d3a4b;
-$light_gray:#eee;
+  /* 修复input 背景不协调 和光标变色 */
+  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+ 
+  $bg:#283443;
+  $light_gray:#eee;
+  $cursor: #fff;
 
-/* reset element-ui css */
-.login-container {
-  .el-input {
-    display: inline-block;
-    height: 47px;
-    width: 85%;
-    input {
-      background: transparent;
-      border: 0px;
-      -webkit-appearance: none;
-      border-radius: 0px;
-      padding: 12px 5px 12px 15px;
-      color: $light_gray;
-      height: 47px;
-      &:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
-        -webkit-text-fill-color: #fff !important;
+  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+    .login-container .el-input input{
+      color: $cursor;
+      &::first-line {
+        color: $light_gray;
       }
     }
   }
-  .el-form-item {
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
-    color: #454545;
+
+  /* reset element-ui css */
+  .login-container {
+    .el-input {
+      display: inline-block;
+      height: 47px;
+      width: 85%;
+      input {
+        background: transparent;
+        border: 0px;
+        -webkit-appearance: none;
+        border-radius: 0px;
+        padding: 12px 5px 12px 15px;
+        color: $light_gray;
+        height: 47px;
+        caret-color: $cursor;
+        &:-webkit-autofill {
+          -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
+          -webkit-text-fill-color: $cursor !important;
+        }
+      }
+    }
+    .el-form-item {
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 5px;
+      color: #454545;
+    }
   }
-}
 </style>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
@@ -216,7 +230,6 @@ $light_gray:#eee;
     position: relative;
     .title {
       font-size: 26px;
-      font-weight: 400;
       color: $light_gray;
       margin: 0px auto 40px auto;
       text-align: center;

From c57c6045c9f08599a0242772f60cf0efc5019b02 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Wed, 8 Aug 2018 13:42:12 +0800
Subject: [PATCH 05/19] docs: tweak

---
 README.zh-CN.md                           |  3 ++-
 src/components/Share/dropdownMenu.vue     |  2 +-
 src/components/TextHoverEffect/Mallki.vue | 10 +++++-----
 src/views/components-demo/markdown.vue    |  2 +-
 src/views/components-demo/mixin.vue       | 12 +++++++-----
 src/views/documentation/index.vue         | 12 +++++++-----
 6 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/README.zh-CN.md b/README.zh-CN.md
index ef5251f5..45f84e02 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -53,7 +53,8 @@
  - [手摸手，带你用 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)** 楼主会经常分享一些技术相关的东西
 
diff --git a/src/components/Share/dropdownMenu.vue b/src/components/Share/dropdownMenu.vue
index f00b9cd7..e3bb7dec 100644
--- a/src/components/Share/dropdownMenu.vue
+++ b/src/components/Share/dropdownMenu.vue
@@ -35,7 +35,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;
diff --git a/src/components/TextHoverEffect/Mallki.vue b/src/components/TextHoverEffect/Mallki.vue
index 7e975dc8..542f6129 100644
--- a/src/components/TextHoverEffect/Mallki.vue
+++ b/src/components/TextHoverEffect/Mallki.vue
@@ -23,6 +23,7 @@ export default {
 
 <style>
 /* Mallki */
+
 .link--mallki {
   font-weight: 800;
   color: #4dd9d5;
@@ -31,10 +32,10 @@ export default {
   transition: color 0.5s 0.25s;
   overflow: hidden;
   position: relative;
-display: inline-block;
-    line-height: 1;
-        outline: none;
-    text-decoration: none;
+  display: inline-block;
+  line-height: 1;
+  outline: none;
+  text-decoration: none;
 }
 
 .link--mallki:hover {
@@ -109,5 +110,4 @@ display: inline-block;
   -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
   transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
 }
-
 </style>
diff --git a/src/views/components-demo/markdown.vue b/src/views/components-demo/markdown.vue
index 61a3b51f..4e8b0648 100644
--- a/src/views/components-demo/markdown.vue
+++ b/src/views/components-demo/markdown.vue
@@ -2,7 +2,7 @@
   <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">
diff --git a/src/views/components-demo/mixin.vue b/src/views/components-demo/mixin.vue
index 78adb069..5fda0b68 100644
--- a/src/views/components-demo/mixin.vue
+++ b/src/views/components-demo/mixin.vue
@@ -130,12 +130,14 @@ 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: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
+        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
+        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
+        { title: 'vueAdmin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
         { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
-        { title: '优雅的使用 icon', href: 'https://segmentfault.com/a/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' }
       ]
     }
   }
diff --git a/src/views/documentation/index.vue b/src/views/documentation/index.vue
index d9f8b9e8..c0ca2657 100644
--- a/src/views/documentation/index.vue
+++ b/src/views/documentation/index.vue
@@ -14,12 +14,14 @@ export default {
   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: 'vueAdmin-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' }
       ]
     }
   }

From 0ef14ff5c6eb93c6fc7a26c071c7038982abdcec Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Thu, 9 Aug 2018 11:03:13 +0800
Subject: [PATCH 06/19] tweak

---
 src/components/Tinymce/toolbar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Tinymce/toolbar.js b/src/components/Tinymce/toolbar.js
index a31efc4a..7d6c2c73 100644
--- a/src/components/Tinymce/toolbar.js
+++ b/src/components/Tinymce/toolbar.js
@@ -1,6 +1,6 @@
 // Here is a list of the toolbar
 // Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
 
-const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap	 preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
+const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
 
 export default toolbar

From f3733c0b37b9a8316bbb36cf7af17c12ff419cfb Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Mon, 13 Aug 2018 13:13:41 +0800
Subject: [PATCH 07/19] fix: demo links

---
 src/views/components-demo/mixin.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/views/components-demo/mixin.vue b/src/views/components-demo/mixin.vue
index 5fda0b68..dc80b23f 100644
--- 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>

From 312a2ca8ed59975e3658e5ce47c9761fa1947c34 Mon Sep 17 00:00:00 2001
From: shufangyi <102338496@qq.com>
Date: Mon, 13 Aug 2018 13:45:05 +0800
Subject: [PATCH 08/19] fixBug[waves.js]: wave's position (#949)

* fixBug[waves.js]-wave's position

* fix[waves.js]-wave's position
---
 src/directive/waves/waves.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/directive/waves/waves.js b/src/directive/waves/waves.js
index ac1d8611..83070113 100644
--- 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'

From 1df59cc4b6c645e22e988e99007589dae9809494 Mon Sep 17 00:00:00 2001
From: Andrey Dos <andrii3110@gmail.com>
Date: Wed, 15 Aug 2018 09:51:08 +0300
Subject: [PATCH 09/19] fix typo(#965)

---
 src/components/Upload/singleImage.vue  | 4 ++--
 src/components/Upload/singleImage2.vue | 4 ++--
 src/components/Upload/singleImage3.vue | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Upload/singleImage.vue b/src/components/Upload/singleImage.vue
index 18b892fe..2a3f26f3 100644
--- a/src/components/Upload/singleImage.vue
+++ b/src/components/Upload/singleImage.vue
@@ -1,7 +1,7 @@
 <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">
+            :on-success="handleImageSuccess">
             <i class="el-icon-upload"></i>
             <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         </el-upload>
@@ -43,7 +43,7 @@ export default {
     emitInput(val) {
       this.$emit('input', val)
     },
-    handleImageScucess() {
+    handleImageSuccess() {
       this.emitInput(this.tempUrl)
     },
     beforeUpload() {
diff --git a/src/components/Upload/singleImage2.vue b/src/components/Upload/singleImage2.vue
index bafc14d0..6fb94c1a 100644
--- a/src/components/Upload/singleImage2.vue
+++ b/src/components/Upload/singleImage2.vue
@@ -1,7 +1,7 @@
 <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">
+      :on-success="handleImageSuccess">
       <i class="el-icon-upload"></i>
       <div class="el-upload__text">Drag或<em>点击上传</em></div>
     </el-upload>
@@ -42,7 +42,7 @@ export default {
     emitInput(val) {
       this.$emit('input', val)
     },
-    handleImageScucess() {
+    handleImageSuccess() {
       this.emitInput(this.tempUrl)
     },
     beforeUpload() {
diff --git a/src/components/Upload/singleImage3.vue b/src/components/Upload/singleImage3.vue
index 8168bd53..f6946c8a 100644
--- a/src/components/Upload/singleImage3.vue
+++ b/src/components/Upload/singleImage3.vue
@@ -1,7 +1,7 @@
 <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">
+      :on-success="handleImageSuccess">
       <i class="el-icon-upload"></i>
       <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
     </el-upload>
@@ -50,7 +50,7 @@ export default {
     emitInput(val) {
       this.$emit('input', val)
     },
-    handleImageScucess(file) {
+    handleImageSuccess(file) {
       this.emitInput(file.files.file)
     },
     beforeUpload() {

From 378ca2c217f94d3f31e2518116708092ee06f95c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Wed, 15 Aug 2018 15:33:34 +0800
Subject: [PATCH 10/19] update to webpack4 (#889)

---
 README.md                   |   3 +
 README.zh-CN.md             |   5 +-
 build/build.js              |  51 +++++----
 build/check-versions.js     |  24 +++--
 build/utils.js              |  49 +++++----
 build/vue-loader.conf.js    |  19 +---
 build/webpack.base.conf.js  |  19 ++--
 build/webpack.dev.conf.js   |  36 ++++---
 build/webpack.prod.conf.js  | 199 +++++++++++++++++++-----------------
 config/index.js             |  16 ++-
 package.json                | 101 +++++++++---------
 src/views/errorPage/404.vue |  16 +--
 12 files changed, 287 insertions(+), 251 deletions(-)

diff --git a/README.md b/README.md
index 7dfa567d..6c5048ba 100644
--- a/README.md
+++ b/README.md
@@ -151,6 +151,9 @@ npm run build:prod
 # --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
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 45f84e02..521cd21e 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -162,7 +162,10 @@ 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
diff --git a/build/build.js b/build/build.js
index fe24ac8f..34c71a55 100644
--- a/build/build.js
+++ b/build/build.js
@@ -8,10 +8,12 @@ const chalk = require('chalk')
 const webpack = require('webpack')
 const config = require('../config')
 const webpackConfig = require('./webpack.prod.conf')
-var connect = require('connect');
+var connect = require('connect')
 var serveStatic = require('serve-static')
 
-const spinner = ora('building for ' + process.env.env_config + ' environment...')
+const spinner = ora(
+  'building for ' + process.env.env_config + ' environment...'
+)
 spinner.start()
 
 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
@@ -19,13 +21,15 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
   webpack(webpackConfig, (err, stats) => {
     spinner.stop()
     if (err) throw err
-    process.stdout.write(stats.toString({
-      colors: true,
-      modules: false,
-      children: false,
-      chunks: false,
-      chunkModules: false
-    }) + '\n\n')
+    process.stdout.write(
+      stats.toString({
+        colors: true,
+        modules: false,
+        children: false,
+        chunks: false,
+        chunkModules: false
+      }) + '\n\n'
+    )
 
     if (stats.hasErrors()) {
       console.log(chalk.red(' Build failed with errors.\n'))
@@ -33,24 +37,31 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
     }
 
     console.log(chalk.cyan(' Build complete.\n'))
-    console.log(chalk.yellow(
-      ' Tip: built files are meant to be served over an HTTP server.\n' +
-      ' Opening index.html over file:// won\'t work.\n'
-    ))
+    console.log(
+      chalk.yellow(
+        ' Tip: built files are meant to be served over an HTTP server.\n' +
+          " Opening index.html over file:// won't work.\n"
+      )
+    )
 
     if (process.env.npm_config_preview) {
       const port = 9526
-      const host = "http://localhost:" + port
+      const host = 'http://localhost:' + port
       const basePath = config.build.assetsPublicPath
       const app = connect()
 
-      app.use(basePath, serveStatic('./dist', {
-        'index': ['index.html', '/']
-      }))
+      app.use(
+        basePath,
+        serveStatic('./dist', {
+          index: ['index.html', '/']
+        })
+      )
 
-      app.listen(port, function () {
-        console.log(chalk.green(`> Listening at  http://localhost:${port}${basePath}`))
-      });
+      app.listen(port, function() {
+        console.log(
+          chalk.green(`> Listening at  http://localhost:${port}${basePath}`)
+        )
+      })
     }
   })
 })
diff --git a/build/check-versions.js b/build/check-versions.js
index 3ef972a0..c5c29e90 100644
--- a/build/check-versions.js
+++ b/build/check-versions.js
@@ -4,8 +4,11 @@ const semver = require('semver')
 const packageConfig = require('../package.json')
 const shell = require('shelljs')
 
-function exec (cmd) {
-  return require('child_process').execSync(cmd).toString().trim()
+function exec(cmd) {
+  return require('child_process')
+    .execSync(cmd)
+    .toString()
+    .trim()
 }
 
 const versionRequirements = [
@@ -24,23 +27,30 @@ if (shell.which('npm')) {
   })
 }
 
-module.exports = function () {
+module.exports = function() {
   const warnings = []
 
   for (let i = 0; i < versionRequirements.length; i++) {
     const mod = versionRequirements[i]
 
     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-      warnings.push(mod.name + ': ' +
-        chalk.red(mod.currentVersion) + ' should be ' +
-        chalk.green(mod.versionRequirement)
+      warnings.push(
+        mod.name +
+          ': ' +
+          chalk.red(mod.currentVersion) +
+          ' should be ' +
+          chalk.green(mod.versionRequirement)
       )
     }
   }
 
   if (warnings.length) {
     console.log('')
-    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log(
+      chalk.yellow(
+        'To use this template, you must update following to modules:'
+      )
+    )
     console.log()
 
     for (let i = 0; i < warnings.length; i++) {
diff --git a/build/utils.js b/build/utils.js
index e534fb0f..c96d0936 100644
--- a/build/utils.js
+++ b/build/utils.js
@@ -1,18 +1,19 @@
 'use strict'
 const path = require('path')
 const config = require('../config')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const packageConfig = require('../package.json')
 
-exports.assetsPath = function (_path) {
-  const assetsSubDirectory = process.env.NODE_ENV === 'production'
-    ? config.build.assetsSubDirectory
-    : config.dev.assetsSubDirectory
+exports.assetsPath = function(_path) {
+  const assetsSubDirectory =
+    process.env.NODE_ENV === 'production'
+      ? config.build.assetsSubDirectory
+      : config.dev.assetsSubDirectory
 
   return path.posix.join(assetsSubDirectory, _path)
 }
 
-exports.cssLoaders = function (options) {
+exports.cssLoaders = function(options) {
   options = options || {}
 
   const cssLoader = {
@@ -30,8 +31,22 @@ exports.cssLoaders = function (options) {
   }
 
   // generate loader string to be used with extract text plugin
-  function generateLoaders (loader, loaderOptions) {
-    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+  function generateLoaders(loader, loaderOptions) {
+    const loaders = []
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      loaders.push(MiniCssExtractPlugin.loader)
+    } else {
+      loaders.push('vue-style-loader')
+    }
+
+    loaders.push(cssLoader)
+
+    if (options.usePostCSS) {
+      loaders.push(postcssLoader)
+    }
 
     if (loader) {
       loaders.push({
@@ -42,24 +57,16 @@ exports.cssLoaders = function (options) {
       })
     }
 
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      return ExtractTextPlugin.extract({
-        use: loaders,
-        fallback: 'vue-style-loader'
-      })
-    } else {
-      return ['vue-style-loader'].concat(loaders)
-    }
+    return loaders
   }
-
   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
   return {
     css: generateLoaders(),
     postcss: generateLoaders(),
     less: generateLoaders('less'),
-    sass: generateLoaders('sass', { indentedSyntax: true }),
+    sass: generateLoaders('sass', {
+      indentedSyntax: true
+    }),
     scss: generateLoaders('sass'),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
@@ -67,7 +74,7 @@ exports.cssLoaders = function (options) {
 }
 
 // Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
+exports.styleLoaders = function(options) {
   const output = []
   const loaders = exports.cssLoaders(options)
 
diff --git a/build/vue-loader.conf.js b/build/vue-loader.conf.js
index 33ed58bc..5496c931 100644
--- 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.
 }
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index 9936a877..3b946b4b 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -2,9 +2,10 @@
 const path = require('path')
 const utils = require('./utils')
 const config = require('../config')
+const { VueLoaderPlugin } = require('vue-loader')
 const vueLoaderConfig = require('./vue-loader.conf')
 
-function resolve (dir) {
+function resolve(dir) {
   return path.join(__dirname, '..', dir)
 }
 
@@ -27,14 +28,15 @@ module.exports = {
   output: {
     path: config.build.assetsRoot,
     filename: '[name].js',
-    publicPath: process.env.NODE_ENV === 'production'
-      ? config.build.assetsPublicPath
-      : config.dev.assetsPublicPath
+    publicPath:
+      process.env.NODE_ENV === 'production'
+        ? config.build.assetsPublicPath
+        : config.dev.assetsPublicPath
   },
   resolve: {
     extensions: ['.js', '.vue', '.json'],
     alias: {
-      '@': resolve('src'),
+      '@': resolve('src')
     }
   },
   module: {
@@ -48,7 +50,11 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader?cacheDirectory',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+        include: [
+          resolve('src'),
+          resolve('test'),
+          resolve('node_modules/webpack-dev-server/client')
+        ]
       },
       {
         test: /\.svg$/,
@@ -85,6 +91,7 @@ module.exports = {
       }
     ]
   },
+  plugins: [new VueLoaderPlugin()],
   node: {
     // prevent webpack from injecting useless setImmediate polyfill because Vue
     // source contains it (although only uses it if it's native).
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
index 43901e5b..5eba7eb3 100644
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -9,7 +9,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const portfinder = require('portfinder')
 
-function resolve (dir) {
+function resolve(dir) {
   return path.join(__dirname, '..', dir)
 }
 
@@ -17,8 +17,12 @@ const HOST = process.env.HOST
 const PORT = process.env.PORT && Number(process.env.PORT)
 
 const devWebpackConfig = merge(baseWebpackConfig, {
+  mode: 'development',
   module: {
-    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+    rules: utils.styleLoaders({
+      sourceMap: config.dev.cssSourceMap,
+      usePostCSS: true
+    })
   },
   // cheap-module-eval-source-map is faster for development
   devtool: config.dev.devtool,
@@ -39,7 +43,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     proxy: config.dev.proxyTable,
     quiet: true, // necessary for FriendlyErrorsPlugin
     watchOptions: {
-      poll: config.dev.poll,
+      poll: config.dev.poll
     }
   },
   plugins: [
@@ -47,8 +51,6 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       'process.env': require('../config/dev.env')
     }),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
-    new webpack.NoEmitOnErrorsPlugin(),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'index.html',
@@ -57,7 +59,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       favicon: resolve('favicon.ico'),
       title: 'vue-element-admin',
       path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
-    }),
+    })
   ]
 })
 
@@ -73,14 +75,20 @@ module.exports = new Promise((resolve, reject) => {
       devWebpackConfig.devServer.port = port
 
       // Add FriendlyErrorsPlugin
-      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
-        compilationSuccessInfo: {
-          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
-        },
-        onErrors: config.dev.notifyOnErrors
-        ? utils.createNotifierCallback()
-        : undefined
-      }))
+      devWebpackConfig.plugins.push(
+        new FriendlyErrorsPlugin({
+          compilationSuccessInfo: {
+            messages: [
+              `Your application is running here: http://${
+                devWebpackConfig.devServer.host
+              }:${port}`
+            ]
+          },
+          onErrors: config.dev.notifyOnErrors
+            ? utils.createNotifierCallback()
+            : undefined
+        })
+      )
 
       resolve(devWebpackConfig)
     }
diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
index 7f710543..6220cc6b 100644
--- 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
diff --git a/config/index.js b/config/index.js
index 92c4a172..d8b17921 100644
--- a/config/index.js
+++ b/config/index.js
@@ -36,12 +36,7 @@ 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
@@ -73,7 +68,7 @@ module.exports = {
      */
     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 +79,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
   }
 }
diff --git a/package.json b/package.json
index e8ee8955..fbb1a766 100644
--- a/package.json
+++ b/package.json
@@ -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-html": "4.0.5",
+    "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": [
diff --git a/src/views/errorPage/404.vue b/src/views/errorPage/404.vue
index dccf5736..97e57b2f 100644
--- a/src/views/errorPage/404.vue
+++ b/src/views/errorPage/404.vue
@@ -2,10 +2,10 @@
   <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>
@@ -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
-    }
-  },
   computed: {
     message() {
       return '网管说这个页面你不能进......'

From a871e147d664827acfdbf31c3b4931c9db63adcb Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Wed, 15 Aug 2018 15:48:30 +0800
Subject: [PATCH 11/19] [release] 3.8.0

---
 README.md       | 22 +++++++++++++------
 README.zh-CN.md | 56 ++++++++++++++++++++++++++++++-------------------
 package.json    |  2 +-
 3 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index 6c5048ba..f1431b42 100644
--- a/README.md
+++ b/README.md
@@ -42,23 +42,28 @@ It is a magical vue admin based on the newest development stack of vue, built-in
 
 **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: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-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
 
@@ -138,6 +143,7 @@ npm run dev
 This will automatically open http://localhost:9527.
 
 ## Build
+
 ```bash
 # build for test environment
 npm run build:sit
@@ -147,6 +153,7 @@ npm run build:prod
 ```
 
 ## Advanced
+
 ```bash
 # --report to build with bundle size analytics
 npm run build:prod --report
@@ -167,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)
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 521cd21e..2e530a49 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -24,13 +24,13 @@
 
 ## 简介
 
-[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)
 
@@ -39,38 +39,43 @@
 - [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
 
 **本项目的定位是后台集成方案，不适合当基础模板来开发。**
- - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
- - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+
+- 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-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)
+
+**如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**
+
+**本项目并不是一个脚手架，更倾向于是一个集成解决方案**
+
+**注意：该项目使用 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)
- - [手摸手，带你用合理的姿势使用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)**
+- [手摸手，带你用 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)
 
  <p align="center">
   <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
 </p>
 
 ## 功能
+
 ```
 - 登录 / 注销
 
@@ -135,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
@@ -160,6 +168,7 @@ npm run build:prod
 ```
 
 ## 其它
+
 ```bash
 # --report to build with bundle size analytics
 npm run build:prod
@@ -180,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)
 
diff --git a/package.json b/package.json
index fbb1a766..8f7847cf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-element-admin",
-  "version": "3.7.3",
+  "version": "3.8.0",
   "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",

From 93e01b64d481d4465212331eb8bceb993bc36fb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Wed, 15 Aug 2018 15:50:02 +0800
Subject: [PATCH 12/19] Update README.zh-CN.md

---
 README.zh-CN.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/README.zh-CN.md b/README.zh-CN.md
index 2e530a49..b3a1cb77 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -45,10 +45,6 @@
 
 群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西，或者加入[qq 群](https://github.com/PanJiaChen/vue-element-admin/issues/602)
 
-**如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**
-
-**本项目并不是一个脚手架，更倾向于是一个集成解决方案**
-
 **注意：该项目使用 element-ui@2.3.0+ 版本，所以最低兼容 vue@2.5.0+**
 
 **从`v3.8.0`开始使用`webpack4`。所以若还想使用`webpack3`开发，请使用该分支[webpack3](https://github.com/PanJiaChen/vue-element-admin/tree/webpack3)**
@@ -70,6 +66,8 @@
 - [手摸手，带你用合理的姿势使用 webpack4（上）](https://juejin.im/post/5b56909a518825195f499806)
 - [手摸手，带你用合理的姿势使用 webpack4（下）](https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc)
 
+**如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**
+
  <p align="center">
   <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
 </p>

From 53f3e7d5e6d54ef0be75fa498016ace1ebffe010 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Wed, 15 Aug 2018 17:29:15 +0800
Subject: [PATCH 13/19] format code

---
 config/index.js                  |   5 +-
 src/main.js                      |   4 +-
 src/permission.js                |   2 +-
 src/router/index.js              | 357 +++++++++++++++----------------
 src/router/modules/charts.js     |  36 ++++
 src/router/modules/components.js |  96 +++++++++
 src/router/modules/nested.js     |  66 ++++++
 src/router/modules/table.js      |  53 +++++
 src/store/modules/tagsView.js    |  16 +-
 src/utils/index.js               |  65 ++++--
 src/utils/permission.js          |   1 -
 src/utils/request.js             |  28 +--
 src/utils/validate.js            |   1 -
 13 files changed, 503 insertions(+), 227 deletions(-)
 create mode 100644 src/router/modules/charts.js
 create mode 100644 src/router/modules/components.js
 create mode 100644 src/router/modules/nested.js
 create mode 100644 src/router/modules/table.js

diff --git a/config/index.js b/config/index.js
index d8b17921..3033f9be 100644
--- a/config/index.js
+++ b/config/index.js
@@ -6,7 +6,6 @@ const path = require('path')
 
 module.exports = {
   dev: {
-
     // Paths
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
@@ -43,7 +42,7 @@ module.exports = {
     // (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: {
@@ -83,7 +82,7 @@ module.exports = {
     // Set to `true` or `false` to always turn it on or off
     bundleAnalyzerReport: process.env.npm_config_report || false,
 
-      // `npm run build:prod --generate_report`
+    // `npm run build:prod --generate_report`
     generateAnalyzerReport: process.env.npm_config_generate_report || false
   }
 }
diff --git a/src/main.js b/src/main.js
index ac246444..1dc4af9e 100644
--- 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
 
diff --git a/src/permission.js b/src/permission.js
index 6fe91b48..22522832 100644
--- 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 }})
         }
diff --git a/src/router/index.js b/src/router/index.js
index 8df2b8bf..0492a28f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,9 +6,15 @@ Vue.use(Router)
 /* Layout */
 import Layout from '@/views/layout/Layout'
 
+/* Router Modules */
+import componentsRouter from './modules/components'
+import chartsRouter from './modules/charts'
+import tableRouter from './modules/table'
+import nestedRouter from './modules/nested'
+
 /** note: submenu only apppear when children.length>=1
-*   detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
-**/
+ *  detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
+ **/
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -25,42 +31,64 @@ import Layout from '@/views/layout/Layout'
   }
 **/
 export const constantRouterMap = [
-  { path: '/login', component: () => import('@/views/login/index'), hidden: true },
-  { path: '/authredirect', component: () => import('@/views/login/authredirect'), hidden: true },
-  { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  {
+    path: '/login',
+    component: () => import('@/views/login/index'),
+    hidden: true
+  },
+  {
+    path: '/authredirect',
+    component: () => import('@/views/login/authredirect'),
+    hidden: true
+  },
+  {
+    path: '/404',
+    component: () => import('@/views/errorPage/404'),
+    hidden: true
+  },
+  {
+    path: '/401',
+    component: () => import('@/views/errorPage/401'),
+    hidden: true
+  },
   {
     path: '',
     component: Layout,
     redirect: 'dashboard',
-    children: [{
-      path: 'dashboard',
-      component: () => import('@/views/dashboard/index'),
-      name: 'dashboard',
-      meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
-    }]
+    children: [
+      {
+        path: 'dashboard',
+        component: () => import('@/views/dashboard/index'),
+        name: 'dashboard',
+        meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
+      }
+    ]
   },
   {
     path: '/documentation',
     component: Layout,
     redirect: '/documentation/index',
-    children: [{
-      path: 'index',
-      component: () => import('@/views/documentation/index'),
-      name: 'documentation',
-      meta: { title: 'documentation', icon: 'documentation', noCache: true }
-    }]
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/documentation/index'),
+        name: 'documentation',
+        meta: { title: 'documentation', icon: 'documentation', noCache: true }
+      }
+    ]
   },
   {
     path: '/guide',
     component: Layout,
     redirect: '/guide/index',
-    children: [{
-      path: 'index',
-      component: () => import('@/views/guide/index'),
-      name: 'guide',
-      meta: { title: 'guide', icon: 'guide', noCache: true }
-    }]
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/guide/index'),
+        name: 'guide',
+        meta: { title: 'guide', icon: 'guide', noCache: true }
+      }
+    ]
   }
 ]
 
@@ -81,107 +109,46 @@ export const asyncRouterMap = [
       icon: 'lock',
       roles: ['admin', 'editor'] // you can set roles in root nav
     },
-    children: [{
-      path: 'page',
-      component: () => import('@/views/permission/page'),
-      name: 'pagePermission',
-      meta: {
-        title: 'pagePermission',
-        roles: ['admin'] // or you can only set roles in sub nav
+    children: [
+      {
+        path: 'page',
+        component: () => import('@/views/permission/page'),
+        name: 'pagePermission',
+        meta: {
+          title: 'pagePermission',
+          roles: ['admin'] // or you can only set roles in sub nav
+        }
+      },
+      {
+        path: 'directive',
+        component: () => import('@/views/permission/directive'),
+        name: 'directivePermission',
+        meta: {
+          title: 'directivePermission'
+          // if do not set roles, means: this page does not require permission
+        }
       }
-    }, {
-      path: 'directive',
-      component: () => import('@/views/permission/directive'),
-      name: 'directivePermission',
-      meta: {
-        title: 'directivePermission'
-        // if do not set roles, means: this page does not require permission
-      }
-    }]
+    ]
   },
 
   {
     path: '/icon',
     component: Layout,
-    children: [{
-      path: 'index',
-      component: () => import('@/views/svg-icons/index'),
-      name: 'icons',
-      meta: { title: 'icons', icon: 'icon', noCache: true }
-    }]
-  },
-
-  {
-    path: '/components',
-    component: Layout,
-    redirect: 'noredirect',
-    name: 'component-demo',
-    meta: {
-      title: 'components',
-      icon: 'component'
-    },
     children: [
-      { path: 'tinymce', component: () => import('@/views/components-demo/tinymce'), name: 'tinymce-demo', meta: { title: 'tinymce' }},
-      { path: 'markdown', component: () => import('@/views/components-demo/markdown'), name: 'markdown-demo', meta: { title: 'markdown' }},
-      { path: 'json-editor', component: () => import('@/views/components-demo/jsonEditor'), name: 'jsonEditor-demo', meta: { title: 'jsonEditor' }},
-      { path: 'splitpane', component: () => import('@/views/components-demo/splitpane'), name: 'splitpane-demo', meta: { title: 'splitPane' }},
-      { path: 'avatar-upload', component: () => import('@/views/components-demo/avatarUpload'), name: 'avatarUpload-demo', meta: { title: 'avatarUpload' }},
-      { path: 'dropzone', component: () => import('@/views/components-demo/dropzone'), name: 'dropzone-demo', meta: { title: 'dropzone' }},
-      { path: 'sticky', component: () => import('@/views/components-demo/sticky'), name: 'sticky-demo', meta: { title: 'sticky' }},
-      { path: 'count-to', component: () => import('@/views/components-demo/countTo'), name: 'countTo-demo', meta: { title: 'countTo' }},
-      { path: 'mixin', component: () => import('@/views/components-demo/mixin'), name: 'componentMixin-demo', meta: { title: 'componentMixin' }},
-      { path: 'back-to-top', component: () => import('@/views/components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }},
-      { path: 'drag-dialog', component: () => import('@/views/components-demo/dragDialog'), name: 'dragDialog-demo', meta: { title: 'dragDialog' }},
-      { path: 'dnd-list', component: () => import('@/views/components-demo/dndList'), name: 'dndList-demo', meta: { title: 'dndList' }},
-      { path: 'drag-kanban', component: () => import('@/views/components-demo/dragKanban'), name: 'dragKanban-demo', meta: { title: 'dragKanban' }}
+      {
+        path: 'index',
+        component: () => import('@/views/svg-icons/index'),
+        name: 'icons',
+        meta: { title: 'icons', icon: 'icon', noCache: true }
+      }
     ]
   },
 
-  {
-    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 }}
-    ]
-  },
-
-  {
-    path: '/tab',
-    component: Layout,
-    children: [{
-      path: 'index',
-      component: () => import('@/views/tab/index'),
-      name: 'tab',
-      meta: { title: 'tab', icon: 'tab' }
-    }]
-  },
-
-  {
-    path: '/table',
-    component: Layout,
-    redirect: '/table/complex-table',
-    name: 'table',
-    meta: {
-      title: 'Table',
-      icon: 'table'
-    },
-    children: [
-      { path: 'dynamic-table', component: () => import('@/views/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: 'dynamicTable' }},
-      { path: 'drag-table', component: () => import('@/views/table/dragTable'), name: 'dragTable', meta: { title: 'dragTable' }},
-      { path: 'inline-edit-table', component: () => import('@/views/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'inlineEditTable' }},
-      { path: 'tree-table', component: () => import('@/views/table/treeTable/treeTable'), name: 'treeTableDemo', meta: { title: 'treeTable' }},
-      { path: 'custom-tree-table', component: () => import('@/views/table/treeTable/customTreeTable'), name: 'customTreeTableDemo', meta: { title: 'customTreeTable' }},
-      { path: 'complex-table', component: () => import('@/views/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }}
-    ]
-  },
+  /** When your routing table is too long, you can split it into small modules**/
+  componentsRouter,
+  chartsRouter,
+  nestedRouter,
+  tableRouter,
 
   {
     path: '/example',
@@ -193,69 +160,37 @@ export const asyncRouterMap = [
       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: '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',
+    path: '/tab',
     component: Layout,
-    redirect: '/nested/menu1/menu1-1',
-    name: 'nested',
-    meta: {
-      title: 'nested',
-      icon: 'nested'
-    },
     children: [
       {
-        path: 'menu1',
-        component: () => import('@/views/nested/menu1/index'), // Parent router-view
-        name: 'menu1',
-        meta: { title: 'menu1' },
-        redirect: '/nested/menu1/menu1-1',
-        children: [
-          {
-            path: 'menu1-1',
-            component: () => import('@/views/nested/menu1/menu1-1'),
-            name: 'menu1-1',
-            meta: { title: 'menu1-1' }
-          },
-          {
-            path: 'menu1-2',
-            component: () => import('@/views/nested/menu1/menu1-2'),
-            name: 'menu1-2',
-            redirect: '/nested/menu1/menu1-2/menu1-2-1',
-            meta: { title: 'menu1-2' },
-            children: [
-              {
-                path: 'menu1-2-1',
-                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-                name: 'menu1-2-1',
-                meta: { title: 'menu1-2-1' }
-              },
-              {
-                path: 'menu1-2-2',
-                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-                name: 'menu1-2-2',
-                meta: { title: 'menu1-2-2' }
-              }
-            ]
-          },
-          {
-            path: 'menu1-3',
-            component: () => import('@/views/nested/menu1/menu1-3'),
-            name: 'menu1-3',
-            meta: { title: 'menu1-3' }
-          }
-        ]
-      },
-      {
-        path: 'menu2',
-        name: 'menu2',
-        component: () => import('@/views/nested/menu2/index'),
-        meta: { title: 'menu2' }
+        path: 'index',
+        component: () => import('@/views/tab/index'),
+        name: 'tab',
+        meta: { title: 'tab', icon: 'tab' }
       }
     ]
   },
@@ -270,8 +205,18 @@ export const asyncRouterMap = [
       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,7 +224,14 @@ 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' }
+      }
+    ]
   },
 
   {
@@ -292,9 +244,24 @@ export const asyncRouterMap = [
       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: 'selectExcel',
+        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 }
diff --git a/src/router/modules/charts.js b/src/router/modules/charts.js
new file mode 100644
index 00000000..8bdff406
--- /dev/null
+++ 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
diff --git a/src/router/modules/components.js b/src/router/modules/components.js
new file mode 100644
index 00000000..62d4520d
--- /dev/null
+++ 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: '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' }
+    }
+  ]
+}
+
+export default componentsRouter
diff --git a/src/router/modules/nested.js b/src/router/modules/nested.js
new file mode 100644
index 00000000..0cbd9272
--- /dev/null
+++ 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
diff --git a/src/router/modules/table.js b/src/router/modules/table.js
new file mode 100644
index 00000000..fde5a41f
--- /dev/null
+++ 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
diff --git a/src/store/modules/tagsView.js b/src/store/modules/tagsView.js
index 25d513cd..bb126492 100644
--- a/src/store/modules/tagsView.js
+++ b/src/store/modules/tagsView.js
@@ -6,9 +6,11 @@ const tagsView = {
   mutations: {
     ADD_VISITED_VIEWS: (state, view) => {
       if (state.visitedViews.some(v => v.path === view.path)) return
-      state.visitedViews.push(Object.assign({}, view, {
-        title: view.meta.title || 'no-name'
-      }))
+      state.visitedViews.push(
+        Object.assign({}, view, {
+          title: view.meta.title || 'no-name'
+        })
+      )
       if (!view.meta.noCache) {
         state.cachedViews.push(view.name)
       }
@@ -43,7 +45,7 @@ const tagsView = {
         }
       }
     },
-    DEL_ALL_VIEWS: (state) => {
+    DEL_ALL_VIEWS: state => {
       state.visitedViews = []
       state.cachedViews = []
     }
@@ -53,19 +55,19 @@ const tagsView = {
       commit('ADD_VISITED_VIEWS', view)
     },
     delVisitedViews({ commit, state }, view) {
-      return new Promise((resolve) => {
+      return new Promise(resolve => {
         commit('DEL_VISITED_VIEWS', view)
         resolve([...state.visitedViews])
       })
     },
     delOthersViews({ commit, state }, view) {
-      return new Promise((resolve) => {
+      return new Promise(resolve => {
         commit('DEL_OTHERS_VIEWS', view)
         resolve([...state.visitedViews])
       })
     },
     delAllViews({ commit, state }) {
-      return new Promise((resolve) => {
+      return new Promise(resolve => {
         commit('DEL_ALL_VIEWS')
         resolve([...state.visitedViews])
       })
diff --git a/src/utils/index.js b/src/utils/index.js
index 31295122..3e540802 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -25,7 +25,7 @@ export function parseTime(time, cFormat) {
   }
   const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
     let value = formatObj[key]
-    if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
+    if (key === 'a') { return ['一', '二', '三', '四', '五', '六', '日'][value - 1] }
     if (result.length > 0 && value < 10) {
       value = '0' + value
     }
@@ -43,7 +43,8 @@ export function formatTime(time, option) {
 
   if (diff < 30) {
     return '刚刚'
-  } else if (diff < 3600) { // less 1 hour
+  } else if (diff < 3600) {
+    // less 1 hour
     return Math.ceil(diff / 60) + '分钟前'
   } else if (diff < 3600 * 24) {
     return Math.ceil(diff / 3600) + '小时前'
@@ -53,7 +54,17 @@ export function formatTime(time, option) {
   if (option) {
     return parseTime(time, option)
   } else {
-    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
+    return (
+      d.getMonth() +
+      1 +
+      '月' +
+      d.getDate() +
+      '日' +
+      d.getHours() +
+      '时' +
+      d.getMinutes() +
+      '分'
+    )
   }
 }
 
@@ -81,9 +92,11 @@ export function getQueryObject(url) {
 export function getByteLen(val) {
   let len = 0
   for (let i = 0; i < val.length; i++) {
-    if (val[i].match(/[^\x00-\xff]/ig) != null) {
+    if (val[i].match(/[^\x00-\xff]/gi) != null) {
       len += 1
-    } else { len += 0.5 }
+    } else {
+      len += 0.5
+    }
   }
   return Math.floor(len)
 }
@@ -100,11 +113,12 @@ export function cleanArray(actual) {
 
 export function param(json) {
   if (!json) return ''
-  return cleanArray(Object.keys(json).map(key => {
-    if (json[key] === undefined) return ''
-    return encodeURIComponent(key) + '=' +
-            encodeURIComponent(json[key])
-  })).join('&')
+  return cleanArray(
+    Object.keys(json).map(key => {
+      if (json[key] === undefined) return ''
+      return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
+    })
+  ).join('&')
 }
 
 export function param2Obj(url) {
@@ -112,7 +126,14 @@ export function param2Obj(url) {
   if (!search) {
     return {}
   }
-  return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
+  return JSON.parse(
+    '{"' +
+      decodeURIComponent(search)
+        .replace(/"/g, '\\"')
+        .replace(/&/g, '","')
+        .replace(/=/g, '":"') +
+      '"}'
+  )
 }
 
 export function html2Text(val) {
@@ -131,7 +152,7 @@ export function objectMerge(target, source) {
   if (Array.isArray(source)) {
     return source.slice()
   }
-  Object.keys(source).forEach((property) => {
+  Object.keys(source).forEach(property => {
     const sourceProperty = source[property]
     if (typeof sourceProperty === 'object') {
       target[property] = objectMerge(target[property], sourceProperty)
@@ -145,7 +166,7 @@ export function objectMerge(target, source) {
 export function scrollTo(element, to, duration) {
   if (duration <= 0) return
   const difference = to - element.scrollTop
-  const perTick = difference / duration * 10
+  const perTick = (difference / duration) * 10
   setTimeout(() => {
     console.log(new Date())
     element.scrollTop = element.scrollTop + perTick
@@ -163,7 +184,9 @@ export function toggleClass(element, className) {
   if (nameIndex === -1) {
     classString += '' + className
   } else {
-    classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length)
+    classString =
+      classString.substr(0, nameIndex) +
+      classString.substr(nameIndex + className.length)
   }
   element.className = classString
 }
@@ -177,7 +200,8 @@ export const pickerOptions = [
       end.setTime(start.getTime())
       picker.$emit('pick', [start, end])
     }
-  }, {
+  },
+  {
     text: '最近一周',
     onClick(picker) {
       const end = new Date(new Date().toDateString())
@@ -185,7 +209,8 @@ export const pickerOptions = [
       start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
       picker.$emit('pick', [start, end])
     }
-  }, {
+  },
+  {
     text: '最近一个月',
     onClick(picker) {
       const end = new Date(new Date().toDateString())
@@ -193,7 +218,8 @@ export const pickerOptions = [
       start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
       picker.$emit('pick', [start, end])
     }
-  }, {
+  },
+  {
     text: '最近三个月',
     onClick(picker) {
       const end = new Date(new Date().toDateString())
@@ -201,7 +227,8 @@ export const pickerOptions = [
       start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
       picker.$emit('pick', [start, end])
     }
-  }]
+  }
+]
 
 export function getTime(type) {
   if (type === 'start') {
@@ -256,7 +283,7 @@ export function deepClone(source) {
     throw new Error('error arguments', 'shallowClone')
   }
   const targetObj = source.constructor === Array ? [] : {}
-  Object.keys(source).forEach((keys) => {
+  Object.keys(source).forEach(keys => {
     if (source[keys] && typeof source[keys] === 'object') {
       targetObj[keys] = deepClone(source[keys])
     } else {
diff --git a/src/utils/permission.js b/src/utils/permission.js
index 7bd22e01..221d3842 100644
--- a/src/utils/permission.js
+++ b/src/utils/permission.js
@@ -23,4 +23,3 @@ export default function checkPermission(value) {
     return false
   }
 }
-
diff --git a/src/utils/request.js b/src/utils/request.js
index 0bcb1833..5ce53933 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -10,18 +10,21 @@ const service = axios.create({
 })
 
 // request interceptor
-service.interceptors.request.use(config => {
-  // Do something before request is sent
-  if (store.getters.token) {
-    // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
-    config.headers['X-Token'] = getToken()
+service.interceptors.request.use(
+  config => {
+    // Do something before request is sent
+    if (store.getters.token) {
+      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
+      config.headers['X-Token'] = getToken()
+    }
+    return config
+  },
+  error => {
+    // Do something with request error
+    console.log(error) // for debug
+    Promise.reject(error)
   }
-  return config
-}, error => {
-  // Do something with request error
-  console.log(error) // for debug
-  Promise.reject(error)
-})
+)
 
 // respone interceptor
 service.interceptors.response.use(
@@ -67,6 +70,7 @@ service.interceptors.response.use(
       duration: 5 * 1000
     })
     return Promise.reject(error)
-  })
+  }
+)
 
 export default service
diff --git a/src/utils/validate.js b/src/utils/validate.js
index 10579fd3..ada0e7e2 100644
--- 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)
 }
-

From fded36c99066d7ff3b27387a7ec36db9521ff1b9 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Thu, 16 Aug 2018 11:15:25 +0800
Subject: [PATCH 14/19] docs: change vueAdmin-template => vue-admin-template

---
 README.md                           | 2 +-
 README.zh-CN.md                     | 2 +-
 src/views/components-demo/mixin.vue | 2 +-
 src/views/documentation/index.vue   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index f1431b42..d19bb898 100644
--- a/README.md
+++ b/README.md
@@ -42,7 +42,7 @@ It is a magical vue admin based on the newest development stack of vue, built-in
 
 **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)
+- 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.**
diff --git a/README.zh-CN.md b/README.zh-CN.md
index b3a1cb77..4438bda8 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -40,7 +40,7 @@
 
 **本项目的定位是后台集成方案，不适合当基础模板来开发。**
 
-- 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)
+- 模板建议使用: [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)
diff --git a/src/views/components-demo/mixin.vue b/src/views/components-demo/mixin.vue
index dc80b23f..7f713f6d 100644
--- a/src/views/components-demo/mixin.vue
+++ b/src/views/components-demo/mixin.vue
@@ -133,7 +133,7 @@ export default {
         { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
         { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
         { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
-        { title: 'vueAdmin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
+        { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
         { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
         { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
         { title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
diff --git a/src/views/documentation/index.vue b/src/views/documentation/index.vue
index c0ca2657..04500a87 100644
--- a/src/views/documentation/index.vue
+++ b/src/views/documentation/index.vue
@@ -17,7 +17,7 @@ export default {
         { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
         { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
         { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
-        { title: 'vueAdmin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
+        { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
         { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
         { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
         { title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },

From 8f58baf617a1a54f9c298e3f87c50c8d1a1073a7 Mon Sep 17 00:00:00 2001
From: Leo <leolmq@gmail.com>
Date: Fri, 17 Aug 2018 18:03:53 +0800
Subject: [PATCH 15/19] fix typo (#975)

---
 src/views/example/components/Warning.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/example/components/Warning.vue b/src/views/example/components/Warning.vue
index 95842613..15edff07 100644
--- a/src/views/example/components/Warning.vue
+++ b/src/views/example/components/Warning.vue
@@ -1,6 +1,6 @@
 <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"
       target="_blank">文档</a>

From e5d4290938e87d93c4df2e4b50fe513f30e59f12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Sun, 19 Aug 2018 16:55:24 +0800
Subject: [PATCH 16/19] refactor: add eslint-plugin-vue && lint code (#976)

---
 .eslintrc.js                                  |  28 ++-
 package.json                                  |   4 +-
 src/App.vue                                   |   8 +-
 src/components/BackToTop/index.vue            |   4 +-
 src/components/Breadcrumb/index.vue           |  14 +-
 src/components/Charts/keyboard.vue            |   2 +-
 src/components/Charts/lineMarker.vue          |   2 +-
 src/components/Charts/mixChart.vue            |   2 +-
 src/components/DndList/index.vue              |  42 ++--
 src/components/Dropzone/index.vue             | 145 +++++++-------
 src/components/ErrorLog/index.vue             |  31 +--
 src/components/GithubCorner/index.vue         |  21 +-
 src/components/Hamburger/index.vue            |  32 +++-
 src/components/ImageCropper/index.vue         | 180 +++++++++---------
 src/components/JsonEditor/index.vue           |   7 +-
 src/components/Kanban/index.vue               |  12 +-
 src/components/LangSelect/index.vue           |   9 +-
 src/components/MDinput/index.vue              | 136 ++++++++++---
 src/components/MarkdownEditor/index.vue       |  25 ++-
 src/components/PanThumb/index.vue             |   6 +-
 src/components/Screenfull/index.vue           |  35 ++--
 src/components/ScrollPane/index.vue           |   8 +-
 src/components/Share/dropdownMenu.vue         |  15 +-
 src/components/Sticky/index.vue               |   3 +-
 src/components/SvgIcon/index.vue              |   7 +-
 src/components/TextHoverEffect/Mallki.vue     |  12 +-
 src/components/ThemePicker/index.vue          |   4 +-
 .../Tinymce/components/editorImage.vue        |  16 +-
 src/components/Tinymce/index.vue              |  20 +-
 src/components/TreeTable/index.vue            |  29 +--
 src/components/Upload/singleImage.vue         |  47 +++--
 src/components/Upload/singleImage2.vue        |  31 +--
 src/components/Upload/singleImage3.vue        |  35 ++--
 src/components/UploadExcel/index.vue          |   4 +-
 src/lang/en.js                                |   4 +-
 src/router/index.js                           |  46 ++---
 src/router/modules/charts.js                  |   8 +-
 src/router/modules/components.js              |  28 +--
 src/router/modules/nested.js                  |  16 +-
 src/router/modules/table.js                   |  14 +-
 src/styles/btn.scss                           |   1 -
 src/views/charts/keyboard.vue                 |   6 +-
 src/views/charts/line.vue                     |   6 +-
 src/views/charts/mixChart.vue                 |   6 +-
 src/views/clipboard/index.vue                 |  10 +-
 src/views/components-demo/avatarUpload.vue    |  19 +-
 src/views/components-demo/backToTop.vue       |   8 +-
 src/views/components-demo/countTo.vue         |  38 ++--
 src/views/components-demo/dndList.vue         |   5 +-
 src/views/components-demo/dragDialog.vue      |  13 +-
 src/views/components-demo/dragKanban.vue      |   8 +-
 src/views/components-demo/dropzone.vue        |   7 +-
 src/views/components-demo/jsonEditor.vue      |   4 +-
 src/views/components-demo/markdown.vue        |   9 +-
 src/views/components-demo/mixin.vue           |  15 +-
 src/views/components-demo/splitpane.vue       |  12 +-
 src/views/components-demo/sticky.vue          |  22 +--
 src/views/components-demo/tinymce.vue         |  11 +-
 .../dashboard/admin/components/BarChart.vue   |   2 +-
 .../dashboard/admin/components/BoxCard.vue    |  40 ++--
 .../dashboard/admin/components/LineChart.vue  |  21 +-
 .../dashboard/admin/components/PanelGroup.vue |  12 +-
 .../dashboard/admin/components/PieChart.vue   |   2 +-
 .../admin/components/RaddarChart.vue          |   2 +-
 .../admin/components/TodoList/Todo.vue        |  35 ++--
 .../admin/components/TodoList/index.scss      |   1 +
 .../admin/components/TodoList/index.vue       |  25 ++-
 .../admin/components/TransactionTable.vue     |  16 +-
 src/views/dashboard/admin/index.vue           |  21 +-
 src/views/dashboard/editor/index.vue          |  12 +-
 src/views/dashboard/index.vue                 |   4 +-
 src/views/documentation/index.vue             |   8 +-
 src/views/errorLog/errorTestA.vue             |   4 +-
 src/views/errorLog/errorTestB.vue             |   2 +-
 src/views/errorLog/index.vue                  |  14 +-
 src/views/errorPage/401.vue                   |  12 +-
 src/views/errorPage/404.vue                   |   4 +-
 .../example/components/ArticleDetail.vue      |  37 ++--
 .../example/components/Dropdown/Comment.vue   |  17 +-
 .../example/components/Dropdown/Platform.vue  |  16 +-
 .../example/components/Dropdown/SourceUrl.vue |  13 +-
 src/views/example/components/Warning.vue      |   3 +-
 src/views/example/create.vue                  |   4 +-
 src/views/example/edit.vue                    |   4 +-
 src/views/example/list.vue                    |  48 +++--
 src/views/excel/exportExcel.vue               |  24 +--
 src/views/excel/selectExcel.vue               |  33 ++--
 src/views/excel/uploadExcel.vue               |   7 +-
 src/views/guide/index.vue                     |   6 +-
 src/views/i18n-demo/index.vue                 |  48 ++---
 src/views/i18n-demo/local.js                  |   4 +-
 src/views/layout/Layout.vue                   |  14 +-
 src/views/layout/components/AppMain.vue       |   2 +-
 src/views/layout/components/Navbar.vue        |  28 +--
 .../layout/components/Sidebar/SidebarItem.vue |  42 ++--
 src/views/layout/components/Sidebar/index.vue |   6 +-
 src/views/layout/components/TagsView.vue      |  24 ++-
 src/views/login/authredirect.vue              |  14 +-
 src/views/login/index.vue                     |  58 +++---
 src/views/login/socialsignin.vue              |   6 +-
 src/views/nested/menu1/index.vue              |   2 +-
 src/views/nested/menu1/menu1-1/index.vue      |   2 +-
 src/views/nested/menu1/menu1-2/index.vue      |   2 +-
 .../nested/menu1/menu1-2/menu1-2-1/index.vue  |   2 +-
 .../nested/menu1/menu1-2/menu1-2-2/index.vue  |   2 +-
 src/views/nested/menu1/menu1-3/index.vue      |   2 +-
 src/views/nested/menu2/index.vue              |   2 +-
 .../permission/components/SwitchRoles.vue     |   8 +-
 src/views/permission/directive.vue            |   4 +-
 src/views/permission/page.vue                 |   2 +-
 src/views/qiniu/upload.vue                    |   5 +-
 src/views/svg-icons/index.vue                 |   8 +-
 src/views/tab/components/tabPane.vue          |  44 +++--
 src/views/tab/index.vue                       |  13 +-
 src/views/table/complexTable.vue              | 145 +++++++-------
 src/views/table/dragTable.vue                 |  44 ++---
 src/views/table/dynamicTable/fixedThead.vue   |   8 +-
 src/views/table/dynamicTable/index.vue        |  10 +-
 src/views/table/dynamicTable/unfixedThead.vue |   7 +-
 src/views/table/inlineEditTable.vue           |  42 ++--
 src/views/table/treeTable/customTreeTable.vue |  20 +-
 src/views/table/treeTable/treeTable.vue       |   4 +-
 src/views/theme/index.vue                     |  26 +--
 src/views/zip/index.vue                       |  22 +--
 124 files changed, 1329 insertions(+), 1084 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 00d60805..6f55c5a1 100644
--- 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']
   }
 }
-
diff --git a/package.json b/package.json
index 8f7847cf..89e6ec12 100644
--- a/package.json
+++ b/package.json
@@ -82,10 +82,10 @@
     "eslint": "4.19.1",
     "eslint-friendly-formatter": "4.0.1",
     "eslint-loader": "2.0.0",
-    "eslint-plugin-html": "4.0.5",
+    "eslint-plugin-vue": "4.7.1",
     "file-loader": "1.1.11",
     "friendly-errors-webpack-plugin": "1.7.0",
-    "hash-sum": "^1.0.2",
+    "hash-sum": "1.0.2",
     "html-webpack-plugin": "^4.0.0-alpha",
     "husky": "0.14.3",
     "lint-staged": "7.2.2",
diff --git a/src/App.vue b/src/App.vue
index 690cfc98..ab408f3e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,11 @@
 <template>
   <div id="app">
-    <router-view></router-view>
+    <router-view/>
   </div>
 </template>
 
 <script>
-  export default{
-    name: 'App'
-  }
+export default{
+  name: 'App'
+}
 </script>
diff --git a/src/components/BackToTop/index.vue b/src/components/BackToTop/index.vue
index de953821..2d4b0193 100644
--- 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>
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index a30fe0cd..f1507a9e 100644
--- 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
diff --git a/src/components/Charts/keyboard.vue b/src/components/Charts/keyboard.vue
index 4b1bd499..15cc3432 100644
--- 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>
diff --git a/src/components/Charts/lineMarker.vue b/src/components/Charts/lineMarker.vue
index 6ca7611f..9f56e613 100644
--- 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>
diff --git a/src/components/Charts/mixChart.vue b/src/components/Charts/mixChart.vue
index be382be0..40aee7a0 100644
--- 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>
diff --git a/src/components/DndList/index.vue b/src/components/DndList/index.vue
index da9e76a5..43e0bb28 100644
--- 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)
diff --git a/src/components/Dropzone/index.vue b/src/components/Dropzone/index.vue
index 76596e4a..15d811d9 100644
--- 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>
diff --git a/src/components/ErrorLog/index.vue b/src/components/ErrorLog/index.vue
index ac8c2aa2..1fd883d0 100644
--- 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
diff --git a/src/components/GithubCorner/index.vue b/src/components/GithubCorner/index.vue
index c23fc912..b5da8874 100644
--- 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>
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 5ffa0646..26472e23 100644
--- 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,
diff --git a/src/components/ImageCropper/index.vue b/src/components/ImageCropper/index.vue
index c1dade3f..04b1ede9 100644
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
@@ -1,109 +1,113 @@
 <template>
-<div class="vue-image-crop-upload" v-show="value">
-  <div class="vicp-wrap">
-    <div class="vicp-close" @click="off">
-      <i class="vicp-icon4"></i>
-    </div>
-
-    <div class="vicp-step1" v-show="step == 1">
-      <div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange">
-        <i class="vicp-icon1" v-show="loading != 1">
-        <i class="vicp-icon1-arrow"></i>
-        <i class="vicp-icon1-body"></i>
-        <i class="vicp-icon1-bottom"></i>
-        </i>
-        <span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</span>
-        <span class="vicp-no-supported-hint" v-show="!isSupported">{{ lang.noSupported }}</span>
-        <input type="file" v-show="false" v-if="step == 1" @change="handleChange" ref="fileinput">
+  <div v-show="value" class="vue-image-crop-upload">
+    <div class="vicp-wrap">
+      <div class="vicp-close" @click="off">
+        <i class="vicp-icon4"/>
       </div>
-      <div class="vicp-error" v-show="hasError">
-        <i class="vicp-icon2"></i> {{ errorMsg }}
-      </div>
-      <div class="vicp-operate">
-        <a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
-      </div>
-    </div>
 
-    <div class="vicp-step2" v-if="step == 2">
-      <div class="vicp-crop">
-        <div class="vicp-crop-left" v-show="true">
-          <div class="vicp-img-container">
-            <img :src="sourceImgUrl" :style="sourceImgStyle" class="vicp-img" draggable="false"
-              @drag="preventDefault"
-              @dragstart="preventDefault"
-              @dragend="preventDefault"
-              @dragleave="preventDefault"
-              @dragover="preventDefault"
-              @dragenter="preventDefault"
-              @drop="preventDefault"
-              @touchstart="imgStartMove"
-              @touchmove="imgMove"
-              @touchend="createImg"
-              @touchcancel="createImg"
-              @mousedown="imgStartMove"
-              @mousemove="imgMove"
-              @mouseup="createImg"
-              @mouseout="createImg"
-              ref="img">
-            <div class="vicp-img-shade vicp-img-shade-1" :style="sourceImgShadeStyle"></div>
-            <div class="vicp-img-shade vicp-img-shade-2" :style="sourceImgShadeStyle"></div>
-          </div>
-
-          <div class="vicp-range">
-            <input type="range" :value="scale.range" step="1" min="0" max="100" @input="zoomChange">
-            <i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" class="vicp-icon5"></i>
-            <i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="vicp-icon6"></i>
-          </div>
-
-          <div class="vicp-rotate" v-if="!noRotate">
-                        <i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate">↺</i>
-                        <i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i>
-                    </div>
+      <div v-show="step == 1" class="vicp-step1">
+        <div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange">
+          <i v-show="loading != 1" class="vicp-icon1">
+            <i class="vicp-icon1-arrow"/>
+            <i class="vicp-icon1-body"/>
+            <i class="vicp-icon1-bottom"/>
+          </i>
+          <span v-show="loading !== 1" class="vicp-hint">{{ lang.hint }}</span>
+          <span v-show="!isSupported" class="vicp-no-supported-hint">{{ lang.noSupported }}</span>
+          <input v-show="false" v-if="step == 1" ref="fileinput" type="file" @change="handleChange">
         </div>
-        <div class="vicp-crop-right" v-show="true">
-          <div class="vicp-preview">
-            <div class="vicp-preview-item" v-if="!noSquare">
-              <img :src="createImgUrl" :style="previewStyle">
-              <span>{{ lang.preview }}</span>
+        <div v-show="hasError" class="vicp-error">
+          <i class="vicp-icon2"/> {{ errorMsg }}
+        </div>
+        <div class="vicp-operate">
+          <a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
+        </div>
+      </div>
+
+      <div v-if="step == 2" class="vicp-step2">
+        <div class="vicp-crop">
+          <div v-show="true" class="vicp-crop-left">
+            <div class="vicp-img-container">
+              <img
+                ref="img"
+                :src="sourceImgUrl"
+                :style="sourceImgStyle"
+                class="vicp-img"
+                draggable="false"
+                @drag="preventDefault"
+                @dragstart="preventDefault"
+                @dragend="preventDefault"
+                @dragleave="preventDefault"
+                @dragover="preventDefault"
+                @dragenter="preventDefault"
+                @drop="preventDefault"
+                @touchstart="imgStartMove"
+                @touchmove="imgMove"
+                @touchend="createImg"
+                @touchcancel="createImg"
+                @mousedown="imgStartMove"
+                @mousemove="imgMove"
+                @mouseup="createImg"
+                @mouseout="createImg">
+              <div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-1"/>
+              <div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-2"/>
             </div>
-            <div class="vicp-preview-item vicp-preview-item-circle" v-if="!noCircle">
-              <img :src="createImgUrl" :style="previewStyle">
-              <span>{{ lang.preview }}</span>
+
+            <div class="vicp-range">
+              <input :value="scale.range" type="range" step="1" min="0" max="100" @input="zoomChange">
+              <i class="vicp-icon5" @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub"/>
+              <i class="vicp-icon6" @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd"/>
+            </div>
+
+            <div v-if="!noRotate" class="vicp-rotate">
+              <i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate">↺</i>
+              <i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i>
+            </div>
+          </div>
+          <div v-show="true" class="vicp-crop-right">
+            <div class="vicp-preview">
+              <div v-if="!noSquare" class="vicp-preview-item">
+                <img :src="createImgUrl" :style="previewStyle">
+                <span>{{ lang.preview }}</span>
+              </div>
+              <div v-if="!noCircle" class="vicp-preview-item vicp-preview-item-circle">
+                <img :src="createImgUrl" :style="previewStyle">
+                <span>{{ lang.preview }}</span>
+              </div>
             </div>
           </div>
         </div>
+        <div class="vicp-operate">
+          <a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
+          <a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a>
+        </div>
       </div>
-      <div class="vicp-operate">
-        <a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
-        <a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a>
-      </div>
-    </div>
 
-    <div class="vicp-step3" v-if="step == 3">
-      <div class="vicp-upload">
-        <span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span>
-        <div class="vicp-progress-wrap">
-          <span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span>
+      <div v-if="step == 3" class="vicp-step3">
+        <div class="vicp-upload">
+          <span v-show="loading === 1" class="vicp-loading">{{ lang.loading }}</span>
+          <div class="vicp-progress-wrap">
+            <span v-show="loading === 1" :style="progressStyle" class="vicp-progress"/>
+          </div>
+          <div v-show="hasError" class="vicp-error">
+            <i class="vicp-icon2"/> {{ errorMsg }}
+          </div>
+          <div v-show="loading === 2" class="vicp-success">
+            <i class="vicp-icon3"/> {{ lang.success }}
+          </div>
         </div>
-        <div class="vicp-error" v-show="hasError">
-          <i class="vicp-icon2"></i> {{ errorMsg }}
-        </div>
-        <div class="vicp-success" v-show="loading === 2">
-          <i class="vicp-icon3"></i> {{ lang.success }}
+        <div class="vicp-operate">
+          <a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
+          <a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
         </div>
       </div>
-      <div class="vicp-operate">
-        <a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
-        <a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
-      </div>
+      <canvas v-show="false" ref="canvas" :width="width" :height="height"/>
     </div>
-    <canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas>
   </div>
-</div>
 </template>
 
 <script>
- /* eslint-disable */
+/* eslint-disable */
 'use strict'
 import request from '@/utils/request'
 import language from './utils/language.js'
diff --git a/src/components/JsonEditor/index.vue b/src/components/JsonEditor/index.vue
index b63f4438..d68b8c05 100644
--- 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()
diff --git a/src/components/Kanban/index.vue b/src/components/Kanban/index.vue
index c16894eb..4975dbdd 100644
--- 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
   },
diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue
index e8afa59e..ea381277 100644
--- 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>
 
-
diff --git a/src/components/MDinput/index.vue b/src/components/MDinput/index.vue
index f93ae258..7ede73db 100644
--- 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
diff --git a/src/components/MarkdownEditor/index.vue b/src/components/MarkdownEditor/index.vue
index 6dea8382..9847668a 100644
--- 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: ['[', ']( )']
diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue
index f3478d6c..ec549f43 100644
--- 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>
 
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index 56de914e..4cdcb568 100644
--- 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,
diff --git a/src/components/ScrollPane/index.vue b/src/components/ScrollPane/index.vue
index 1ce68c11..fa90bbe0 100644
--- 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
diff --git a/src/components/Share/dropdownMenu.vue b/src/components/Share/dropdownMenu.vue
index e3bb7dec..f7b1dd2c 100644
--- 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,
diff --git a/src/components/Sticky/index.vue b/src/components/Sticky/index.vue
index d3a698e8..e0fb7c57 100644
--- 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() {
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index e331a27e..12a1f58d 100644
--- 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: {
diff --git a/src/components/TextHoverEffect/Mallki.vue b/src/components/TextHoverEffect/Mallki.vue
index 542f6129..4ea29fc2 100644
--- 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,7 +21,6 @@ export default {
 }
 </script>
 
-
 <style>
 /* Mallki */
 
diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
index b366d963..e797d6c2 100644
--- 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>
diff --git a/src/components/Tinymce/components/editorImage.vue b/src/components/Tinymce/components/editorImage.vue
index 7569e4f2..f4e0a237 100644
--- 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 :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-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,
diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue
index 34a4a338..6383556c 100644
--- 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>
diff --git a/src/components/TreeTable/index.vue b/src/components/TreeTable/index.vue
index c33fc886..a48765c8 100644
--- 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
diff --git a/src/components/Upload/singleImage.vue b/src/components/Upload/singleImage.vue
index 2a3f26f3..291e4cf1 100644
--- a/src/components/Upload/singleImage.vue
+++ b/src/components/Upload/singleImage.vue
@@ -1,19 +1,25 @@
 <template>
-    <div class="upload-container">
-        <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
-            :on-success="handleImageSuccess">
-            <i class="el-icon-upload"></i>
-            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        </el-upload>
-        <div class="image-preview">
-            <div class="image-preview-wrapper" v-show="imageUrl.length>1">
-                <img :src="imageUrl+'?imageView2/1/w/200/h/200'">
-                <div class="image-preview-action">
-                    <i @click="rmImage" class="el-icon-delete"></i>
-                </div>
-            </div>
+  <div class="upload-container">
+    <el-upload
+      :data="dataObj"
+      :multiple="false"
+      :show-file-list="false"
+      :on-success="handleImageSuccess"
+      class="image-uploader"
+      drag
+      action="https://httpbin.org/post">
+      <i class="el-icon-upload"/>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+    </el-upload>
+    <div class="image-preview">
+      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
+        <img :src="imageUrl+'?imageView2/1/w/200/h/200'">
+        <div class="image-preview-action">
+          <i class="el-icon-delete" @click="rmImage"/>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -21,13 +27,11 @@
 import { getToken } from '@/api/qiniu'
 
 export default {
-  name: 'singleImageUpload',
+  name: 'SingleImageUpload',
   props: {
-    value: String
-  },
-  computed: {
-    imageUrl() {
-      return this.value
+    value: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -36,6 +40,11 @@ export default {
       dataObj: { token: '', key: '' }
     }
   },
+  computed: {
+    imageUrl() {
+      return this.value
+    }
+  },
   methods: {
     rmImage() {
       this.emitInput('')
diff --git a/src/components/Upload/singleImage2.vue b/src/components/Upload/singleImage2.vue
index 6fb94c1a..cf4dc0b7 100644
--- 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="handleImageSuccess">
-      <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('')
diff --git a/src/components/Upload/singleImage3.vue b/src/components/Upload/singleImage3.vue
index f6946c8a..637b9e1e 100644
--- 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="handleImageSuccess">
-      <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('')
diff --git a/src/components/UploadExcel/index.vue b/src/components/UploadExcel/index.vue
index f9e6a87b..909c3b4a 100644
--- 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 {
diff --git a/src/lang/en.js b/src/lang/en.js
index 8d6e711b..d47b557f 100644
--- 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.'
   },
diff --git a/src/router/index.js b/src/router/index.js
index 0492a28f..76a517c8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -59,7 +59,7 @@ export const constantRouterMap = [
       {
         path: 'dashboard',
         component: () => import('@/views/dashboard/index'),
-        name: 'dashboard',
+        name: 'Dashboard',
         meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
       }
     ]
@@ -72,7 +72,7 @@ export const constantRouterMap = [
       {
         path: 'index',
         component: () => import('@/views/documentation/index'),
-        name: 'documentation',
+        name: 'Documentation',
         meta: { title: 'documentation', icon: 'documentation', noCache: true }
       }
     ]
@@ -85,7 +85,7 @@ export const constantRouterMap = [
       {
         path: 'index',
         component: () => import('@/views/guide/index'),
-        name: 'guide',
+        name: 'Guide',
         meta: { title: 'guide', icon: 'guide', noCache: true }
       }
     ]
@@ -113,7 +113,7 @@ export const asyncRouterMap = [
       {
         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
@@ -122,7 +122,7 @@ export const asyncRouterMap = [
       {
         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
@@ -138,7 +138,7 @@ export const asyncRouterMap = [
       {
         path: 'index',
         component: () => import('@/views/svg-icons/index'),
-        name: 'icons',
+        name: 'Icons',
         meta: { title: 'icons', icon: 'icon', noCache: true }
       }
     ]
@@ -154,7 +154,7 @@ export const asyncRouterMap = [
     path: '/example',
     component: Layout,
     redirect: '/example/list',
-    name: 'example',
+    name: 'Example',
     meta: {
       title: 'example',
       icon: 'example'
@@ -163,20 +163,20 @@ export const asyncRouterMap = [
       {
         path: 'create',
         component: () => import('@/views/example/create'),
-        name: 'createArticle',
+        name: 'CreateArticle',
         meta: { title: 'createArticle', icon: 'edit' }
       },
       {
         path: 'edit/:id(\\d+)',
         component: () => import('@/views/example/edit'),
-        name: 'editArticle',
+        name: 'EditArticle',
         meta: { title: 'editArticle', noCache: true },
         hidden: true
       },
       {
         path: 'list',
         component: () => import('@/views/example/list'),
-        name: 'articleList',
+        name: 'ArticleList',
         meta: { title: 'articleList', icon: 'list' }
       }
     ]
@@ -189,7 +189,7 @@ export const asyncRouterMap = [
       {
         path: 'index',
         component: () => import('@/views/tab/index'),
-        name: 'tab',
+        name: 'Tab',
         meta: { title: 'tab', icon: 'tab' }
       }
     ]
@@ -199,7 +199,7 @@ export const asyncRouterMap = [
     path: '/error',
     component: Layout,
     redirect: 'noredirect',
-    name: 'errorPages',
+    name: 'ErrorPages',
     meta: {
       title: 'errorPages',
       icon: '404'
@@ -208,13 +208,13 @@ export const asyncRouterMap = [
       {
         path: '401',
         component: () => import('@/views/errorPage/401'),
-        name: 'page401',
+        name: 'Page401',
         meta: { title: 'page401', noCache: true }
       },
       {
         path: '404',
         component: () => import('@/views/errorPage/404'),
-        name: 'page404',
+        name: 'Page404',
         meta: { title: 'page404', noCache: true }
       }
     ]
@@ -228,7 +228,7 @@ export const asyncRouterMap = [
       {
         path: 'log',
         component: () => import('@/views/errorLog/index'),
-        name: 'errorLog',
+        name: 'ErrorLog',
         meta: { title: 'errorLog', icon: 'bug' }
       }
     ]
@@ -238,7 +238,7 @@ export const asyncRouterMap = [
     path: '/excel',
     component: Layout,
     redirect: '/excel/export-excel',
-    name: 'excel',
+    name: 'Excel',
     meta: {
       title: 'excel',
       icon: 'excel'
@@ -247,19 +247,19 @@ export const asyncRouterMap = [
       {
         path: 'export-excel',
         component: () => import('@/views/excel/exportExcel'),
-        name: 'exportExcel',
+        name: 'ExportExcel',
         meta: { title: 'exportExcel' }
       },
       {
         path: 'export-selected-excel',
         component: () => import('@/views/excel/selectExcel'),
-        name: 'selectExcel',
+        name: 'EelectExcel',
         meta: { title: 'selectExcel' }
       },
       {
         path: 'upload-excel',
         component: () => import('@/views/excel/uploadExcel'),
-        name: 'uploadExcel',
+        name: 'UploadExcel',
         meta: { title: 'uploadExcel' }
       }
     ]
@@ -275,7 +275,7 @@ export const asyncRouterMap = [
       {
         path: 'download',
         component: () => import('@/views/zip/index'),
-        name: 'exportZip',
+        name: 'ExportZip',
         meta: { title: 'exportZip' }
       }
     ]
@@ -289,7 +289,7 @@ export const asyncRouterMap = [
       {
         path: 'index',
         component: () => import('@/views/theme/index'),
-        name: 'theme',
+        name: 'Theme',
         meta: { title: 'theme', icon: 'theme' }
       }
     ]
@@ -303,7 +303,7 @@ export const asyncRouterMap = [
       {
         path: 'index',
         component: () => import('@/views/clipboard/index'),
-        name: 'clipboardDemo',
+        name: 'ClipboardDemo',
         meta: { title: 'clipboardDemo', icon: 'clipboard' }
       }
     ]
@@ -316,7 +316,7 @@ export const asyncRouterMap = [
       {
         path: 'index',
         component: () => import('@/views/i18n-demo/index'),
-        name: 'i18n',
+        name: 'I18n',
         meta: { title: 'i18n', icon: 'international' }
       }
     ]
diff --git a/src/router/modules/charts.js b/src/router/modules/charts.js
index 8bdff406..d11f6efd 100644
--- a/src/router/modules/charts.js
+++ b/src/router/modules/charts.js
@@ -6,7 +6,7 @@ const chartsRouter = {
   path: '/charts',
   component: Layout,
   redirect: 'noredirect',
-  name: 'charts',
+  name: 'Charts',
   meta: {
     title: 'charts',
     icon: 'chart'
@@ -15,19 +15,19 @@ const chartsRouter = {
     {
       path: 'keyboard',
       component: () => import('@/views/charts/keyboard'),
-      name: 'keyboardChart',
+      name: 'KeyboardChart',
       meta: { title: 'keyboardChart', noCache: true }
     },
     {
       path: 'line',
       component: () => import('@/views/charts/line'),
-      name: 'lineChart',
+      name: 'LineChart',
       meta: { title: 'lineChart', noCache: true }
     },
     {
       path: 'mixchart',
       component: () => import('@/views/charts/mixChart'),
-      name: 'mixChart',
+      name: 'MixChart',
       meta: { title: 'mixChart', noCache: true }
     }
   ]
diff --git a/src/router/modules/components.js b/src/router/modules/components.js
index 62d4520d..56dad2b1 100644
--- a/src/router/modules/components.js
+++ b/src/router/modules/components.js
@@ -6,7 +6,7 @@ const componentsRouter = {
   path: '/components',
   component: Layout,
   redirect: 'noredirect',
-  name: 'component-demo',
+  name: 'ComponentDemo',
   meta: {
     title: 'components',
     icon: 'component'
@@ -15,79 +15,79 @@ const componentsRouter = {
     {
       path: 'tinymce',
       component: () => import('@/views/components-demo/tinymce'),
-      name: 'tinymce-demo',
+      name: 'TinymceDemo',
       meta: { title: 'tinymce' }
     },
     {
       path: 'markdown',
       component: () => import('@/views/components-demo/markdown'),
-      name: 'markdown-demo',
+      name: 'MarkdownDemo',
       meta: { title: 'markdown' }
     },
     {
       path: 'json-editor',
       component: () => import('@/views/components-demo/jsonEditor'),
-      name: 'jsonEditor-demo',
+      name: 'JsonEditorDemo',
       meta: { title: 'jsonEditor' }
     },
     {
       path: 'splitpane',
       component: () => import('@/views/components-demo/splitpane'),
-      name: 'splitpane-demo',
+      name: 'SplitpaneDemo',
       meta: { title: 'splitPane' }
     },
     {
       path: 'avatar-upload',
       component: () => import('@/views/components-demo/avatarUpload'),
-      name: 'avatarUpload-demo',
+      name: 'AvatarUploadDemo',
       meta: { title: 'avatarUpload' }
     },
     {
       path: 'dropzone',
       component: () => import('@/views/components-demo/dropzone'),
-      name: 'dropzone-demo',
+      name: 'DropzoneDemo',
       meta: { title: 'dropzone' }
     },
     {
       path: 'sticky',
       component: () => import('@/views/components-demo/sticky'),
-      name: 'sticky-demo',
+      name: 'StickyDemo',
       meta: { title: 'sticky' }
     },
     {
       path: 'count-to',
       component: () => import('@/views/components-demo/countTo'),
-      name: 'countTo-demo',
+      name: 'CountToDemo',
       meta: { title: 'countTo' }
     },
     {
       path: 'mixin',
       component: () => import('@/views/components-demo/mixin'),
-      name: 'componentMixin-demo',
+      name: 'ComponentMixinDemo',
       meta: { title: 'componentMixin' }
     },
     {
       path: 'back-to-top',
       component: () => import('@/views/components-demo/backToTop'),
-      name: 'backToTop-demo',
+      name: 'BackToTopDemo',
       meta: { title: 'backToTop' }
     },
     {
       path: 'drag-dialog',
       component: () => import('@/views/components-demo/dragDialog'),
-      name: 'dragDialog-demo',
+      name: 'DragDialogDemo',
       meta: { title: 'dragDialog' }
     },
     {
       path: 'dnd-list',
       component: () => import('@/views/components-demo/dndList'),
-      name: 'dndList-demo',
+      name: 'DndListDemo',
       meta: { title: 'dndList' }
     },
     {
       path: 'drag-kanban',
       component: () => import('@/views/components-demo/dragKanban'),
-      name: 'dragKanban-demo',
+      name: 'DragKanbanDemo',
       meta: { title: 'dragKanban' }
     }
   ]
diff --git a/src/router/modules/nested.js b/src/router/modules/nested.js
index 0cbd9272..ad8e31f9 100644
--- a/src/router/modules/nested.js
+++ b/src/router/modules/nested.js
@@ -6,7 +6,7 @@ const nestedRouter = {
   path: '/nested',
   component: Layout,
   redirect: '/nested/menu1/menu1-1',
-  name: 'nested',
+  name: 'Nested',
   meta: {
     title: 'nested',
     icon: 'nested'
@@ -15,33 +15,33 @@ const nestedRouter = {
     {
       path: 'menu1',
       component: () => import('@/views/nested/menu1/index'), // Parent router-view
-      name: 'menu1',
+      name: 'Menu1',
       meta: { title: 'menu1' },
       redirect: '/nested/menu1/menu1-1',
       children: [
         {
           path: 'menu1-1',
           component: () => import('@/views/nested/menu1/menu1-1'),
-          name: 'menu1-1',
+          name: 'Menu1-1',
           meta: { title: 'menu1-1' }
         },
         {
           path: 'menu1-2',
           component: () => import('@/views/nested/menu1/menu1-2'),
-          name: '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',
+              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',
+              name: 'Menu1-2-2',
               meta: { title: 'menu1-2-2' }
             }
           ]
@@ -49,14 +49,14 @@ const nestedRouter = {
         {
           path: 'menu1-3',
           component: () => import('@/views/nested/menu1/menu1-3'),
-          name: 'menu1-3',
+          name: 'Menu1-3',
           meta: { title: 'menu1-3' }
         }
       ]
     },
     {
       path: 'menu2',
-      name: 'menu2',
+      name: 'Menu2',
       component: () => import('@/views/nested/menu2/index'),
       meta: { title: 'menu2' }
     }
diff --git a/src/router/modules/table.js b/src/router/modules/table.js
index fde5a41f..a9c4cb44 100644
--- a/src/router/modules/table.js
+++ b/src/router/modules/table.js
@@ -6,7 +6,7 @@ const tableRouter = {
   path: '/table',
   component: Layout,
   redirect: '/table/complex-table',
-  name: 'table',
+  name: 'Table',
   meta: {
     title: 'Table',
     icon: 'table'
@@ -15,37 +15,37 @@ const tableRouter = {
     {
       path: 'dynamic-table',
       component: () => import('@/views/table/dynamicTable/index'),
-      name: 'dynamicTable',
+      name: 'DynamicTable',
       meta: { title: 'dynamicTable' }
     },
     {
       path: 'drag-table',
       component: () => import('@/views/table/dragTable'),
-      name: 'dragTable',
+      name: 'DragTable',
       meta: { title: 'dragTable' }
     },
     {
       path: 'inline-edit-table',
       component: () => import('@/views/table/inlineEditTable'),
-      name: 'inlineEditTable',
+      name: 'InlineEditTable',
       meta: { title: 'inlineEditTable' }
     },
     {
       path: 'tree-table',
       component: () => import('@/views/table/treeTable/treeTable'),
-      name: 'treeTableDemo',
+      name: 'TreeTableDemo',
       meta: { title: 'treeTable' }
     },
     {
       path: 'custom-tree-table',
       component: () => import('@/views/table/treeTable/customTreeTable'),
-      name: 'customTreeTableDemo',
+      name: 'CustomTreeTableDemo',
       meta: { title: 'customTreeTable' }
     },
     {
       path: 'complex-table',
       component: () => import('@/views/table/complexTable'),
-      name: 'complexTable',
+      name: 'ComplexTable',
       meta: { title: 'complexTable' }
     }
   ]
diff --git a/src/styles/btn.scss b/src/styles/btn.scss
index f3f75c16..0c5ee768 100644
--- 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;
diff --git a/src/views/charts/keyboard.vue b/src/views/charts/keyboard.vue
index 30ed5762..98087ab0 100644
--- 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>
diff --git a/src/views/charts/line.vue b/src/views/charts/line.vue
index c45c3813..da0b5bba 100644
--- 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>
diff --git a/src/views/charts/mixChart.vue b/src/views/charts/mixChart.vue
index 1ca476e6..568bae7b 100644
--- 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>
diff --git a/src/views/clipboard/index.vue b/src/views/clipboard/index.vue
index 8a7583e3..0a4c63f2 100644
--- 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
   },
diff --git a/src/views/components-demo/avatarUpload.vue b/src/views/components-demo/avatarUpload.vue
index f993a4f6..144448ce 100644
--- 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 {
diff --git a/src/views/components-demo/backToTop.vue b/src/views/components-demo/backToTop.vue
index 6abb652a..83a5529b 100644
--- 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 {
diff --git a/src/views/components-demo/countTo.vue b/src/views/components-demo/countTo.vue
index b30204d9..7044a5d2 100644
--- a/src/views/components-demo/countTo.vue
+++ b/src/views/components-demo/countTo.vue
@@ -3,37 +3,46 @@
     <p class="warn-content">
       <a href="https://github.com/PanJiaChen/vue-countTo" target="_blank">countTo-component</a>
     </p>
-    <count-to ref="example" class="example" :start-val="_startVal" :end-val="_endVal" :duration="_duration" :decimals="_decimals"
-      :separator="_separator" :prefix="_prefix" :suffix="_suffix" :autoplay="false"></count-to>
+    <count-to
+      ref="example"
+      :start-val="_startVal"
+      :end-val="_endVal"
+      :duration="_duration"
+      :decimals="_decimals"
+      :separator="_separator"
+      :prefix="_prefix"
+      :suffix="_suffix"
+      :autoplay="false"
+      class="example"/>
     <div style="margin-left: 25%;margin-top: 40px;">
       <label class="label" for="startValInput">startVal:
-        <input type="number" v-model.number="setStartVal" name="startValInput" />
+        <input v-model.number="setStartVal" type="number" name="startValInput" >
       </label>
       <label class="label" for="endValInput">endVal:
-        <input type="number" v-model.number="setEndVal" name="endVaInput" />
+        <input v-model.number="setEndVal" type="number" name="endVaInput" >
       </label>
       <label class="label" for="durationInput">duration:
-        <input type="number" v-model.number="setDuration" name="durationInput" />
+        <input v-model.number="setDuration" type="number" name="durationInput" >
       </label>
       <div class="startBtn example-btn" @click="start">开始</div>
       <div class="pause-resume-btn example-btn" @click="pauseResume">暂停/恢复</div>
-      <br/>
+      <br>
       <label class="label" for="decimalsInput">decimals:
-        <input type="number" v-model.number="setDecimals" name="decimalsInput" />
+        <input v-model.number="setDecimals" type="number" name="decimalsInput" >
       </label>
       <label class="label" for="separatorInput">separator:
-        <input v-model="setSeparator" name="separatorInput" />
+        <input v-model="setSeparator" name="separatorInput" >
       </label>
       <label class="label" for="prefixInput">prefix:
-        <input v-model="setPrefix" name="prefixInput" />
+        <input v-model="setPrefix" name="prefixInput" >
       </label>
       <label class="label" for="suffixInput">suffix:
-        <input v-model="setSuffix" name="suffixInput" />
+        <input v-model="setSuffix" name="suffixInput" >
       </label>
     </div>
-    <code>&lt;count-to :start-val=&#x27;{{_startVal}}&#x27; :end-val=&#x27;{{_endVal}}&#x27; :duration=&#x27;{{_duration}}&#x27;
-      :decimals=&#x27;{{_decimals}}&#x27; :separator=&#x27;{{_separator}}&#x27; :prefix=&#x27;{{_prefix}}&#x27; :suffix=&#x27;{{_suffix}}&#x27;
-      :autoplay=false&gt;</code>
+    <code>&lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{ _duration }}&#x27;
+    :decimals=&#x27;{{ _decimals }}&#x27; :separator=&#x27;{{ _separator }}&#x27; :prefix=&#x27;{{ _prefix }}&#x27; :suffix=&#x27;{{ _suffix }}&#x27;
+    :autoplay=false&gt;</code>
   </div>
 </template>
 
@@ -41,7 +50,7 @@
 import countTo from 'vue-count-to'
 
 export default {
-  name: 'countTo-demo',
+  name: 'CountToDemo',
   components: { countTo },
   data() {
     return {
@@ -202,4 +211,3 @@ input {
 }
 </style>
 
-
diff --git a/src/views/components-demo/dndList.vue b/src/views/components-demo/dndList.vue
index b9779a31..9c8847a9 100644
--- 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>
 
-
diff --git a/src/views/components-demo/dragDialog.vue b/src/views/components-demo/dragDialog.vue
index 454d6327..0a023f90 100644
--- 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 {
diff --git a/src/views/components-demo/dragKanban.vue b/src/views/components-demo/dragKanban.vue
index 2bbab2bd..4353fb1e 100644
--- 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
   },
diff --git a/src/views/components-demo/dropzone.vue b/src/views/components-demo/dropzone.vue
index a31a702b..0044a525 100644
--- 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>
 
-
diff --git a/src/views/components-demo/jsonEditor.vue b/src/views/components-demo/jsonEditor.vue
index 75299bc0..cff3780c 100644
--- 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 {
diff --git a/src/views/components-demo/markdown.vue b/src/views/components-demo/markdown.vue
index 4e8b0648..f60911d0 100644
--- a/src/views/components-demo/markdown.vue
+++ b/src/views/components-demo/markdown.vue
@@ -6,10 +6,10 @@
         相关文章 </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>
 
-
diff --git a/src/views/components-demo/mixin.vue b/src/views/components-demo/mixin.vue
index 7f713f6d..99b62468 100644
--- a/src/views/components-demo/mixin.vue
+++ b/src/views/components-demo/mixin.vue
@@ -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,
@@ -134,10 +134,7 @@ export default {
         { 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://juejin.im/post/59bb864b5188257e7a427c09' },
-        { title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
-        { title: 'webpack4（下）', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
+        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' }
       ]
     }
   }
diff --git a/src/views/components-demo/splitpane.vue b/src/views/components-demo/splitpane.vue
index 5a0bfb2b..dcd87149 100644
--- 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() {
diff --git a/src/views/components-demo/sticky.vue b/src/views/components-demo/sticky.vue
index 49772bea..65cfb091 100644
--- 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 {
diff --git a/src/views/components-demo/tinymce.vue b/src/views/components-demo/tinymce.vue
index 10760f65..c7a94694 100644
--- 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>
 
-
diff --git a/src/views/dashboard/admin/components/BarChart.vue b/src/views/dashboard/admin/components/BarChart.vue
index e0606b2d..a694f2b9 100644
--- 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>
diff --git a/src/views/dashboard/admin/components/BoxCard.vue b/src/views/dashboard/admin/components/BoxCard.vue
index c6c6aa6e..0e4d1e27 100644
--- 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>
diff --git a/src/views/dashboard/admin/components/LineChart.vue b/src/views/dashboard/admin/components/LineChart.vue
index 9be9c92d..6c6637a8 100644
--- 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({
diff --git a/src/views/dashboard/admin/components/PanelGroup.vue b/src/views/dashboard/admin/components/PanelGroup.vue
index 8b7394a1..2d1d58c9 100644
--- 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>
diff --git a/src/views/dashboard/admin/components/PieChart.vue b/src/views/dashboard/admin/components/PieChart.vue
index 773b5f47..02999cd3 100644
--- 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>
diff --git a/src/views/dashboard/admin/components/RaddarChart.vue b/src/views/dashboard/admin/components/RaddarChart.vue
index f7d3bf36..e30b9770 100644
--- 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>
diff --git a/src/views/dashboard/admin/components/TodoList/Todo.vue b/src/views/dashboard/admin/components/TodoList/Todo.vue
index 028acfc7..9f5a6bb2 100644
--- 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)
diff --git a/src/views/dashboard/admin/components/TodoList/index.scss b/src/views/dashboard/admin/components/TodoList/index.scss
index 1851c9a9..74ce0d54 100644
--- 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;
diff --git a/src/views/dashboard/admin/components/TodoList/index.vue b/src/views/dashboard/admin/components/TodoList/index.vue
index 207cdbab..5b840c65 100644
--- 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>
diff --git a/src/views/dashboard/admin/components/TransactionTable.vue b/src/views/dashboard/admin/components/TransactionTable.vue
index 7c79b77b..bcbfbb43 100644
--- 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()
   },
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 8da28543..1a79637a 100644
--- 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,
diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue
index 2faf7f99..ace11426 100644
--- 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 {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 046f6e30..7011f6ad 100644
--- 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 {
diff --git a/src/views/documentation/index.vue b/src/views/documentation/index.vue
index 04500a87..53de7b55 100644
--- a/src/views/documentation/index.vue
+++ b/src/views/documentation/index.vue
@@ -1,15 +1,15 @@
 <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>
+    <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 {
diff --git a/src/views/errorLog/errorTestA.vue b/src/views/errorLog/errorTestA.vue
index 475c0438..52654e0e 100644
--- 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>
diff --git a/src/views/errorLog/errorTestB.vue b/src/views/errorLog/errorTestB.vue
index a1303f89..b04c2511 100644
--- a/src/views/errorLog/errorTestB.vue
+++ b/src/views/errorLog/errorTestB.vue
@@ -1,5 +1,5 @@
 <template>
-  <div></div>
+  <div/>
 </template>
 
 <script>
diff --git a/src/views/errorLog/index.vue b/src/views/errorLog/index.vue
index aac5e402..47db4ae5 100644
--- 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>
diff --git a/src/views/errorPage/401.vue b/src/views/errorPage/401.vue
index b8bbb013..d43be52d 100644
--- 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(),
diff --git a/src/views/errorPage/404.vue b/src/views/errorPage/404.vue
index 97e57b2f..c3eafea0 100644
--- a/src/views/errorPage/404.vue
+++ b/src/views/errorPage/404.vue
@@ -10,7 +10,7 @@
       <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>
@@ -23,7 +23,7 @@
 <script>
 
 export default {
-  name: 'page404',
+  name: 'Page404',
   computed: {
     message() {
       return '网管说这个页面你不能进......'
diff --git a/src/views/example/components/ArticleDetail.vue b/src/views/example/components/ArticleDetail.vue
index 6cd66828..b5511134 100644
--- 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()
diff --git a/src/views/example/components/Dropdown/Comment.vue b/src/views/example/components/Dropdown/Comment.vue
index da217599..77e8d5f1 100644
--- 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() {
diff --git a/src/views/example/components/Dropdown/Platform.vue b/src/views/example/components/Dropdown/Platform.vue
index a20321dd..fce5e4b3 100644
--- 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: [
diff --git a/src/views/example/components/Dropdown/SourceUrl.vue b/src/views/example/components/Dropdown/SourceUrl.vue
index f09eb69d..d14e8549 100644
--- 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() {
diff --git a/src/views/example/components/Warning.vue b/src/views/example/components/Warning.vue
index 15edff07..77d90c26 100644
--- a/src/views/example/components/Warning.vue
+++ b/src/views/example/components/Warning.vue
@@ -2,7 +2,8 @@
   <p class="warn-content">
     创建和编辑页面是不能被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>
diff --git a/src/views/example/create.vue b/src/views/example/create.vue
index ea5302dc..d0f7b787 100644
--- a/src/views/example/create.vue
+++ b/src/views/example/create.vue
@@ -1,12 +1,12 @@
 <template>
-  <article-detail :is-edit='false'></article-detail>
+  <article-detail :is-edit="false"/>
 </template>
 
 <script>
 import ArticleDetail from './components/ArticleDetail'
 
 export default {
-  name: 'createForm',
+  name: 'CreateForm',
   components: { ArticleDetail }
 }
 </script>
diff --git a/src/views/example/edit.vue b/src/views/example/edit.vue
index 097b6140..c21af0c9 100644
--- a/src/views/example/edit.vue
+++ b/src/views/example/edit.vue
@@ -1,12 +1,12 @@
 <template>
-  <article-detail :is-edit='true'></article-detail>
+  <article-detail :is-edit="true"/>
 </template>
 
 <script>
 import ArticleDetail from './components/ArticleDetail'
 
 export default {
-  name: 'editForm',
+  name: 'EditForm',
   components: { ArticleDetail }
 }
 </script>
diff --git a/src/views/example/list.vue b/src/views/example/list.vue
index 7dccafa6..f44d7078 100644
--- a/src/views/example/list.vue
+++ b/src/views/example/list.vue
@@ -1,41 +1,41 @@
 <template>
   <div class="app-container">
 
-    <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
+    <el-table v-loading.body="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
       <el-table-column align="center" label="ID" width="80">
         <template slot-scope="scope">
-          <span>{{scope.row.id}}</span>
+          <span>{{ scope.row.id }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="180px" align="center" label="Date">
         <template slot-scope="scope">
-          <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
+          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="120px" align="center" label="Author">
         <template slot-scope="scope">
-          <span>{{scope.row.author}}</span>
+          <span>{{ scope.row.author }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="100px" label="Importance">
         <template slot-scope="scope">
-          <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
+          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon"/>
         </template>
       </el-table-column>
 
       <el-table-column class-name="status-col" label="Status" width="110">
         <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-column min-width="300px" label="Title">
         <template slot-scope="scope">
 
-          <router-link class="link-type" :to="'/example/edit/'+scope.row.id">
+          <router-link :to="'/example/edit/'+scope.row.id" class="link-type">
             <span>{{ scope.row.title }}</span>
           </router-link>
         </template>
@@ -51,9 +51,15 @@
     </el-table>
 
     <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
-        :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+      <el-pagination
+        :current-page="listQuery.page"
+        :page-sizes="[10,20,30, 50]"
+        :page-size="listQuery.limit"
+        :total="total"
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
     </div>
 
   </div>
@@ -63,7 +69,17 @@
 import { fetchList } from '@/api/article'
 
 export default {
-  name: 'articleList',
+  name: 'ArticleList',
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
   data() {
     return {
       list: null,
@@ -75,16 +91,6 @@ export default {
       }
     }
   },
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
   created() {
     this.getList()
   },
diff --git a/src/views/excel/exportExcel.vue b/src/views/excel/exportExcel.vue
index 6f633a2b..ae32b3aa 100644
--- a/src/views/excel/exportExcel.vue
+++ b/src/views/excel/exportExcel.vue
@@ -3,39 +3,39 @@
   <div class="app-container">
 
     <label class="radio-label" style="padding-left:0;">Filename: </label>
-    <el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
-    <label class="radio-label">Cell Auto Width: </label>
+    <el-input :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
+    <label class="radio-label">Cell Auto-Width: </label>
     <el-radio-group v-model="autoWidth">
       <el-radio :label="true" border>True</el-radio>
       <el-radio :label="false" border>False</el-radio>
     </el-radio-group>
-    <el-button style='margin:0 0 20px 20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
+    <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">{{ $t('excel.export') }} Excel</el-button>
 
-    <el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
-      <el-table-column align="center" label='Id' width="95">
+    <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
+      <el-table-column align="center" label="Id" width="95">
         <template slot-scope="scope">
-          {{scope.$index}}
+          {{ scope.$index }}
         </template>
       </el-table-column>
       <el-table-column label="Title">
         <template slot-scope="scope">
-          {{scope.row.title}}
+          {{ scope.row.title }}
         </template>
       </el-table-column>
       <el-table-column label="Author" width="110" align="center">
         <template slot-scope="scope">
-          <el-tag>{{scope.row.author}}</el-tag>
+          <el-tag>{{ scope.row.author }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="Readings" width="115" align="center">
         <template slot-scope="scope">
-          {{scope.row.pageviews}}
+          {{ scope.row.pageviews }}
         </template>
       </el-table-column>
       <el-table-column align="center" label="Date" width="220">
         <template slot-scope="scope">
-          <i class="el-icon-time"></i>
-          <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
+          <i class="el-icon-time"/>
+          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
     </el-table>
@@ -47,7 +47,7 @@ import { fetchList } from '@/api/article'
 import { parseTime } from '@/utils'
 
 export default {
-  name: 'exportExcel',
+  name: 'ExportExcel',
   data() {
     return {
       list: null,
diff --git a/src/views/excel/selectExcel.vue b/src/views/excel/selectExcel.vue
index c0841373..7e5366f4 100644
--- a/src/views/excel/selectExcel.vue
+++ b/src/views/excel/selectExcel.vue
@@ -1,35 +1,42 @@
 <template>
   <div class="app-container">
     <!-- $t is vue-i18n global function to translate lang -->
-    <el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
-    <el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.selectedExport')}}</el-button>
-    <el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange"
-      ref="multipleTable">
-      <el-table-column type="selection" align="center"></el-table-column>
-      <el-table-column align="center" label='Id' width="95">
+    <el-input :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
+    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">{{ $t('excel.selectedExport') }}</el-button>
+    <el-table
+      v-loading="listLoading"
+      ref="multipleTable"
+      :data="list"
+      element-loading-text="拼命加载中"
+      border
+      fit
+      highlight-current-row
+      @selection-change="handleSelectionChange">
+      <el-table-column type="selection" align="center"/>
+      <el-table-column align="center" label="Id" width="95">
         <template slot-scope="scope">
-          {{scope.$index}}
+          {{ scope.$index }}
         </template>
       </el-table-column>
       <el-table-column label="Title">
         <template slot-scope="scope">
-          {{scope.row.title}}
+          {{ scope.row.title }}
         </template>
       </el-table-column>
       <el-table-column label="Author" width="110" align="center">
         <template slot-scope="scope">
-          <el-tag>{{scope.row.author}}</el-tag>
+          <el-tag>{{ scope.row.author }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="Readings" width="115" align="center">
         <template slot-scope="scope">
-          {{scope.row.pageviews}}
+          {{ scope.row.pageviews }}
         </template>
       </el-table-column>
       <el-table-column align="center" label="PDate" width="220">
         <template slot-scope="scope">
-          <i class="el-icon-time"></i>
-          <span>{{scope.row.display_time}}</span>
+          <i class="el-icon-time"/>
+          <span>{{ scope.row.display_time }}</span>
         </template>
       </el-table-column>
     </el-table>
@@ -40,7 +47,7 @@
 import { fetchList } from '@/api/article'
 
 export default {
-  name: 'selectExcel',
+  name: 'SelectExcel',
   data() {
     return {
       list: null,
diff --git a/src/views/excel/uploadExcel.vue b/src/views/excel/uploadExcel.vue
index 42789816..4095e910 100644
--- a/src/views/excel/uploadExcel.vue
+++ b/src/views/excel/uploadExcel.vue
@@ -1,9 +1,8 @@
 <template>
   <div class="app-container">
-    <upload-excel-component :on-success='handleSuccess' :before-upload="beforeUpload"></upload-excel-component>
+    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload"/>
     <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
-      <el-table-column v-for='item of tableHeader' :prop="item" :label="item" :key='item'>
-      </el-table-column>
+      <el-table-column v-for="item of tableHeader" :prop="item" :label="item" :key="item"/>
     </el-table>
   </div>
 </template>
@@ -12,7 +11,7 @@
 import UploadExcelComponent from '@/components/UploadExcel/index.vue'
 
 export default {
-  name: 'uploadExcel',
+  name: 'UploadExcel',
   components: { UploadExcelComponent },
   data() {
     return {
diff --git a/src/views/guide/index.vue b/src/views/guide/index.vue
index 99788caf..c30c52cf 100644
--- a/src/views/guide/index.vue
+++ b/src/views/guide/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="app-container">
     <p class="warn-content">
-      {{$t('guide.description')}}
+      {{ $t('guide.description') }}
       <a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.
       </a>
     </p>
-    <el-button icon='el-icon-question' type="primary" @click.prevent.stop="guide">{{$t('guide.button')}}</el-button>
+    <el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">{{ $t('guide.button') }}</el-button>
   </div>
 </template>
 
@@ -15,7 +15,7 @@ import 'driver.js/dist/driver.min.css' // import driver.js css
 import steps from './defineSteps'
 
 export default {
-  name: 'guide',
+  name: 'Guide',
   data() {
     return {
       driver: null
diff --git a/src/views/i18n-demo/index.vue b/src/views/i18n-demo/index.vue
index dc842a71..788558ba 100644
--- a/src/views/i18n-demo/index.vue
+++ b/src/views/i18n-demo/index.vue
@@ -3,41 +3,45 @@
     <el-card class="box-card" style="margin-top:40px;">
       <div slot="header" class="clearfix">
         <svg-icon icon-class="international" />
-        <span style='margin-left:10px;'>{{$t('i18nView.title')}}</span>
+        <span style="margin-left:10px;">{{ $t('i18nView.title') }}</span>
       </div>
       <div>
         <el-radio-group v-model="lang" size="small">
           <el-radio label="zh" border>简体中文</el-radio>
           <el-radio label="en" border>English</el-radio>
         </el-radio-group>
-        <el-tag style='margin-top:15px;display:block;' type="info">{{$t('i18nView.note')}}</el-tag>
+        <el-tag style="margin-top:15px;display:block;" type="info">{{ $t('i18nView.note') }}</el-tag>
       </div>
     </el-card>
 
     <el-row :gutter="20" style="margin:100px 15px 50px;">
       <el-col :span="12">
         <div class="block">
-          <el-date-picker v-model="date" type="date" :placeholder="$t('i18nView.datePlaceholder')"></el-date-picker>
+          <el-date-picker v-model="date" :placeholder="$t('i18nView.datePlaceholder')" type="date"/>
         </div>
         <div class="block">
-          <el-pagination background :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next"
-            :total="400">
-          </el-pagination>
+          <el-pagination
+            :current-page="currentPage"
+            :page-sizes="[100, 200, 300, 400]"
+            :page-size="100"
+            :total="400"
+            background
+            layout="total, sizes, prev, pager, next"/>
         </div>
         <div class="block">
-          <el-button class="item-btn" size="small">{{$t('i18nView.default')}}</el-button>
-          <el-button class="item-btn" size="small" type="primary">{{$t('i18nView.primary')}}</el-button>
-          <el-button class="item-btn" size="small" type="success">{{$t('i18nView.success')}}</el-button>
-          <el-button class="item-btn" size="small" type="info">{{$t('i18nView.info')}}</el-button>
-          <el-button class="item-btn" size="small" type="warning">{{$t('i18nView.warning')}}</el-button>
-          <el-button class="item-btn" size="small" type="danger">{{$t('i18nView.danger')}}</el-button>
+          <el-button class="item-btn" size="small">{{ $t('i18nView.default') }}</el-button>
+          <el-button class="item-btn" size="small" type="primary">{{ $t('i18nView.primary') }}</el-button>
+          <el-button class="item-btn" size="small" type="success">{{ $t('i18nView.success') }}</el-button>
+          <el-button class="item-btn" size="small" type="info">{{ $t('i18nView.info') }}</el-button>
+          <el-button class="item-btn" size="small" type="warning">{{ $t('i18nView.warning') }}</el-button>
+          <el-button class="item-btn" size="small" type="danger">{{ $t('i18nView.danger') }}</el-button>
         </div>
       </el-col>
       <el-col :span="12">
         <el-table :data="tableData" fit highlight-current-row border style="width: 100%">
-          <el-table-column prop="name" :label="$t('i18nView.tableName')" width="100" align="center"></el-table-column>
-          <el-table-column prop="date" :label="$t('i18nView.tableDate')" width="120" align="center"></el-table-column>
-          <el-table-column prop="address" :label="$t('i18nView.tableAddress')"></el-table-column>
+          <el-table-column :label="$t('i18nView.tableName')" prop="name" width="100" align="center"/>
+          <el-table-column :label="$t('i18nView.tableDate')" prop="date" width="120" align="center"/>
+          <el-table-column :label="$t('i18nView.tableAddress')" prop="address"/>
         </el-table>
       </el-col>
     </el-row>
@@ -49,7 +53,7 @@ import local from './local'
 const viewName = 'i18nView'
 
 export default {
-  name: 'i18n',
+  name: 'I18n',
   data() {
     return {
       date: '',
@@ -76,12 +80,6 @@ export default {
       }]
     }
   },
-  created() {
-    if (!this.$i18n.getLocaleMessage('en')[viewName]) {
-      this.$i18n.mergeLocaleMessage('en', local.en)
-      this.$i18n.mergeLocaleMessage('zh', local.zh)
-    }
-  },
   computed: {
     lang: {
       get() {
@@ -92,6 +90,12 @@ export default {
         this.$store.dispatch('setLanguage', lang)
       }
     }
+  },
+  created() {
+    if (!this.$i18n.getLocaleMessage('en')[viewName]) {
+      this.$i18n.mergeLocaleMessage('en', local.en)
+      this.$i18n.mergeLocaleMessage('zh', local.zh)
+    }
   }
 }
 </script>
diff --git a/src/views/i18n-demo/local.js b/src/views/i18n-demo/local.js
index a4c07203..7977d2f9 100644
--- a/src/views/i18n-demo/local.js
+++ b/src/views/i18n-demo/local.js
@@ -3,7 +3,7 @@ export default {
   zh: {
     i18nView: {
       title: '切换语言',
-      note: '目前只翻译了当前页面和侧边栏和导航，未完待续，敬请期待...',
+      note: '本项目国际化基于 vue-i18n',
       datePlaceholder: '请选择日期',
       tableDate: '日期',
       tableName: '姓名',
@@ -20,7 +20,7 @@ export default {
   en: {
     i18nView: {
       title: 'Switch Language',
-      note: 'Currently only translated the i18n page and the sidebar and levelbar, please look forword to...',
+      note: 'The internationalization of this project is based on vue-i18n',
       datePlaceholder: 'Pick a day',
       tableDate: 'tableDate',
       tableName: 'tableName',
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
index 5b78bf0f..bd882ef0 100644
--- a/src/views/layout/Layout.vue
+++ b/src/views/layout/Layout.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="app-wrapper" :class="classObj">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
-    <sidebar class="sidebar-container"></sidebar>
+  <div :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <sidebar class="sidebar-container"/>
     <div class="main-container">
-      <navbar></navbar>
-      <tags-view></tags-view>
-      <app-main></app-main>
+      <navbar/>
+      <tags-view/>
+      <app-main/>
     </div>
   </div>
 </template>
@@ -15,7 +15,7 @@ import { Navbar, Sidebar, AppMain, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 
 export default {
-  name: 'layout',
+  name: 'Layout',
   components: {
     Navbar,
     Sidebar,
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
index 584e3723..553bb61d 100644
--- a/src/views/layout/components/AppMain.vue
+++ b/src/views/layout/components/AppMain.vue
@@ -2,7 +2,7 @@
   <section class="app-main">
     <transition name="fade-transform" mode="out-in">
       <keep-alive :include="cachedViews">
-        <router-view :key="key"></router-view>
+        <router-view :key="key"/>
       </keep-alive>
     </transition>
   </section>
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
index ad96453c..07244584 100644
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -1,40 +1,40 @@
 <template>
   <el-menu class="navbar" mode="horizontal">
-    <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
 
-    <breadcrumb class="breadcrumb-container"></breadcrumb>
+    <breadcrumb class="breadcrumb-container"/>
 
     <div class="right-menu">
-      <error-log class="errLog-container right-menu-item"></error-log>
+      <error-log class="errLog-container right-menu-item"/>
 
-      <el-tooltip effect="dark" :content="$t('navbar.screenfull')" placement="bottom">
-        <screenfull class="screenfull right-menu-item"></screenfull>
+      <el-tooltip :content="$t('navbar.screenfull')" effect="dark" placement="bottom">
+        <screenfull class="screenfull right-menu-item"/>
       </el-tooltip>
 
-      <lang-select class="international right-menu-item"></lang-select>
+      <lang-select class="international right-menu-item"/>
 
-      <el-tooltip effect="dark" :content="$t('navbar.theme')" placement="bottom">
-        <theme-picker class="theme-switch right-menu-item"></theme-picker>
+      <el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
+        <theme-picker class="theme-switch right-menu-item"/>
       </el-tooltip>
 
       <el-dropdown class="avatar-container right-menu-item" trigger="click">
         <div class="avatar-wrapper">
-          <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
-          <i class="el-icon-caret-bottom"></i>
+          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+          <i class="el-icon-caret-bottom"/>
         </div>
         <el-dropdown-menu slot="dropdown">
           <router-link to="/">
             <el-dropdown-item>
-              {{$t('navbar.dashboard')}}
+              {{ $t('navbar.dashboard') }}
             </el-dropdown-item>
           </router-link>
-          <a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
+          <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
             <el-dropdown-item>
-              {{$t('navbar.github')}}
+              {{ $t('navbar.github') }}
             </el-dropdown-item>
           </a>
           <el-dropdown-item divided>
-            <span @click="logout" style="display:block;">{{$t('navbar.logOut')}}</span>
+            <span style="display:block;" @click="logout">{{ $t('navbar.logOut') }}</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
index d56503ab..30a22baf 100644
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/src/views/layout/components/Sidebar/SidebarItem.vue
@@ -1,30 +1,30 @@
 <template>
   <div v-if="!item.hidden&&item.children" class="menu-wrapper">
 
-      <router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
-          <span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{generateTitle(onlyOneChild.meta.title)}}</span>
-        </el-menu-item>
-      </router-link>
+    <router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
+      <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+        <svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"/>
+        <span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{ generateTitle(onlyOneChild.meta.title) }}</span>
+      </el-menu-item>
+    </router-link>
 
-      <el-submenu v-else :index="item.name||item.path">
-        <template slot="title">
-          <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
-          <span v-if="item.meta&&item.meta.title" slot="title">{{generateTitle(item.meta.title)}}</span>
-        </template>
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"/>
+        <span v-if="item.meta&&item.meta.title" slot="title">{{ generateTitle(item.meta.title) }}</span>
+      </template>
 
-        <template v-for="child in item.children" v-if="!child.hidden">
-          <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item v-if="child.children&&child.children.length>0" :is-nest="true" :item="child" :key="child.path" :base-path="resolvePath(child.path)" class="nest-menu"/>
 
-          <router-link v-else :to="resolvePath(child.path)" :key="child.name">
-            <el-menu-item :index="resolvePath(child.path)">
-              <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
-              <span v-if="child.meta&&child.meta.title" slot="title">{{generateTitle(child.meta.title)}}</span>
-            </el-menu-item>
-          </router-link>
-        </template>
-      </el-submenu>
+        <router-link v-else :to="resolvePath(child.path)" :key="child.name">
+          <el-menu-item :index="resolvePath(child.path)">
+            <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"/>
+            <span v-if="child.meta&&child.meta.title" slot="title">{{ generateTitle(child.meta.title) }}</span>
+          </el-menu-item>
+        </router-link>
+      </template>
+    </el-submenu>
 
   </div>
 </template>
diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue
index 52b00f10..a0f74581 100644
--- a/src/views/layout/components/Sidebar/index.vue
+++ b/src/views/layout/components/Sidebar/index.vue
@@ -1,15 +1,15 @@
 <template>
-  <el-scrollbar wrapClass="scrollbar-wrapper">
+  <el-scrollbar wrap-class="scrollbar-wrapper">
     <el-menu
-      mode="vertical"
       :show-timeout="200"
       :default-active="$route.path"
       :collapse="isCollapse"
+      mode="vertical"
       background-color="#304156"
       text-color="#bfcbd9"
       active-text-color="#409EFF"
     >
-      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
     </el-menu>
   </el-scrollbar>
 </template>
diff --git a/src/views/layout/components/TagsView.vue b/src/views/layout/components/TagsView.vue
index b4544461..9e34baff 100644
--- a/src/views/layout/components/TagsView.vue
+++ b/src/views/layout/components/TagsView.vue
@@ -1,16 +1,22 @@
 <template>
   <div class="tags-view-container">
-    <scroll-pane class='tags-view-wrapper' ref='scrollPane'>
-      <router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)"
-        :to="tag" :key="tag.path" @contextmenu.prevent.native="openMenu(tag,$event)">
-        {{generateTitle(tag.title)}}
-        <span class='el-icon-close' @click.prevent.stop='closeSelectedTag(tag)'></span>
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in Array.from(visitedViews)"
+        ref="tag"
+        :class="isActive(tag)?'active':''"
+        :to="tag"
+        :key="tag.path"
+        class="tags-view-item"
+        @contextmenu.prevent.native="openMenu(tag,$event)">
+        {{ generateTitle(tag.title) }}
+        <span class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)"/>
       </router-link>
     </scroll-pane>
-    <ul class='contextmenu' v-show="visible" :style="{left:left+'px',top:top+'px'}">
-      <li @click="closeSelectedTag(selectedTag)">{{$t('tagsView.close')}}</li>
-      <li @click="closeOthersTags">{{$t('tagsView.closeOthers')}}</li>
-      <li @click="closeAllTags">{{$t('tagsView.closeAll')}}</li>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="closeSelectedTag(selectedTag)">{{ $t('tagsView.close') }}</li>
+      <li @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</li>
+      <li @click="closeAllTags">{{ $t('tagsView.closeAll') }}</li>
     </ul>
   </div>
 </template>
diff --git a/src/views/login/authredirect.vue b/src/views/login/authredirect.vue
index 7cf37e81..52eb1aec 100644
--- a/src/views/login/authredirect.vue
+++ b/src/views/login/authredirect.vue
@@ -1,10 +1,10 @@
 <script>
-  export default {
-    name: 'authredirect',
-    created() {
-      const hash = window.location.search.slice(1)
-      window.opener.location.href = window.location.origin + '/login#' + hash
-      window.close()
-    }
+export default {
+  name: 'Authredirect',
+  created() {
+    const hash = window.location.search.slice(1)
+    window.opener.location.href = window.location.origin + '/login#' + hash
+    window.close()
   }
+}
 </script>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 1ff3d311..5a09702a 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,18 +1,23 @@
 <template>
   <div class="login-container">
 
-    <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
 
       <div class="title-container">
-        <h3 class="title">{{$t('login.title')}}</h3>
-        <lang-select class="set-language"></lang-select>
+        <h3 class="title">{{ $t('login.title') }}</h3>
+        <lang-select class="set-language"/>
       </div>
 
       <el-form-item prop="username">
         <span class="svg-container svg-container_login">
           <svg-icon icon-class="user" />
         </span>
-        <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" :placeholder="$t('login.username')"
+        <el-input
+          v-model="loginForm.username"
+          :placeholder="$t('login.username')"
+          name="username"
+          type="text"
+          auto-complete="on"
         />
       </el-form-item>
 
@@ -20,32 +25,37 @@
         <span class="svg-container">
           <svg-icon icon-class="password" />
         </span>
-        <el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
-          :placeholder="$t('login.password')" />
+        <el-input
+          :type="passwordType"
+          v-model="loginForm.password"
+          :placeholder="$t('login.password')"
+          name="password"
+          auto-complete="on"
+          @keyup.enter.native="handleLogin" />
         <span class="show-pwd" @click="showPwd">
           <svg-icon icon-class="eye" />
         </span>
       </el-form-item>
 
-      <el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">{{$t('login.logIn')}}</el-button>
+      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">{{ $t('login.logIn') }}</el-button>
 
       <div class="tips">
-        <span>{{$t('login.username')}} : admin</span>
-        <span>{{$t('login.password')}} : {{$t('login.any')}}</span>
+        <span>{{ $t('login.username') }} : admin</span>
+        <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
       </div>
       <div class="tips">
-        <span style="margin-right:18px;">{{$t('login.username')}} : editor</span>
-        <span>{{$t('login.password')}} : {{$t('login.any')}}</span>
+        <span style="margin-right:18px;">{{ $t('login.username') }} : editor</span>
+        <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
       </div>
 
-      <el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{$t('login.thirdparty')}}</el-button>
+      <el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{ $t('login.thirdparty') }}</el-button>
     </el-form>
 
     <el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog" append-to-body>
-      {{$t('login.thirdpartyTips')}}
-      <br/>
-      <br/>
-      <br/>
+      {{ $t('login.thirdpartyTips') }}
+      <br>
+      <br>
+      <br>
       <social-sign />
     </el-dialog>
 
@@ -58,8 +68,8 @@ import LangSelect from '@/components/LangSelect'
 import SocialSign from './socialsignin'
 
 export default {
+  name: 'Login',
   components: { LangSelect, SocialSign },
-  name: 'login',
   data() {
     const validateUsername = (rule, value, callback) => {
       if (!isvalidUsername(value)) {
@@ -89,6 +99,12 @@ export default {
       showDialog: false
     }
   },
+  created() {
+    // window.addEventListener('hashchange', this.afterQRScan)
+  },
+  destroyed() {
+    // window.removeEventListener('hashchange', this.afterQRScan)
+  },
   methods: {
     showPwd() {
       if (this.passwordType === 'password') {
@@ -131,12 +147,6 @@ export default {
       //   })
       // }
     }
-  },
-  created() {
-    // window.addEventListener('hashchange', this.afterQRScan)
-  },
-  destroyed() {
-    // window.removeEventListener('hashchange', this.afterQRScan)
   }
 }
 </script>
@@ -144,7 +154,7 @@ export default {
 <style rel="stylesheet/scss" lang="scss">
   /* 修复input 背景不协调 和光标变色 */
   /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
- 
+
   $bg:#283443;
   $light_gray:#eee;
   $cursor: #fff;
diff --git a/src/views/login/socialsignin.vue b/src/views/login/socialsignin.vue
index fc782b5c..b1d28a30 100644
--- a/src/views/login/socialsignin.vue
+++ b/src/views/login/socialsignin.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="social-signup-container">
     <div class="sign-btn" @click="wechatHandleClick('wechat')">
-      <span class="wx-svg-container"><svg-icon icon-class="wechat" class="icon"></svg-icon></span> 微信
+      <span class="wx-svg-container"><svg-icon icon-class="wechat" class="icon"/></span> 微信
     </div>
     <div class="sign-btn" @click="tencentHandleClick('tencent')">
-      <span class="qq-svg-container"><svg-icon icon-class="qq" class="icon"></svg-icon></span> QQ
+      <span class="qq-svg-container"><svg-icon icon-class="qq" class="icon"/></span> QQ
     </div>
   </div>
 </template>
@@ -13,7 +13,7 @@
 import openWindow from '@/utils/openWindow'
 
 export default {
-  name: 'social-signin',
+  name: 'SocialSignin',
   methods: {
     wechatHandleClick(thirdpart) {
       this.$store.commit('SET_AUTH_TYPE', thirdpart)
diff --git a/src/views/nested/menu1/index.vue b/src/views/nested/menu1/index.vue
index bdd5fc82..fdba73a4 100644
--- a/src/views/nested/menu1/index.vue
+++ b/src/views/nested/menu1/index.vue
@@ -1,6 +1,6 @@
 <template >
   <div style="padding:30px;">
-    <el-alert title="menu 1" :closable="false">
+    <el-alert :closable="false" title="menu 1">
       <router-view />
     </el-alert>
   </div>
diff --git a/src/views/nested/menu1/menu1-1/index.vue b/src/views/nested/menu1/menu1-1/index.vue
index 44da904c..824b2cb6 100644
--- a/src/views/nested/menu1/menu1-1/index.vue
+++ b/src/views/nested/menu1/menu1-1/index.vue
@@ -1,6 +1,6 @@
 <template >
   <div style="padding:30px;">
-    <el-alert title="menu 1-1" type="success" :closable="false">
+    <el-alert :closable="false" title="menu 1-1" type="success">
       <router-view />
     </el-alert>
   </div>
diff --git a/src/views/nested/menu1/menu1-2/index.vue b/src/views/nested/menu1/menu1-2/index.vue
index 19ba25d0..0c86276e 100644
--- a/src/views/nested/menu1/menu1-2/index.vue
+++ b/src/views/nested/menu1/menu1-2/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="padding:30px;">
-    <el-alert title="menu 1-2" type="success" :closable="false">
+    <el-alert :closable="false" title="menu 1-2" type="success">
       <router-view />
     </el-alert>
   </div>
diff --git a/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue b/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
index ac82b31c..f87d88f4 100644
--- a/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
+++ b/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
@@ -1,5 +1,5 @@
 <template functional>
   <div style="padding:30px;">
-    <el-alert title="menu 1-2-1" type="warning" :closable="false" />
+    <el-alert :closable="false" title="menu 1-2-1" type="warning" />
   </div>
 </template>
diff --git a/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue b/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
index e976c730..d88789f2 100644
--- a/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
+++ b/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
@@ -1,5 +1,5 @@
 <template functional>
   <div style="padding:30px;">
-    <el-alert title="menu 1-2-2" type="warning" :closable="false" />
+    <el-alert :closable="false" title="menu 1-2-2" type="warning" />
   </div>
 </template>
diff --git a/src/views/nested/menu1/menu1-3/index.vue b/src/views/nested/menu1/menu1-3/index.vue
index d125da8a..f7cd0738 100644
--- a/src/views/nested/menu1/menu1-3/index.vue
+++ b/src/views/nested/menu1/menu1-3/index.vue
@@ -1,5 +1,5 @@
 <template functional>
   <div style="padding:30px;">
-    <el-alert title="menu 1-3" type="success" :closable="false" />
+    <el-alert :closable="false" title="menu 1-3" type="success" />
   </div>
 </template>
diff --git a/src/views/nested/menu2/index.vue b/src/views/nested/menu2/index.vue
index 6d54e47e..19dd48f0 100644
--- a/src/views/nested/menu2/index.vue
+++ b/src/views/nested/menu2/index.vue
@@ -1,5 +1,5 @@
 <template>
   <div style="padding:30px;">
-    <el-alert title="menu 2" :closable="false" />
+    <el-alert :closable="false" title="menu 2" />
   </div>
 </template>
diff --git a/src/views/permission/components/SwitchRoles.vue b/src/views/permission/components/SwitchRoles.vue
index e898939b..6e5f84e5 100644
--- a/src/views/permission/components/SwitchRoles.vue
+++ b/src/views/permission/components/SwitchRoles.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div style="margin-bottom:15px;">{{$t('permission.roles')}}： {{roles}}</div>
-    {{$t('permission.switchRoles')}}：
+    <div style="margin-bottom:15px;">{{ $t('permission.roles') }}： {{ roles }}</div>
+    {{ $t('permission.switchRoles') }}：
     <el-radio-group v-model="switchRoles">
-      <el-radio-button label="editor"></el-radio-button>
-      <el-radio-button label="admin"></el-radio-button>
+      <el-radio-button label="editor"/>
+      <el-radio-button label="admin"/>
     </el-radio-group>
   </div>
 </template>
diff --git a/src/views/permission/directive.vue b/src/views/permission/directive.vue
index c303e886..2817f1c5 100644
--- a/src/views/permission/directive.vue
+++ b/src/views/permission/directive.vue
@@ -17,7 +17,7 @@
       </span>
     </div>
 
-    <div style="margin-top:30px;" :key="'checkPermission'+key">
+    <div :key="'checkPermission'+key" style="margin-top:30px;">
       <code>In some cases it is not suitable to use v-permission, such as element Tab component  which can only be achieved by manually setting the v-if.
         <br> e.g.
       </code>
@@ -36,7 +36,7 @@ import checkPermission from '@/utils/permission' // 权限判断函数
 import SwitchRoles from './components/SwitchRoles'
 
 export default{
-  name: 'directivePermission',
+  name: 'DirectivePermission',
   components: { SwitchRoles },
   directives: { permission },
   data() {
diff --git a/src/views/permission/page.vue b/src/views/permission/page.vue
index b36ee083..3f8a50e8 100644
--- a/src/views/permission/page.vue
+++ b/src/views/permission/page.vue
@@ -8,7 +8,7 @@
 import SwitchRoles from './components/SwitchRoles'
 
 export default{
-  name: 'pagePermission',
+  name: 'PagePermission',
   components: { SwitchRoles },
   methods: {
     handleRolesChange() {
diff --git a/src/views/qiniu/upload.vue b/src/views/qiniu/upload.vue
index 5f05789b..9cb5eb09 100644
--- a/src/views/qiniu/upload.vue
+++ b/src/views/qiniu/upload.vue
@@ -1,11 +1,10 @@
 <template>
-  <el-upload action="https://upload.qbox.me" :data="dataObj" drag :multiple="true" :before-upload="beforeUpload">
-    <i class="el-icon-upload"></i>
+  <el-upload :data="dataObj" :multiple="true" :before-upload="beforeUpload" action="https://upload.qbox.me" drag>
+    <i class="el-icon-upload"/>
     <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
   </el-upload>
 </template>
 
-
 <script>
 import { getToken } from '@/api/qiniu'
 // 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
diff --git a/src/views/svg-icons/index.vue b/src/views/svg-icons/index.vue
index d371cc9a..e2dc8e18 100644
--- a/src/views/svg-icons/index.vue
+++ b/src/views/svg-icons/index.vue
@@ -8,11 +8,11 @@
       <div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
         <el-tooltip placement="top">
           <div slot="content">
-            {{generateIconCode(item)}}
+            {{ generateIconCode(item) }}
           </div>
           <div class="icon-item">
-            <svg-icon class-name="disabled" :icon-class="item" />
-            <span>{{item}}</span>
+            <svg-icon :icon-class="item" class-name="disabled" />
+            <span>{{ item }}</span>
           </div>
         </el-tooltip>
       </div>
@@ -25,7 +25,7 @@ import icons from './generateIconsView'
 import clipboard from '@/utils/clipboard'
 
 export default {
-  name: 'icons',
+  name: 'Icons',
   data() {
     return {
       iconsMap: []
diff --git a/src/views/tab/components/tabPane.vue b/src/views/tab/components/tabPane.vue
index 5d11d33b..e9ac20ac 100644
--- a/src/views/tab/components/tabPane.vue
+++ b/src/views/tab/components/tabPane.vue
@@ -1,47 +1,51 @@
 <template>
   <el-table :data="list" border fit highlight-current-row style="width: 100%">
 
-    <el-table-column align="center" label="ID" width="65"  v-loading="loading"
-    element-loading-text="请给我点时间！">
+    <el-table-column
+      v-loading="loading"
+      align="center"
+      label="ID"
+      width="65"
+      element-loading-text="请给我点时间！">
       <template slot-scope="scope">
-        <span>{{scope.row.id}}</span>
+        <span>{{ scope.row.id }}</span>
       </template>
     </el-table-column>
 
     <el-table-column width="180px" align="center" label="Date">
       <template slot-scope="scope">
-        <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
+        <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
       </template>
     </el-table-column>
 
     <el-table-column min-width="300px" label="Title">
       <template slot-scope="scope">
-        <span>{{scope.row.title}}</span>
-        <el-tag>{{scope.row.type}}</el-tag>
+        <span>{{ scope.row.title }}</span>
+        <el-tag>{{ scope.row.type }}</el-tag>
       </template>
     </el-table-column>
 
     <el-table-column width="110px" align="center" label="Author">
       <template slot-scope="scope">
-        <span>{{scope.row.author}}</span>
+        <span>{{ scope.row.author }}</span>
       </template>
     </el-table-column>
 
     <el-table-column width="120px" label="Importance">
       <template slot-scope="scope">
-        <svg-icon v-for="n in +scope.row.importance" icon-class="star" :key="n"></svg-icon>
+        <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star"/>
       </template>
     </el-table-column>
 
     <el-table-column align="center" label="Readings" width="95">
       <template slot-scope="scope">
-        <span>{{scope.row.pageviews}}</span>
+        <span>{{ scope.row.pageviews }}</span>
       </template>
     </el-table-column>
 
     <el-table-column class-name="status-col" label="Status" width="110">
       <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>
 
@@ -52,6 +56,16 @@
 import { fetchList } from '@/api/article'
 
 export default {
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
   props: {
     type: {
       type: String,
@@ -70,16 +84,6 @@ export default {
       loading: false
     }
   },
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
   created() {
     this.getList()
   },
diff --git a/src/views/tab/index.vue b/src/views/tab/index.vue
index 7f4b9bfa..67936c0c 100644
--- a/src/views/tab/index.vue
+++ b/src/views/tab/index.vue
@@ -1,12 +1,11 @@
 <template>
   <div class="tab-container">
-    <el-tag>mounted times ：{{createdTimes}}</el-tag>
-    <el-alert style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" :closable="false">
-    </el-alert>
-    <el-tabs style='margin-top:15px;' v-model="activeName" type="border-card">
-      <el-tab-pane v-for="item in tabMapOptions" :label="item.label" :key='item.key' :name="item.key">
+    <el-tag>mounted times ：{{ createdTimes }}</el-tag>
+    <el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success"/>
+    <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
+      <el-tab-pane v-for="item in tabMapOptions" :label="item.label" :key="item.key" :name="item.key">
         <keep-alive>
-          <tab-pane v-if='activeName==item.key' :type='item.key' @create='showCreatedTimes'></tab-pane>
+          <tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes"/>
         </keep-alive>
       </el-tab-pane>
     </el-tabs>
@@ -17,7 +16,7 @@
 import tabPane from './components/tabPane'
 
 export default {
-  name: 'tab',
+  name: 'Tab',
   components: { tabPane },
   data() {
     return {
diff --git a/src/views/table/complexTable.vue b/src/views/table/complexTable.vue
index 48720057..205fb001 100644
--- a/src/views/table/complexTable.vue
+++ b/src/views/table/complexTable.vue
@@ -1,131 +1,128 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" :placeholder="$t('table.title')" v-model="listQuery.title">
-      </el-input>
-      <el-select clearable style="width: 90px" class="filter-item" v-model="listQuery.importance" :placeholder="$t('table.importance')">
-        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item">
-        </el-option>
+      <el-input :placeholder="$t('table.title')" v-model="listQuery.title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
+      <el-select v-model="listQuery.importance" :placeholder="$t('table.importance')" clearable style="width: 90px" class="filter-item">
+        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item"/>
       </el-select>
-      <el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.type" :placeholder="$t('table.type')">
-        <el-option v-for="item in  calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key">
-        </el-option>
+      <el-select v-model="listQuery.type" :placeholder="$t('table.type')" clearable class="filter-item" style="width: 130px">
+        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key"/>
       </el-select>
-      <el-select @change='handleFilter' style="width: 140px" class="filter-item" v-model="listQuery.sort">
-        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key">
-        </el-option>
+      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
+        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key"/>
       </el-select>
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
-      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">{{$t('table.add')}}</el-button>
-      <el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" @click="handleDownload">{{$t('table.export')}}</el-button>
-      <el-checkbox class="filter-item" style='margin-left:15px;' @change='tableKey=tableKey+1' v-model="showReviewer">{{$t('table.reviewer')}}</el-checkbox>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">{{ $t('table.add') }}</el-button>
+      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">{{ $t('table.export') }}</el-button>
+      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">{{ $t('table.reviewer') }}</el-checkbox>
     </div>
 
-    <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
+    <el-table
+      v-loading="listLoading"
+      :key="tableKey"
+      :data="list"
+      border
+      fit
+      highlight-current-row
       style="width: 100%;min-height:1000px;">
-      <el-table-column align="center" :label="$t('table.id')" width="65">
+      <el-table-column :label="$t('table.id')" align="center" width="65">
         <template slot-scope="scope">
-          <span>{{scope.row.id}}</span>
+          <span>{{ scope.row.id }}</span>
         </template>
       </el-table-column>
-      <el-table-column width="150px" align="center" :label="$t('table.date')">
+      <el-table-column :label="$t('table.date')" width="150px" align="center">
         <template slot-scope="scope">
-          <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
+          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column min-width="150px" :label="$t('table.title')">
+      <el-table-column :label="$t('table.title')" min-width="150px">
         <template slot-scope="scope">
-          <span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.title}}</span>
-          <el-tag>{{scope.row.type | typeFilter}}</el-tag>
+          <span class="link-type" @click="handleUpdate(scope.row)">{{ scope.row.title }}</span>
+          <el-tag>{{ scope.row.type | typeFilter }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column width="110px" align="center" :label="$t('table.author')">
+      <el-table-column :label="$t('table.author')" width="110px" align="center">
         <template slot-scope="scope">
-          <span>{{scope.row.author}}</span>
+          <span>{{ scope.row.author }}</span>
         </template>
       </el-table-column>
-      <el-table-column width="110px" v-if='showReviewer' align="center" :label="$t('table.reviewer')">
+      <el-table-column v-if="showReviewer" :label="$t('table.reviewer')" width="110px" align="center">
         <template slot-scope="scope">
-          <span style='color:red;'>{{scope.row.reviewer}}</span>
+          <span style="color:red;">{{ scope.row.reviewer }}</span>
         </template>
       </el-table-column>
-      <el-table-column width="80px" :label="$t('table.importance')">
+      <el-table-column :label="$t('table.importance')" width="80px">
         <template slot-scope="scope">
-          <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
+          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon"/>
         </template>
       </el-table-column>
-      <el-table-column align="center" :label="$t('table.readings')" width="95">
+      <el-table-column :label="$t('table.readings')" align="center" width="95">
         <template slot-scope="scope">
-          <span v-if="scope.row.pageviews" class="link-type" @click='handleFetchPv(scope.row.pageviews)'>{{scope.row.pageviews}}</span>
+          <span v-if="scope.row.pageviews" class="link-type" @click="handleFetchPv(scope.row.pageviews)">{{ scope.row.pageviews }}</span>
           <span v-else>0</span>
         </template>
       </el-table-column>
-      <el-table-column class-name="status-col" :label="$t('table.status')" width="100">
+      <el-table-column :label="$t('table.status')" class-name="status-col" width="100">
         <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-column align="center" :label="$t('table.actions')" width="230" class-name="small-padding fixed-width">
+      <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{$t('table.edit')}}</el-button>
-          <el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">{{$t('table.publish')}}
+          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
+          <el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">{{ $t('table.publish') }}
           </el-button>
-          <el-button v-if="scope.row.status!='draft'" size="mini" @click="handleModifyStatus(scope.row,'draft')">{{$t('table.draft')}}
+          <el-button v-if="scope.row.status!='draft'" size="mini" @click="handleModifyStatus(scope.row,'draft')">{{ $t('table.draft') }}
           </el-button>
-          <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">{{$t('table.delete')}}
+          <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">{{ $t('table.delete') }}
           </el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+      <el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
     </div>
 
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
-      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
+      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
         <el-form-item :label="$t('table.type')" prop="type">
-          <el-select class="filter-item" v-model="temp.type" placeholder="Please select">
-            <el-option v-for="item in  calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key">
-            </el-option>
+          <el-select v-model="temp.type" class="filter-item" placeholder="Please select">
+            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
           </el-select>
         </el-form-item>
         <el-form-item :label="$t('table.date')" prop="timestamp">
-          <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date">
-          </el-date-picker>
+          <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date"/>
         </el-form-item>
         <el-form-item :label="$t('table.title')" prop="title">
-          <el-input v-model="temp.title"></el-input>
+          <el-input v-model="temp.title"/>
         </el-form-item>
         <el-form-item :label="$t('table.status')">
-          <el-select class="filter-item" v-model="temp.status" placeholder="Please select">
-            <el-option v-for="item in  statusOptions" :key="item" :label="item" :value="item">
-            </el-option>
+          <el-select v-model="temp.status" class="filter-item" placeholder="Please select">
+            <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item"/>
           </el-select>
         </el-form-item>
         <el-form-item :label="$t('table.importance')">
-          <el-rate style="margin-top:8px;" v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max='3'></el-rate>
+          <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;"/>
         </el-form-item>
         <el-form-item :label="$t('table.remark')">
-          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="Please input" v-model="temp.remark">
-          </el-input>
+          <el-input :autosize="{ minRows: 2, maxRows: 4}" v-model="temp.remark" type="textarea" placeholder="Please input"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
-        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
-        <el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
+        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
+        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{ $t('table.confirm') }}</el-button>
+        <el-button v-else type="primary" @click="updateData">{{ $t('table.confirm') }}</el-button>
       </div>
     </el-dialog>
 
-    <el-dialog title="Reading statistics" :visible.sync="dialogPvVisible">
+    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
       <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
-        <el-table-column prop="key" label="Channel"> </el-table-column>
-        <el-table-column prop="pv" label="Pv"> </el-table-column>
+        <el-table-column prop="key" label="Channel"/>
+        <el-table-column prop="pv" label="Pv"/>
       </el-table>
       <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="dialogPvVisible = false">{{$t('table.confirm')}}</el-button>
+        <el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
       </span>
     </el-dialog>
 
@@ -151,10 +148,23 @@ const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
 }, {})
 
 export default {
-  name: 'complexTable',
+  name: 'ComplexTable',
   directives: {
     waves
   },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    },
+    typeFilter(type) {
+      return calendarTypeKeyValue[type]
+    }
+  },
   data() {
     return {
       tableKey: 0,
@@ -199,19 +209,6 @@ export default {
       downloadLoading: false
     }
   },
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    },
-    typeFilter(type) {
-      return calendarTypeKeyValue[type]
-    }
-  },
   created() {
     this.getList()
   },
diff --git a/src/views/table/dragTable.vue b/src/views/table/dragTable.vue
index b52c7b11..8f52c5de 100644
--- a/src/views/table/dragTable.vue
+++ b/src/views/table/dragTable.vue
@@ -1,60 +1,60 @@
 <template>
   <div class="app-container">
     <!-- Note that row-key is necessary to get a correct row order. -->
-    <el-table :data="list" row-key="id"  v-loading="listLoading" border fit highlight-current-row style="width: 100%">
+    <el-table v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
 
       <el-table-column align="center" label="ID" width="65">
         <template slot-scope="scope">
-          <span>{{scope.row.id}}</span>
+          <span>{{ scope.row.id }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="180px" align="center" label="Date">
         <template slot-scope="scope">
-          <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
+          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
 
       <el-table-column min-width="300px" label="Title">
         <template slot-scope="scope">
-          <span>{{scope.row.title}}</span>
+          <span>{{ scope.row.title }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="110px" align="center" label="Author">
         <template slot-scope="scope">
-          <span>{{scope.row.author}}</span>
+          <span>{{ scope.row.author }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="100px" label="Importance">
         <template slot-scope="scope">
-          <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="icon-star" :key="n"></svg-icon>
+          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="icon-star"/>
         </template>
       </el-table-column>
 
       <el-table-column align="center" label="Readings" width="95">
         <template slot-scope="scope">
-          <span>{{scope.row.pageviews}}</span>
+          <span>{{ scope.row.pageviews }}</span>
         </template>
       </el-table-column>
 
       <el-table-column class-name="status-col" label="Status" width="110">
         <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-column align="center" label="Drag" width="80">
         <template slot-scope="scope">
-          <svg-icon class='drag-handler' icon-class="drag"></svg-icon>
+          <svg-icon class="drag-handler" icon-class="drag"/>
         </template>
       </el-table-column>
 
     </el-table>
     <!-- $t is vue-i18n global function to translate lang (lang in @/lang)  -->
-    <div class='show-d'>{{$t('table.dragTips1')}} : &nbsp; {{ oldList}}</div>
-    <div class='show-d'>{{$t('table.dragTips2')}} : {{newList}}</div>
+    <div class="show-d">{{ $t('table.dragTips1') }} : &nbsp; {{ oldList }}</div>
+    <div class="show-d">{{ $t('table.dragTips2') }} : {{ newList }}</div>
 
   </div>
 </template>
@@ -64,7 +64,17 @@ import { fetchList } from '@/api/article'
 import Sortable from 'sortablejs'
 
 export default {
-  name: 'dragTable',
+  name: 'DragTable',
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
   data() {
     return {
       list: null,
@@ -79,16 +89,6 @@ export default {
       newList: []
     }
   },
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
   created() {
     this.getList()
   },
diff --git a/src/views/table/dynamicTable/fixedThead.vue b/src/views/table/dynamicTable/fixedThead.vue
index 9f4cfc5f..30dcee00 100644
--- a/src/views/table/dynamicTable/fixedThead.vue
+++ b/src/views/table/dynamicTable/fixedThead.vue
@@ -9,11 +9,11 @@
       </el-checkbox-group>
     </div>
 
-    <el-table :data="tableData" :key='key' border fit highlight-current-row style="width: 100%">
-      <el-table-column prop="name" label="fruitName" width="180"></el-table-column>
-      <el-table-column :key='fruit' v-for='fruit in formThead' :label="fruit">
+    <el-table :data="tableData" :key="key" border fit highlight-current-row style="width: 100%">
+      <el-table-column prop="name" label="fruitName" width="180"/>
+      <el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
         <template slot-scope="scope">
-          {{scope.row[fruit]}}
+          {{ scope.row[fruit] }}
         </template>
       </el-table-column>
     </el-table>
diff --git a/src/views/table/dynamicTable/index.vue b/src/views/table/dynamicTable/index.vue
index 51f0da18..3c16bc46 100644
--- a/src/views/table/dynamicTable/index.vue
+++ b/src/views/table/dynamicTable/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="app-container">
-    <div style='margin:0 0 5px 20px'>{{$t('table.dynamicTips1')}}</div>
-    <fixed-thead></fixed-thead>
+    <div style="margin:0 0 5px 20px">{{ $t('table.dynamicTips1') }}</div>
+    <fixed-thead/>
 
-    <div style='margin:30px 0 5px 20px'>{{$t('table.dynamicTips2')}}</div>
-    <unfixed-thead></unfixed-thead>
+    <div style="margin:30px 0 5px 20px">{{ $t('table.dynamicTips2') }}</div>
+    <unfixed-thead/>
   </div>
 </template>
 
@@ -13,7 +13,7 @@ import fixedThead from './fixedThead'
 import unfixedThead from './unfixedThead'
 
 export default {
-  name: 'dynamicTable',
+  name: 'DynamicTable',
   components: { fixedThead, unfixedThead }
 }
 </script>
diff --git a/src/views/table/dynamicTable/unfixedThead.vue b/src/views/table/dynamicTable/unfixedThead.vue
index fab8e5b6..caa97506 100644
--- a/src/views/table/dynamicTable/unfixedThead.vue
+++ b/src/views/table/dynamicTable/unfixedThead.vue
@@ -10,11 +10,10 @@
     </div>
 
     <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
-      <el-table-column prop="name" label="fruitName" width="180">
-      </el-table-column>
-      <el-table-column :key='fruit' v-for='fruit in formThead' :label="fruit">
+      <el-table-column prop="name" label="fruitName" width="180"/>
+      <el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
         <template slot-scope="scope">
-          {{scope.row[fruit]}}
+          {{ scope.row[fruit] }}
         </template>
       </el-table-column>
     </el-table>
diff --git a/src/views/table/inlineEditTable.vue b/src/views/table/inlineEditTable.vue
index 9e744f55..78800ce5 100644
--- a/src/views/table/inlineEditTable.vue
+++ b/src/views/table/inlineEditTable.vue
@@ -1,43 +1,43 @@
 <template>
   <div class="app-container">
 
-    <el-table :data="list" v-loading="listLoading" border fit highlight-current-row style="width: 100%">
+    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
 
       <el-table-column align="center" label="ID" width="80">
         <template slot-scope="scope">
-          <span>{{scope.row.id}}</span>
+          <span>{{ scope.row.id }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="180px" align="center" label="Date">
         <template slot-scope="scope">
-          <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
+          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="120px" align="center" label="Author">
         <template slot-scope="scope">
-          <span>{{scope.row.author}}</span>
+          <span>{{ scope.row.author }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="100px" label="Importance">
         <template slot-scope="scope">
-          <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
+          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon"/>
         </template>
       </el-table-column>
 
       <el-table-column class-name="status-col" label="Status" width="110">
         <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-column min-width="300px" label="Title">
         <template slot-scope="scope">
           <template v-if="scope.row.edit">
-            <el-input class="edit-input" size="small" v-model="scope.row.title"></el-input>
-            <el-button class='cancel-btn' size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button>
+            <el-input v-model="scope.row.title" class="edit-input" size="small"/>
+            <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button>
           </template>
           <span v-else>{{ scope.row.title }}</span>
         </template>
@@ -45,8 +45,8 @@
 
       <el-table-column align="center" label="Actions" width="120">
         <template slot-scope="scope">
-          <el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">Ok</el-button>
-          <el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">Edit</el-button>
+          <el-button v-if="scope.row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">Ok</el-button>
+          <el-button v-else type="primary" size="small" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit">Edit</el-button>
         </template>
       </el-table-column>
 
@@ -58,17 +58,7 @@
 import { fetchList } from '@/api/article'
 
 export default {
-  name: 'inlineEditTable',
-  data() {
-    return {
-      list: null,
-      listLoading: true,
-      listQuery: {
-        page: 1,
-        limit: 10
-      }
-    }
-  },
+  name: 'InlineEditTable',
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -79,6 +69,16 @@ export default {
       return statusMap[status]
     }
   },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 10
+      }
+    }
+  },
   created() {
     this.getList()
   },
diff --git a/src/views/table/treeTable/customTreeTable.vue b/src/views/table/treeTable/customTreeTable.vue
index 42e3fa62..2a216171 100644
--- a/src/views/table/treeTable/customTreeTable.vue
+++ b/src/views/table/treeTable/customTreeTable.vue
@@ -5,21 +5,23 @@
       <a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
     </el-tag>
 
-    <tree-table :data="data" :evalFunc="func" :evalArgs="args" :expandAll="expandAll" border>
+    <tree-table :data="data" :eval-func="func" :eval-args="args" :expand-all="expandAll" border>
       <el-table-column label="事件">
         <template slot-scope="scope">
-          <span style="color:sandybrown">{{scope.row.event}}</span>
-          <el-tag>{{scope.row.timeLine+'ms'}}</el-tag>
+          <span style="color:sandybrown">{{ scope.row.event }}</span>
+          <el-tag>{{ scope.row.timeLine+'ms' }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="时间线">
         <template slot-scope="scope">
-          <el-tooltip effect="dark" :content="scope.row.timeLine+'ms'" placement="left">
+          <el-tooltip :content="scope.row.timeLine+'ms'" effect="dark" placement="left">
             <div class="processContainer">
-              <div class="process" :style="{ width:scope.row._width * 500+'px',
-              background:scope.row._width>0.5?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)',
-              marginLeft:scope.row._marginLeft * 500+'px' }">
-                <span style="display:inline-block"></span>
+              <div
+                :style="{ width:scope.row._width * 500+'px',
+                          background:scope.row._width>0.5?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)',
+                          marginLeft:scope.row._marginLeft * 500+'px' }"
+                class="process">
+                <span style="display:inline-block"/>
               </div>
             </div>
           </el-tooltip>
@@ -43,7 +45,7 @@ import treeTable from '@/components/TreeTable'
 import treeToArray from './customEval'
 
 export default {
-  name: 'customTreeTableDemo',
+  name: 'CustomTreeTableDemo',
   components: { treeTable },
   data() {
     return {
diff --git a/src/views/table/treeTable/treeTable.vue b/src/views/table/treeTable/treeTable.vue
index df236a82..d2ecf14d 100644
--- a/src/views/table/treeTable/treeTable.vue
+++ b/src/views/table/treeTable/treeTable.vue
@@ -5,7 +5,7 @@
       <a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
     </el-tag>
 
-    <tree-table :data="data" :columns="columns" border></tree-table>
+    <tree-table :data="data" :columns="columns" border/>
 
   </div>
 </template>
@@ -18,7 +18,7 @@
 import treeTable from '@/components/TreeTable'
 
 export default {
-  name: 'treeTableDemo',
+  name: 'TreeTableDemo',
   components: { treeTable },
   data() {
     return {
diff --git a/src/views/theme/index.vue b/src/views/theme/index.vue
index d9830b82..f78825b7 100644
--- a/src/views/theme/index.vue
+++ b/src/views/theme/index.vue
@@ -2,14 +2,14 @@
   <div class="app-container">
     <el-card class="box-card">
       <div slot="header">
-        <a class='link-type link-title' target="_blank" href='https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme.html'>
-        {{$t('theme.documentation')}}
+        <a class="link-type link-title" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme.html">
+          {{ $t('theme.documentation') }}
         </a>
       </div>
       <div class="box-item">
-        <span class="field-label">{{$t('theme.change')}} : </span>
-        <el-switch v-model="theme"></el-switch>
-        <code style="margin-top:15px;">{{$t('theme.tips')}}</code>
+        <span class="field-label">{{ $t('theme.change') }} : </span>
+        <el-switch v-model="theme"/>
+        <code style="margin-top:15px;">{{ $t('theme.tips') }}</code>
       </div>
     </el-card>
 
@@ -22,19 +22,19 @@
     </div>
 
     <div class="block">
-      <el-button type="primary" icon="el-icon-edit"></el-button>
-      <el-button type="primary" icon="el-icon-share"></el-button>
-      <el-button type="primary" icon="el-icon-delete"></el-button>
+      <el-button type="primary" icon="el-icon-edit"/>
+      <el-button type="primary" icon="el-icon-share"/>
+      <el-button type="primary" icon="el-icon-delete"/>
       <el-button type="primary" icon="el-icon-search">Search</el-button>
       <el-button type="primary">
         Upload
-        <i class="el-icon-upload el-icon-right"></i>
+        <i class="el-icon-upload el-icon-right"/>
       </el-button>
     </div>
 
     <div class="block">
-      <el-tag class='tag-item' v-for="tag in tags" :type="tag.type" :key='tag.type'>
-        {{tag.name}}
+      <el-tag v-for="tag in tags" :type="tag.type" :key="tag.type" class="tag-item">
+        {{ tag.name }}
       </el-tag>
     </div>
 
@@ -47,7 +47,7 @@
     </div>
 
     <div class="block">
-      <el-slider v-model="slideValue"></el-slider>
+      <el-slider v-model="slideValue"/>
     </div>
 
   </div>
@@ -58,7 +58,7 @@ import { toggleClass } from '@/utils'
 import '@/assets/custom-theme/index.css' // the theme changed version element-ui css
 
 export default {
-  name: 'theme',
+  name: 'Theme',
   data() {
     return {
       theme: false,
diff --git a/src/views/zip/index.vue b/src/views/zip/index.vue
index c20c31d0..42f0efe6 100644
--- a/src/views/zip/index.vue
+++ b/src/views/zip/index.vue
@@ -1,33 +1,33 @@
 <template>
   <div class="app-container">
     <!-- $t is vue-i18n global function to translate lang -->
-    <el-input style='width:300px;' :placeholder="$t('zip.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
-    <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('zip.export')}} zip</el-button>
-    <el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
-      <el-table-column align="center" label='ID' width="95">
+    <el-input :placeholder="$t('zip.placeholder')" v-model="filename" style="width:300px;" prefix-icon="el-icon-document"/>
+    <el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="document" @click="handleDownload">{{ $t('zip.export') }} zip</el-button>
+    <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
+      <el-table-column align="center" label="ID" width="95">
         <template slot-scope="scope">
-          {{scope.$index}}
+          {{ scope.$index }}
         </template>
       </el-table-column>
       <el-table-column label="Title">
         <template slot-scope="scope">
-          {{scope.row.title}}
+          {{ scope.row.title }}
         </template>
       </el-table-column>
       <el-table-column label="Author" width="95" align="center">
         <template slot-scope="scope">
-          <el-tag>{{scope.row.author}}</el-tag>
+          <el-tag>{{ scope.row.author }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="Readings" width="115" align="center">
         <template slot-scope="scope">
-          {{scope.row.pageviews}}
+          {{ scope.row.pageviews }}
         </template>
       </el-table-column>
       <el-table-column align="center" label="Date" width="220">
         <template slot-scope="scope">
-          <i class="el-icon-time"></i>
-          <span>{{scope.row.display_time}}</span>
+          <i class="el-icon-time"/>
+          <span>{{ scope.row.display_time }}</span>
         </template>
       </el-table-column>
     </el-table>
@@ -38,7 +38,7 @@
 import { fetchList } from '@/api/article'
 
 export default {
-  name: 'exportZip',
+  name: 'ExportZip',
   data() {
     return {
       list: null,

From 4035bf58f2458a2023f6dcb110fd043f751bed34 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Mon, 20 Aug 2018 10:13:12 +0800
Subject: [PATCH 17/19] chore: set default assetsPublicPath to '/'

---
 config/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/index.js b/config/index.js
index 3033f9be..599e4a63 100644
--- a/config/index.js
+++ b/config/index.js
@@ -60,7 +60,7 @@ 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

From b2570f891d31326396673ea860fc3aeedaf755f0 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Mon, 20 Aug 2018 10:20:43 +0800
Subject: [PATCH 18/19] docs

---
 README.md                         | 4 ++--
 README.zh-CN.md                   | 2 ++
 src/views/documentation/index.vue | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index d19bb898..27234ec7 100644
--- 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">
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 4438bda8..4d136c84 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -38,6 +38,8 @@
 
 - [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
 
+- [国内访问文档](https://panjiachen.gitee.io/vue-element-admin-site/zh/) 方便没翻墙的用户查看文档
+
 **本项目的定位是后台集成方案，不适合当基础模板来开发。**
 
 - 模板建议使用: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
diff --git a/src/views/documentation/index.vue b/src/views/documentation/index.vue
index 53de7b55..d40c2b67 100644
--- a/src/views/documentation/index.vue
+++ b/src/views/documentation/index.vue
@@ -2,6 +2,7 @@
   <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>
+    <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>

From d5a8fb1e7161f80da573c149a811407ec9dba3e8 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Mon, 20 Aug 2018 10:21:34 +0800
Subject: [PATCH 19/19] [release] 3.8.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 89e6ec12..48dfa91f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-element-admin",
-  "version": "3.8.0",
+  "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",