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/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/package.json b/package.json
index 5d59de81..8d9789fa 100644
--- a/package.json
+++ b/package.json
@@ -83,10 +83,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 dc80b23f..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,
@@ -133,11 +133,8 @@ 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: '自行封装 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: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
+        { 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 c0ca2657..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 {
@@ -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' },
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 95842613..77d90c26 100644
--- a/src/views/example/components/Warning.vue
+++ b/src/views/example/components/Warning.vue
@@ -1,8 +1,9 @@
 <template>
   <p class="warn-content">
-    创建和编辑页面是不能被keep-alive 缓存的，因为keep-alive 的include 目前不支持根据路由来缓存，所以目前都是基于component name 来缓存的，如果你想要实现缓存的效果，可以使用localstorage 等游览器缓存方案。或者不要使用keep-alive
+    创建和编辑页面是不能被keep-alive 缓存的，因为keep-alive 的include 目前不支持根据路由来缓存，所以目前都是基于component name 来缓存的，如果你想要实现缓存的效果，可以使用localstorage 等浏览器缓存方案。或者不要使用keep-alive
     的include，直接缓存所有页面。详情见
-    <a href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
+    <a
+      href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
       target="_blank">文档</a>
   </p>
 </template>
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,