diff --git a/.eslintrc.js b/.eslintrc.js
index 6f55c5a1..1266f38d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -21,6 +21,8 @@ module.exports = {
         "allowFirstLine": false
       }
     }],
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/multiline-html-element-content-newline":"off",
     "vue/name-property-casing": ["error", "PascalCase"],
     'accessor-pairs': 2,
     'arrow-spacing': [2, {
diff --git a/package.json b/package.json
index aef30525..d2748c5a 100644
--- a/package.json
+++ b/package.json
@@ -80,10 +80,10 @@
     "copy-webpack-plugin": "4.5.2",
     "cross-env": "5.2.0",
     "css-loader": "1.0.0",
-    "eslint": "4.19.1",
+    "eslint": "5.15.2",
     "eslint-friendly-formatter": "4.0.1",
-    "eslint-loader": "2.0.0",
-    "eslint-plugin-vue": "4.7.1",
+    "eslint-loader": "2.1.2",
+    "eslint-plugin-vue": "5.2.2",
     "file-loader": "1.1.11",
     "friendly-errors-webpack-plugin": "1.7.0",
     "hash-sum": "1.0.2",
diff --git a/src/App.vue b/src/App.vue
index ab408f3e..ec9032c1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,11 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <script>
-export default{
+export default {
   name: 'App'
 }
 </script>
diff --git a/src/components/BackToTop/index.vue b/src/components/BackToTop/index.vue
index 39977178..0c1ff792 100644
--- a/src/components/BackToTop/index.vue
+++ b/src/components/BackToTop/index.vue
@@ -4,7 +4,7 @@
       <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 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 5f4d054f..9e78b1ec 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -2,8 +2,9 @@
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{
-        generateTitle(item.meta.title) }}</span>
+        <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">
+          {{ generateTitle(item.meta.title) }}
+        </span>
         <a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a>
       </el-breadcrumb-item>
     </transition-group>
diff --git a/src/components/Charts/keyboard.vue b/src/components/Charts/keyboard.vue
index 857b26ae..3f061bd0 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 :id="id" :class="className" :style="{height:height,width:width}" />
 </template>
 
 <script>
diff --git a/src/components/Charts/lineMarker.vue b/src/components/Charts/lineMarker.vue
index 5d41b022..3dd74369 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 :id="id" :class="className" :style="{height:height,width:width}" />
 </template>
 
 <script>
diff --git a/src/components/Charts/mixChart.vue b/src/components/Charts/mixChart.vue
index a8e271ca..c416542e 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 :id="id" :class="className" :style="{height:height,width:width}" />
 </template>
 
 <script>
diff --git a/src/components/DndList/index.vue b/src/components/DndList/index.vue
index 7587daa7..0da113eb 100644
--- a/src/components/DndList/index.vue
+++ b/src/components/DndList/index.vue
@@ -7,7 +7,7 @@
           <div class="list-complete-item-handle">{{ element.id }}[{{ 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 style="color:#ff4949" class="el-icon-delete" />
             </span>
           </div>
         </div>
diff --git a/src/components/DragSelect/index.vue b/src/components/DragSelect/index.vue
index 513be006..4a2e6300 100644
--- a/src/components/DragSelect/index.vue
+++ b/src/components/DragSelect/index.vue
@@ -1,6 +1,6 @@
 <template>
   <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners">
-    <slot/>
+    <slot />
   </el-select>
 </template>
 
diff --git a/src/components/Dropzone/index.vue b/src/components/Dropzone/index.vue
index 15d811d9..081f0067 100644
--- a/src/components/Dropzone/index.vue
+++ b/src/components/Dropzone/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :ref="id" :action="url" :id="id" class="dropzone">
+  <div :id="id" :ref="id" :action="url" class="dropzone">
     <input type="file" name="file">
   </div>
 </template>
diff --git a/src/components/GithubCorner/index.vue b/src/components/GithubCorner/index.vue
index b5da8874..970faaf1 100644
--- a/src/components/GithubCorner/index.vue
+++ b/src/components/GithubCorner/index.vue
@@ -5,17 +5,20 @@
       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"/>
+      aria-hidden="true"
+    >
+      <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"/>
+        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"/>
+        class="octo-body"
+      />
     </svg>
   </a>
 </template>
diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue
index 678a218c..2227a93e 100644
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@@ -10,8 +10,9 @@
       remote
       placeholder="Search"
       class="header-search-select"
-      @change="change">
-      <el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')"/>
+      @change="change"
+    >
+      <el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')" />
     </el-select>
   </div>
 </template>
diff --git a/src/components/ImageCropper/index.vue b/src/components/ImageCropper/index.vue
index 04b1ede9..c30c5b18 100644
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
@@ -2,22 +2,22 @@
   <div v-show="value" class="vue-image-crop-upload">
     <div class="vicp-wrap">
       <div class="vicp-close" @click="off">
-        <i class="vicp-icon4"/>
+        <i class="vicp-icon4" />
       </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 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 v-show="hasError" class="vicp-error">
-          <i class="vicp-icon2"/> {{ errorMsg }}
+          <i class="vicp-icon2" /> {{ errorMsg }}
         </div>
         <div class="vicp-operate">
           <a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
@@ -48,15 +48,16 @@
                 @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"/>
+                @mouseout="createImg"
+              >
+              <div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-1" />
+              <div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-2" />
             </div>
 
             <div class="vicp-range">
               <input :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"/>
+              <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">
@@ -87,13 +88,13 @@
         <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"/>
+            <span v-show="loading === 1" :style="progressStyle" class="vicp-progress" />
           </div>
           <div v-show="hasError" class="vicp-error">
-            <i class="vicp-icon2"/> {{ errorMsg }}
+            <i class="vicp-icon2" /> {{ errorMsg }}
           </div>
           <div v-show="loading === 2" class="vicp-success">
-            <i class="vicp-icon3"/> {{ lang.success }}
+            <i class="vicp-icon3" /> {{ lang.success }}
           </div>
         </div>
         <div class="vicp-operate">
@@ -101,7 +102,7 @@
           <a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
         </div>
       </div>
-      <canvas v-show="false" ref="canvas" :width="width" :height="height"/>
+      <canvas v-show="false" ref="canvas" :width="width" :height="height" />
     </div>
   </div>
 </template>
diff --git a/src/components/JsonEditor/index.vue b/src/components/JsonEditor/index.vue
index d68b8c05..81715f5d 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 ref="textarea" />
   </div>
 </template>
 
diff --git a/src/components/Kanban/index.vue b/src/components/Kanban/index.vue
index dadeb648..059e4186 100644
--- a/src/components/Kanban/index.vue
+++ b/src/components/Kanban/index.vue
@@ -6,7 +6,8 @@
     <draggable
       :list="list"
       :options="options"
-      class="board-column-content">
+      class="board-column-content"
+    >
       <div v-for="element in list" :key="element.id" class="board-item">
         {{ element.name }} {{ element.id }}
       </div>
diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue
index fea7ba71..9130efc7 100644
--- a/src/components/LangSelect/index.vue
+++ b/src/components/LangSelect/index.vue
@@ -4,9 +4,15 @@
       <svg-icon class-name="international-icon" icon-class="language" />
     </div>
     <el-dropdown-menu slot="dropdown">
-      <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-item :disabled="language==='es'" command="es">Español</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-item :disabled="language==='es'" command="es">
+        Español
+      </el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
 </template>
diff --git a/src/components/MDinput/index.vue b/src/components/MDinput/index.vue
index 7ede73db..c774aa0e 100644
--- a/src/components/MDinput/index.vue
+++ b/src/components/MDinput/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div :class="computedClasses" class="material-input__component">
     <div :class="{iconClass:icon}">
-      <i v-if="icon" :class="['el-icon-' + icon]" class="el-input__icon material-input__icon"/>
+      <i v-if="icon" :class="['el-icon-' + icon]" class="el-input__icon material-input__icon" />
       <input
         v-if="type === 'email'"
+        v-model="currentValue"
         :name="name"
         :placeholder="fillPlaceHolder"
-        v-model="currentValue"
         :readonly="readonly"
         :disabled="disabled"
         :autoComplete="autoComplete"
@@ -15,12 +15,13 @@
         class="material-input"
         @focus="handleMdFocus"
         @blur="handleMdBlur"
-        @input="handleModelInput">
+        @input="handleModelInput"
+      >
       <input
         v-if="type === 'url'"
+        v-model="currentValue"
         :name="name"
         :placeholder="fillPlaceHolder"
-        v-model="currentValue"
         :readonly="readonly"
         :disabled="disabled"
         :autoComplete="autoComplete"
@@ -29,12 +30,13 @@
         class="material-input"
         @focus="handleMdFocus"
         @blur="handleMdBlur"
-        @input="handleModelInput">
+        @input="handleModelInput"
+      >
       <input
         v-if="type === 'number'"
+        v-model="currentValue"
         :name="name"
         :placeholder="fillPlaceHolder"
-        v-model="currentValue"
         :step="step"
         :readonly="readonly"
         :disabled="disabled"
@@ -48,12 +50,13 @@
         class="material-input"
         @focus="handleMdFocus"
         @blur="handleMdBlur"
-        @input="handleModelInput">
+        @input="handleModelInput"
+      >
       <input
         v-if="type === 'password'"
+        v-model="currentValue"
         :name="name"
         :placeholder="fillPlaceHolder"
-        v-model="currentValue"
         :readonly="readonly"
         :disabled="disabled"
         :autoComplete="autoComplete"
@@ -64,12 +67,13 @@
         class="material-input"
         @focus="handleMdFocus"
         @blur="handleMdBlur"
-        @input="handleModelInput">
+        @input="handleModelInput"
+      >
       <input
         v-if="type === 'tel'"
+        v-model="currentValue"
         :name="name"
         :placeholder="fillPlaceHolder"
-        v-model="currentValue"
         :readonly="readonly"
         :disabled="disabled"
         :autoComplete="autoComplete"
@@ -78,12 +82,13 @@
         class="material-input"
         @focus="handleMdFocus"
         @blur="handleMdBlur"
-        @input="handleModelInput">
+        @input="handleModelInput"
+      >
       <input
         v-if="type === 'text'"
+        v-model="currentValue"
         :name="name"
         :placeholder="fillPlaceHolder"
-        v-model="currentValue"
         :readonly="readonly"
         :disabled="disabled"
         :autoComplete="autoComplete"
@@ -94,10 +99,11 @@
         class="material-input"
         @focus="handleMdFocus"
         @blur="handleMdBlur"
-        @input="handleModelInput">
-      <span class="material-input-bar"/>
+        @input="handleModelInput"
+      >
+      <span class="material-input-bar" />
       <label class="material-label">
-        <slot/>
+        <slot />
       </label>
     </div>
   </div>
diff --git a/src/components/MarkdownEditor/index.vue b/src/components/MarkdownEditor/index.vue
index 4a6d8b0f..9ed7a584 100644
--- a/src/components/MarkdownEditor/index.vue
+++ b/src/components/MarkdownEditor/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :id="id"/>
+  <div :id="id" />
 </template>
 
 <script>
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index 8d104e84..a4962964 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -9,7 +9,8 @@
       :total="total"
       v-bind="$attrs"
       @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"/>
+      @current-change="handleCurrentChange"
+    />
   </div>
 </template>
 
diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue
index ec549f43..de6940ad 100644
--- a/src/components/PanThumb/index.vue
+++ b/src/components/PanThumb/index.vue
@@ -2,7 +2,7 @@
   <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
     <div class="pan-info">
       <div class="pan-info-roles-container">
-        <slot/>
+        <slot />
       </div>
     </div>
     <img :src="image" class="pan-thumb">
diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue
index 6d3cd43a..0fa61706 100644
--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@@ -4,8 +4,9 @@
       <svg-icon class-name="size-icon" icon-class="size" />
     </div>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">{{
-      item.label }}</el-dropdown-item>
+      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
+        {{ item.label }}
+      </el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
 </template>
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index b0b6d4cb..27da76cf 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -1,6 +1,6 @@
 <template>
   <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
-    <use :xlink:href="iconName"/>
+    <use :xlink:href="iconName" />
   </svg>
 </template>
 
diff --git a/src/components/TextHoverEffect/Mallki.vue b/src/components/TextHoverEffect/Mallki.vue
index 4ea29fc2..5d6d16ca 100644
--- a/src/components/TextHoverEffect/Mallki.vue
+++ b/src/components/TextHoverEffect/Mallki.vue
@@ -1,8 +1,8 @@
 <template>
   <a :class="className" class="link--mallki" href="#">
     {{ text }}
-    <span :data-letters="text"/>
-    <span :data-letters="text"/>
+    <span :data-letters="text" />
+    <span :data-letters="text" />
   </a>
 </template>
 
diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
index 52419929..be3a573a 100644
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -2,7 +2,8 @@
   <el-color-picker
     v-model="theme"
     class="theme-picker"
-    popper-class="theme-picker-dropdown"/>
+    popper-class="theme-picker-dropdown"
+  />
 </template>
 
 <script>
diff --git a/src/components/Tinymce/components/editorImage.vue b/src/components/Tinymce/components/editorImage.vue
index bcd82099..ea834652 100644
--- a/src/components/Tinymce/components/editorImage.vue
+++ b/src/components/Tinymce/components/editorImage.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="upload-container">
-    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">上传图片
+    <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
@@ -12,7 +13,8 @@
         :before-upload="beforeUpload"
         class="editor-slide-upload"
         action="https://httpbin.org/post"
-        list-type="picture-card">
+        list-type="picture-card"
+      >
         <el-button size="small" type="primary">点击上传</el-button>
       </el-upload>
       <el-button @click="dialogVisible = false">取 消</el-button>
diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue
index ce0fe6a9..3d6dba2b 100644
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container">
-    <textarea :id="tinymceId" class="tinymce-textarea"/>
+    <textarea :id="tinymceId" class="tinymce-textarea" />
     <div class="editor-custom-btn-container">
-      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"/>
+      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
     </div>
   </div>
 </template>
diff --git a/src/components/TreeTable/index.vue b/src/components/TreeTable/index.vue
index 9ce7a503..92ddc434 100644
--- a/src/components/TreeTable/index.vue
+++ b/src/components/TreeTable/index.vue
@@ -1,18 +1,19 @@
 <template>
-  <el-table :data="tableData" :row-style="showRow" v-bind="$attrs" v-on="$listeners" >
+  <el-table :data="tableData" :row-style="showRow" v-bind="$attrs" v-on="$listeners">
     <slot name="selection" />
     <slot name="pre-column" />
     <el-table-column
       v-for="item in columns"
-      :label="item.label"
       :key="item.key"
+      :label="item.label"
       :width="item.width"
       :align="item.align||'center'"
-      :header-align="item.headerAlign">
+      :header-align="item.headerAlign"
+    >
       <template slot-scope="scope">
         <slot :scope="scope" :name="item.key">
           <template v-if="item.expand">
-            <span :style="{'padding-left':+scope.row._level*indent + 'px'} "/>
+            <span :style="{'padding-left':+scope.row._level*indent + 'px'} " />
             <span v-show="showSperadIcon(scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
               <i v-if="!scope.row._expand" class="el-icon-plus" />
               <i v-else class="el-icon-minus" />
@@ -21,15 +22,17 @@
           <template v-if="item.checkbox">
             <el-checkbox
               v-if="scope.row[defaultChildren]&&scope.row[defaultChildren].length>0"
+              v-model="scope.row._select"
               :style="{'padding-left':+scope.row._level*indent + 'px'} "
               :indeterminate="scope.row._select"
-              v-model="scope.row._select"
-              @change="handleCheckAllChange(scope.row)" />
+              @change="handleCheckAllChange(scope.row)"
+            />
             <el-checkbox
               v-else
-              :style="{'padding-left':+scope.row._level*indent + 'px'} "
               v-model="scope.row._select"
-              @change="handleCheckAllChange(scope.row)" />
+              :style="{'padding-left':+scope.row._level*indent + 'px'} "
+              @change="handleCheckAllChange(scope.row)"
+            />
           </template>
           {{ scope.row[item.key] }}
         </slot>
diff --git a/src/components/TreeTable/readme.md b/src/components/TreeTable/readme.md
new file mode 100644
index 00000000..05326dfa
--- /dev/null
+++ b/src/components/TreeTable/readme.md
@@ -0,0 +1,220 @@
+
+- [Enlgish](#Brief)
+
+# 中文
+
+## 写在前面
+
+此组件仅提供一个创建 `TreeTable` 的解决思路。它基于`element-ui`的 table 组件实现，通过`el-table`的`row-style`方法，在里面判断元素是否需要隐藏或者显示，从而实现`TreeTable`的展开与收起。
+
+并且本组件充分利用 `vue` 插槽的特性来方便用户自定义。
+
+`evel.js` 里面，`addAttrs` 方法会给数据添加几个属性，`treeTotable` 会对数组扁平化。这些操作都不会破坏源数据，只是会新增属性。
+
+## Props 说明
+
+|    Attribute     | Description                        |  Type   | Default  |
+| :--------------: | :--------------------------------- | :-----: | :------: |
+|       data       | 原始展示数据                       |  Array  |    []    |
+|     columns      | 列属性                             |  Array  |    []    |
+| defaultExpandAll | 默认是否全部展开                   | Boolean |  false   |
+| defaultChildren  | 指定子树为节点对象的某个属性值     | String  | children |  |
+|      indent      | 相邻级节点间的水平缩进，单位为像素 | Number  |    50    |
+
+> 任何 `el-table` 的属性都支持，例如`border`、`fit`、`size`或者`@select`、`@cell-click`等方法。详情属性见`el-table`文档。
+
+---
+
+### 代码示例
+
+```html
+<tree-table :data="data" :columns="columns" border>
+```
+
+#### data(**必填**)
+
+```js
+const data = [
+  {
+    name:'1'
+    children: [
+      {
+        name: '1-1'
+      },
+      {
+        name: '1-2'
+      }
+    ]
+  },
+  {
+    name: `2`
+  }
+]
+```
+
+#### columns(**必填**)
+
+- label: 显示在表头的文字
+- key: 对应 data 的 key。treeTable 将显示相应的 value
+- expand: `true` or `false`。若为 true，则在该列显示展开收起图标
+- checkbox: `true` or `false`。若为 true，则在该列显示`checkbox`
+- width: 每列的宽度，为一个数字(可选)。例如`200`
+- align: 对齐方式 `left/center/right`
+- header-align: 表头对齐方式 `left/center/right`
+
+```javascript
+const columns = [
+  {
+    label: 'Checkbox',
+    checkbox: true
+  },
+  {
+    label: '',
+    key: 'id',
+    expand: true
+  },
+  {
+    label: 'Event',
+    key: 'event',
+    width: 200,
+    align: 'left'
+  },
+  {
+    label: 'Scope',
+    key: 'scope'
+  }
+]
+```
+
+> 树表组件将会根据 columns 的 key 属性生成具名插槽，如果你需要对列数据进行自定义，通过插槽即可实现
+
+```html
+<template slot="your key" slot-scope="{scope}">
+  <el-tag>level: {{ scope.row._level }}</el-tag>
+  <el-tag>expand: {{ scope.row._expand }}</el-tag>
+  <el-tag>select: {{ scope.row._select }}</el-tag>
+</template>
+```
+
+## Events
+
+目前提供了几个方法，不过只是`beta`版本，之后很可能会修改。
+
+```js
+this.$refs.TreeTable.addChild(row, data) //添加子元素
+this.$refs.TreeTable.addBrother(row, data) //添加兄弟元素
+this.$refs.TreeTable.delete(row) //删除该元素
+```
+
+## 其他
+
+如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的 api 自行修改 index.vue
+
+# English
+
+## Brief
+
+This component only provides a solution for creating `TreeTable`. It is based on the `element-ui` table component. It uses the `row-style` method of `el-table` to determine whether the element needs to be hidden or displayed.
+
+And this component makes full use of the features of the `vue` slot to make it user-friendly.
+
+In `evel.js`, the `addAttrs` method adds several properties to the data, and `treeTotable` flattens the array. None of these operations will destroy the source data, just add properties.
+
+## Props
+
+|    Attribute     | Description                                                  |  Type   | Default  |
+| :--------------: | :----------------------------------------------------------- | :-----: | :------: |
+|       data       | original display data                                        |  Array  |    []    |
+|     columns      | column attribute                                             |  Array  |    []    |
+| defaultExpandAll | whether to expand all nodes by default                       | Boolean |  false   |
+| defaultChildren  | specify which node object is used as the node's subtree      | String  | children |  |
+|      indent      | horizontal indentation of nodes in adjacent levels in pixels | Number  |    50    |
+
+> Any of the `el-table` properties are supported, such as `border`, `fit`, `size` or `@select`, `@cell-click`. See the ʻel-table` documentation for details.
+
+---
+
+### Example
+
+```html
+<tree-table :data="data" :columns="columns" border>
+```
+
+#### data(**Required**)
+
+```js
+const data = [
+  {
+    name:'1'
+    children: [
+      {
+        name: '1-1'
+      },
+      {
+        name: '1-2'
+      }
+    ]
+  },
+  {
+    name: `2`
+  }
+]
+```
+
+#### columns(**Required**)
+
+- label: text displayed in the header
+- key: data.key will show in column
+- expand: `true` or `false`
+- checkbox: `true` or `false`
+- width: column width 。such as `200`
+- align: alignment `left/center/right`
+- header-align: alignment of the table header `left/center/right`
+
+```javascript
+const columns = [
+  {
+    label: 'Checkbox',
+    checkbox: true
+  },
+  {
+    label: '',
+    key: 'id',
+    expand: true
+  },
+  {
+    label: 'Event',
+    key: 'event',
+    width: 200,
+    align: 'left'
+  },
+  {
+    label: 'Scope',
+    key: 'scope'
+  }
+]
+```
+
+> The tree table component will generate a named slot based on the key property of columns. If you need to customize the column data, you can do it through the slot.
+
+```html
+<template slot="your key" slot-scope="{scope}">
+  <el-tag>level: {{ scope.row._level }}</el-tag>
+  <el-tag>expand: {{ scope.row._expand }}</el-tag>
+  <el-tag>select: {{ scope.row._select }}</el-tag>
+</template>
+```
+
+## Events
+
+Several methods are currently available, but only the `beta` version, which is likely to be modified later.
+
+```js
+this.$refs.TreeTable.addChild(row, data) //Add child elements
+this.$refs.TreeTable.addBrother(row, data) //Add a sibling element
+this.$refs.TreeTable.delete(row) //Delete the element
+```
+
+## Other
+
+If you have other requirements, please refer to the [el-table](http://element-cn.eleme.io/#/en-US/component/table) api to modify the index.vue
diff --git a/src/components/Upload/singleImage.vue b/src/components/Upload/singleImage.vue
index 291e4cf1..0609a79d 100644
--- a/src/components/Upload/singleImage.vue
+++ b/src/components/Upload/singleImage.vue
@@ -7,15 +7,16 @@
       :on-success="handleImageSuccess"
       class="image-uploader"
       drag
-      action="https://httpbin.org/post">
-      <i class="el-icon-upload"/>
+      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"/>
+          <i class="el-icon-delete" @click="rmImage" />
         </div>
       </div>
     </div>
diff --git a/src/components/Upload/singleImage2.vue b/src/components/Upload/singleImage2.vue
index cf4dc0b7..a14d028f 100644
--- a/src/components/Upload/singleImage2.vue
+++ b/src/components/Upload/singleImage2.vue
@@ -7,15 +7,16 @@
       :on-success="handleImageSuccess"
       class="image-uploader"
       drag
-      action="https://httpbin.org/post">
-      <i class="el-icon-upload"/>
+      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 v-show="imageUrl.length>1" class="image-preview-wrapper">
         <img :src="imageUrl">
         <div class="image-preview-action">
-          <i class="el-icon-delete" @click="rmImage"/>
+          <i class="el-icon-delete" @click="rmImage" />
         </div>
       </div>
     </div>
diff --git a/src/components/Upload/singleImage3.vue b/src/components/Upload/singleImage3.vue
index 2cce98da..5eef0d1e 100644
--- a/src/components/Upload/singleImage3.vue
+++ b/src/components/Upload/singleImage3.vue
@@ -7,15 +7,16 @@
       :on-success="handleImageSuccess"
       class="image-uploader"
       drag
-      action="https://httpbin.org/post">
-      <i class="el-icon-upload"/>
+      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 v-show="imageUrl.length>1" class="image-preview-wrapper">
         <img :src="imageUrl">
         <div class="image-preview-action">
-          <i class="el-icon-delete" @click="rmImage"/>
+          <i class="el-icon-delete" @click="rmImage" />
         </div>
       </div>
     </div>
@@ -23,7 +24,7 @@
       <div v-show="imageUrl.length>1" class="image-preview-wrapper">
         <img :src="imageUrl">
         <div class="image-preview-action">
-          <i class="el-icon-delete" @click="rmImage"/>
+          <i class="el-icon-delete" @click="rmImage" />
         </div>
       </div>
     </div>
diff --git a/src/directive/el-dragDialog/drag.js b/src/directive/el-dragDialog/drag.js
index 58e29110..299e9854 100644
--- a/src/directive/el-dragDialog/drag.js
+++ b/src/directive/el-dragDialog/drag.js
@@ -1,4 +1,4 @@
-export default{
+export default {
   bind(el, binding, vnode) {
     const dialogHeaderEl = el.querySelector('.el-dialog__header')
     const dragDom = el.querySelector('.el-dialog')
diff --git a/src/directive/permission/permission.js b/src/directive/permission/permission.js
index 17b85d79..1fc8f136 100644
--- a/src/directive/permission/permission.js
+++ b/src/directive/permission/permission.js
@@ -1,7 +1,7 @@
 
 import store from '@/store'
 
-export default{
+export default {
   inserted(el, binding, vnode) {
     const { value } = binding
     const roles = store.getters && store.getters.roles
diff --git a/src/views/charts/keyboard.vue b/src/views/charts/keyboard.vue
index 3ea21397..3c158fcc 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 height="100%" width="100%" />
   </div>
 </template>
 
diff --git a/src/views/charts/line.vue b/src/views/charts/line.vue
index 2034d4c7..daa181fa 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 height="100%" width="100%" />
   </div>
 </template>
 
diff --git a/src/views/charts/mixChart.vue b/src/views/charts/mixChart.vue
index 7ccc7fa0..d41e655b 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 height="100%" width="100%" />
   </div>
 </template>
 
diff --git a/src/views/clipboard/index.vue b/src/views/clipboard/index.vue
index 607dfb66..54fbf946 100644
--- a/src/views/clipboard/index.vue
+++ b/src/views/clipboard/index.vue
@@ -2,11 +2,11 @@
   <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;max-width:100%;"/>
+        <el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
         <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;max-width:100%;"/>
+        <el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
         <el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="document">copy</el-button>
       </el-tab-pane>
     </el-tabs>
diff --git a/src/views/components-demo/avatarUpload.vue b/src/views/components-demo/avatarUpload.vue
index 144448ce..c40ef4a4 100644
--- a/src/views/components-demo/avatarUpload.vue
+++ b/src/views/components-demo/avatarUpload.vue
@@ -5,20 +5,22 @@
       {{ $t('components.imageUploadTips') }}
     </code>
 
-    <pan-thumb :image="image"/>
+    <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
       v-show="imagecropperShow"
+      :key="imagecropperKey"
       :width="300"
       :height="300"
-      :key="imagecropperKey"
       url="https://httpbin.org/post"
       lang-type="en"
       @close="close"
-      @crop-upload-success="cropSuccess"/>
+      @crop-upload-success="cropSuccess"
+    />
   </div>
 </template>
 
diff --git a/src/views/components-demo/backToTop.vue b/src/views/components-demo/backToTop.vue
index 83a5529b..1404f574 100644
--- a/src/views/components-demo/backToTop.vue
+++ b/src/views/components-demo/backToTop.vue
@@ -116,7 +116,7 @@
     <!--可自定义按钮的样式、show/hide临界点、返回的位置  -->
     <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
     <el-tooltip placement="top" content="tooltip">
-      <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade"/>
+      <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
     </el-tooltip>
   </div>
 </template>
diff --git a/src/views/components-demo/countTo.vue b/src/views/components-demo/countTo.vue
index 7044a5d2..de9339bc 100644
--- a/src/views/components-demo/countTo.vue
+++ b/src/views/components-demo/countTo.vue
@@ -13,36 +13,39 @@
       :prefix="_prefix"
       :suffix="_suffix"
       :autoplay="false"
-      class="example"/>
+      class="example"
+    />
     <div style="margin-left: 25%;margin-top: 40px;">
       <label class="label" for="startValInput">startVal:
-        <input v-model.number="setStartVal" type="number" name="startValInput" >
+        <input v-model.number="setStartVal" type="number" name="startValInput">
       </label>
       <label class="label" for="endValInput">endVal:
-        <input v-model.number="setEndVal" type="number" name="endVaInput" >
+        <input v-model.number="setEndVal" type="number" name="endVaInput">
       </label>
       <label class="label" for="durationInput">duration:
-        <input v-model.number="setDuration" type="number" 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>
       <label class="label" for="decimalsInput">decimals:
-        <input v-model.number="setDecimals" type="number" 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>
 
diff --git a/src/views/components-demo/dndList.vue b/src/views/components-demo/dndList.vue
index 9c8847a9..0e4c215a 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" list1-title="List" list2-title="Article pool"/>
+      <dnd-list :list1="list1" :list2="list2" list1-title="List" list2-title="Article pool" />
     </div>
   </div>
 </template>
diff --git a/src/views/components-demo/dragDialog.vue b/src/views/components-demo/dragDialog.vue
index 0a023f90..ae4b4900 100644
--- a/src/views/components-demo/dragDialog.vue
+++ b/src/views/components-demo/dragDialog.vue
@@ -3,12 +3,12 @@
     <el-button type="primary" @click="dialogTableVisible = true">open a Drag Dialog</el-button>
     <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 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 property="name" label="Name" width="200"/>
-        <el-table-column property="address" label="Address"/>
+        <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>
diff --git a/src/views/components-demo/dragKanban.vue b/src/views/components-demo/dragKanban.vue
index 4353fb1e..bbbfe3df 100644
--- a/src/views/components-demo/dragKanban.vue
+++ b/src/views/components-demo/dragKanban.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="components-container board">
-    <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"/>
+    <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>
diff --git a/src/views/components-demo/dragSelect.vue b/src/views/components-demo/dragSelect.vue
index 559e8a57..c2ac4b9b 100644
--- a/src/views/components-demo/dragSelect.vue
+++ b/src/views/components-demo/dragSelect.vue
@@ -2,7 +2,7 @@
   <div class="components-container">
 
     <el-drag-select v-model="value" style="width:500px;" multiple placeholder="请选择">
-      <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value" />
+      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
     </el-drag-select>
 
     <div style="margin-top:30px;">
diff --git a/src/views/components-demo/dropzone.vue b/src/views/components-demo/dropzone.vue
index 0044a525..62e9fdad 100644
--- a/src/views/components-demo/dropzone.vue
+++ b/src/views/components-demo/dropzone.vue
@@ -5,7 +5,7 @@
       {{ $t('components.dropzoneTips') }}
     </code>
     <div class="editor-container">
-      <dropzone id="myVueDropzone" url="https://httpbin.org/post" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS"/>
+      <dropzone id="myVueDropzone" url="https://httpbin.org/post" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS" />
     </div>
   </div>
 </template>
diff --git a/src/views/components-demo/jsonEditor.vue b/src/views/components-demo/jsonEditor.vue
index cff3780c..06e60114 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 ref="jsonEditor" v-model="value" />
     </div>
   </div>
 </template>
diff --git a/src/views/components-demo/markdown.vue b/src/views/components-demo/markdown.vue
index de2e817e..fb6b503b 100644
--- a/src/views/components-demo/markdown.vue
+++ b/src/views/components-demo/markdown.vue
@@ -9,12 +9,12 @@
 
     <div class="editor-container">
       <el-tag class="tag-title">Basic:</el-tag>
-      <markdown-editor v-model="content" height="300px"/>
+      <markdown-editor v-model="content" height="300px" />
     </div>
 
     <div class="editor-container">
       <el-tag class="tag-title">Markdown Mode:</el-tag>
-      <markdown-editor ref="markdownEditor" v-model="content" :options="{hideModeSwitch:true,previewStyle:'tab'}" height="200px"/>
+      <markdown-editor ref="markdownEditor" v-model="content" :options="{hideModeSwitch:true,previewStyle:'tab'}" height="200px" />
     </div>
 
     <div class="editor-container">
@@ -28,12 +28,13 @@
 
     <div class="editor-container">
       <el-tag class="tag-title">I18n:</el-tag>
-      <el-alert :closable="false" title="You can change the language of the admin system to see the effect" type="success"/>
-      <markdown-editor v-model="content" :language="language" height="300px"/>
+      <el-alert :closable="false" title="You can change the language of the admin system to see the effect" type="success" />
+      <markdown-editor v-model="content" :language="language" height="300px" />
     </div>
 
     <el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="getHtml">Get HTML</el-button>
-    <div v-html="html"/>
+    <!-- eslint-disable-next-line -->
+    <div v-html="html" />
 
   </div>
 </template>
diff --git a/src/views/components-demo/mixin.vue b/src/views/components-demo/mixin.vue
index 99b62468..08bca0a2 100644
--- a/src/views/components-demo/mixin.vue
+++ b/src/views/components-demo/mixin.vue
@@ -74,7 +74,7 @@
             <span>hover text</span>
           </div>
           <div class="component-item">
-            <mallki class-name="mallki-text" text="vue-element-admin"/>
+            <mallki class-name="mallki-text" text="vue-element-admin" />
           </div>
         </el-card>
       </el-col>
@@ -87,12 +87,11 @@
             <span>Share</span>
           </div>
           <div class="component-item" style="height:420px;">
-            <dropdown-menu :items="articleList" style="margin:0 auto;" title="系列文章"/>
+            <dropdown-menu :items="articleList" style="margin:0 auto;" title="系列文章" />
           </div>
         </el-card>
       </el-col>
     </el-row>
-
   </div>
 </template>
 
diff --git a/src/views/components-demo/splitpane.vue b/src/views/components-demo/splitpane.vue
index dcd87149..72b62014 100644
--- a/src/views/components-demo/splitpane.vue
+++ b/src/views/components-demo/splitpane.vue
@@ -7,15 +7,15 @@
     </code>
     <split-pane split="vertical" @resize="resize">
       <template slot="paneL">
-        <div class="left-container"/>
+        <div class="left-container" />
       </template>
       <template slot="paneR">
         <split-pane split="horizontal">
           <template slot="paneL">
-            <div class="top-container"/>
+            <div class="top-container" />
           </template>
           <template slot="paneR">
-            <div class="bottom-container"/>
+            <div class="bottom-container" />
           </template>
         </split-pane>
       </template>
diff --git a/src/views/components-demo/sticky.vue b/src/views/components-demo/sticky.vue
index 65cfb091..618f383e 100644
--- a/src/views/components-demo/sticky.vue
+++ b/src/views/components-demo/sticky.vue
@@ -3,11 +3,11 @@
     <sticky class-name="sub-navbar">
       <el-dropdown trigger="click">
         <el-button plain>
-          Platform<i class="el-icon-caret-bottom el-icon--right"/>
+          Platform<i class="el-icon-caret-bottom el-icon--right" />
         </el-button>
         <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">
+            <el-checkbox v-for="item in platformsOptions" :key="item.key" :label="item.key">
               {{ item.name }}
             </el-checkbox>
           </el-checkbox-group>
@@ -16,7 +16,7 @@
 
       <el-dropdown trigger="click">
         <el-button plain>
-          Link<i class="el-icon-caret-bottom el-icon--right"/>
+          Link<i class="el-icon-caret-bottom el-icon--right" />
         </el-button>
         <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:300px">
           <el-input v-model="url" placeholder="Please enter the content">
@@ -26,10 +26,11 @@
       </el-dropdown>
 
       <div class="time-container">
-        <el-date-picker v-model="time" :picker-options="pickerOptions" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time"/>
+        <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
+      <el-button style="margin-left: 10px;" type="success">
+        publish
       </el-button>
     </sticky>
 
diff --git a/src/views/components-demo/tinymce.vue b/src/views/components-demo/tinymce.vue
index c7a94694..22e72647 100644
--- a/src/views/components-demo/tinymce.vue
+++ b/src/views/components-demo/tinymce.vue
@@ -5,9 +5,10 @@
       <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 v-model="content" :height="300" />
     </div>
-    <div class="editor-content" v-html="content"/>
+    <!-- eslint-disable-next-line -->
+    <div class="editor-content" v-html="content" />
   </div>
 </template>
 
diff --git a/src/views/dashboard/admin/components/BarChart.vue b/src/views/dashboard/admin/components/BarChart.vue
index 28e0aef9..fa265ef6 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 :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 0e4d1e27..0ab38b1b 100644
--- a/src/views/dashboard/admin/components/BoxCard.vue
+++ b/src/views/dashboard/admin/components/BoxCard.vue
@@ -4,23 +4,23 @@
       <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
     </div>
     <div style="position:relative;">
-      <pan-thumb :image="avatar" class="panThumb"/>
-      <mallki class-name="mallki-text" text="vue-element-admin"/>
+      <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 :percentage="70" />
       </div>
       <div class="progress-item">
         <span>JavaScript</span>
-        <el-progress :percentage="18"/>
+        <el-progress :percentage="18" />
       </div>
       <div class="progress-item">
         <span>Css</span>
-        <el-progress :percentage="12"/>
+        <el-progress :percentage="12" />
       </div>
       <div class="progress-item">
         <span>ESLint</span>
-        <el-progress :percentage="100" status="success"/>
+        <el-progress :percentage="100" status="success" />
       </div>
     </div>
   </el-card>
diff --git a/src/views/dashboard/admin/components/LineChart.vue b/src/views/dashboard/admin/components/LineChart.vue
index dfd121e5..2e05102d 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 :class="className" :style="{height:height,width:width}" />
 </template>
 
 <script>
diff --git a/src/views/dashboard/admin/components/PanelGroup.vue b/src/views/dashboard/admin/components/PanelGroup.vue
index 8125b846..61c237cb 100644
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@@ -7,7 +7,7 @@
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">New Visits</div>
-          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num"/>
+          <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 :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num"/>
+          <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 :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num"/>
+          <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 :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num"/>
+          <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 edb17d54..ff1bc52c 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 :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 11fde329..de70e523 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 :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 9f5a6bb2..c4b3cae2 100644
--- a/src/views/dashboard/admin/components/TodoList/Todo.vue
+++ b/src/views/dashboard/admin/components/TodoList/Todo.vue
@@ -5,18 +5,20 @@
         :checked="todo.done"
         class="toggle"
         type="checkbox"
-        @change="toggleTodo( todo)">
-      <label @dblclick="editing = true" v-text="todo.text"/>
-      <button class="destroy" @click="deleteTodo( todo )"/>
+        @change="toggleTodo( todo)"
+      >
+      <label @dblclick="editing = true" v-text="todo.text" />
+      <button class="destroy" @click="deleteTodo( todo )" />
     </div>
     <input
-      v-focus="editing"
       v-show="editing"
+      v-focus="editing"
       :value="todo.text"
       class="edit"
       @keyup.enter="doneEdit"
       @keyup.esc="cancelEdit"
-      @blur="doneEdit">
+      @blur="doneEdit"
+    >
   </li>
 </template>
 
diff --git a/src/views/dashboard/admin/components/TodoList/index.vue b/src/views/dashboard/admin/components/TodoList/index.vue
index 5b840c65..8000d414 100644
--- a/src/views/dashboard/admin/components/TodoList/index.vue
+++ b/src/views/dashboard/admin/components/TodoList/index.vue
@@ -7,7 +7,7 @@
     <!-- main section -->
     <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"/>
+      <label for="toggle-all" />
       <ul class="todo-list">
         <todo
           v-for="(todo, index) in filteredTodos"
@@ -15,7 +15,8 @@
           :todo="todo"
           @toggleTodo="toggleTodo"
           @editTodo="editTodo"
-          @deleteTodo="deleteTodo"/>
+          @deleteTodo="deleteTodo"
+        />
       </ul>
     </section>
     <!-- footer -->
diff --git a/src/views/dashboard/admin/components/TransactionTable.vue b/src/views/dashboard/admin/components/TransactionTable.vue
index 07417523..f2b217d9 100644
--- a/src/views/dashboard/admin/components/TransactionTable.vue
+++ b/src/views/dashboard/admin/components/TransactionTable.vue
@@ -12,7 +12,9 @@
     </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>
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 1a79637a..85dcc186 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -1,41 +1,41 @@
 <template>
   <div class="dashboard-editor-container">
 
-    <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"/>
+    <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
 
-    <panel-group @handleSetLineChartData="handleSetLineChartData"/>
+    <panel-group @handleSetLineChartData="handleSetLineChartData" />
 
     <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData"/>
+      <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 />
         </div>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
-          <pie-chart/>
+          <pie-chart />
         </div>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
-          <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 />
       </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 />
       </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 />
       </el-col>
     </el-row>
 
diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue
index ace11426..7775ce39 100644
--- a/src/views/dashboard/editor/index.vue
+++ b/src/views/dashboard/editor/index.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="dashboard-editor-container">
     <div class=" clearfix">
-      <pan-thumb :image="avatar" style="float: left"> Your roles:
+      <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 style="position: absolute; top: 0px; border: 0; right: 0;" />
       <div class="info-container">
         <span class="display_name">{{ name }}</span>
         <span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 7011f6ad..1720ea8f 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 :is="currentRole" />
   </div>
 </template>
 
diff --git a/src/views/documentation/index.vue b/src/views/documentation/index.vue
index 4c7afc9d..5004e82b 100644
--- a/src/views/documentation/index.vue
+++ b/src/views/documentation/index.vue
@@ -3,7 +3,7 @@
     <a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/">{{ $t('documentation.documentation') }}</a>
     <a class="document-btn" target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">{{ $t('documentation.github') }}</a>
     <a class="document-btn" target="_blank" href="https://panjiachen.gitee.io/vue-element-admin-site/zh/">国内文档</a>
-    <dropdown-menu :items="articleList" style="float:left;margin-left:50px;" title="系列文章"/>
+    <dropdown-menu :items="articleList" style="float:left;margin-left:50px;" title="系列文章" />
   </div>
 </template>
 <script>
diff --git a/src/views/errorLog/errorTestB.vue b/src/views/errorLog/errorTestB.vue
index b04c2511..d796beef 100644
--- a/src/views/errorLog/errorTestB.vue
+++ b/src/views/errorLog/errorTestB.vue
@@ -1,5 +1,5 @@
 <template>
-  <div/>
+  <div />
 </template>
 
 <script>
diff --git a/src/views/errorLog/index.vue b/src/views/errorLog/index.vue
index 47db4ae5..8cbe18e2 100644
--- a/src/views/errorLog/index.vue
+++ b/src/views/errorLog/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="errPage-container">
-    <errorA/>
-    <errorB/>
+    <errorA />
+    <errorB />
     <!-- $t is vue-i18n global function to translate lang -->
     <h3>{{ $t('errorLog.tips') }}</h3>
     <code>
diff --git a/src/views/errorPage/404.vue b/src/views/errorPage/404.vue
index 6483fd5f..94a2b07b 100644
--- a/src/views/errorPage/404.vue
+++ b/src/views/errorPage/404.vue
@@ -9,7 +9,8 @@
       </div>
       <div class="bullshit">
         <div class="bullshit__oops">OOPS!</div>
-        <div class="bullshit__info">版权所有
+        <div class="bullshit__info">
+          版权所有
           <a class="link-type" href="https://wallstreetcn.com" target="_blank">华尔街见闻</a>
         </div>
         <div class="bullshit__headline">{{ message }}</div>
diff --git a/src/views/example/components/ArticleDetail.vue b/src/views/example/components/ArticleDetail.vue
index 1026559f..27d42ccc 100644
--- a/src/views/example/components/ArticleDetail.vue
+++ b/src/views/example/components/ArticleDetail.vue
@@ -6,7 +6,8 @@
         <CommentDropdown v-model="postForm.comment_disabled" />
         <PlatformDropdown v-model="postForm.platforms" />
         <SourceUrlDropdown v-model="postForm.source_uri" />
-        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">发布
+        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
+          发布
         </el-button>
         <el-button v-loading="loading" type="warning" @click="draftForm">草稿</el-button>
       </sticky>
@@ -28,14 +29,14 @@
                 <el-col :span="8">
                   <el-form-item label-width="45px" label="作者:" class="postInfo-container-item">
                     <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-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 v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" />
                   </el-form-item>
                 </el-col>
 
@@ -47,7 +48,8 @@
                       :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                       :low-threshold="1"
                       :high-threshold="3"
-                      style="margin-top:8px;"/>
+                      style="margin-top:8px;"
+                    />
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -56,12 +58,12 @@
         </el-row>
 
         <el-form-item style="margin-bottom: 40px;" label-width="45px" label="摘要:">
-          <el-input :rows="1" v-model="postForm.content_short" type="textarea" class="article-textarea" autosize placeholder="请输入内容"/>
+          <el-input v-model="postForm.content_short" :rows="1" type="textarea" class="article-textarea" autosize placeholder="请输入内容" />
           <span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}字</span>
         </el-form-item>
 
         <el-form-item prop="content" style="margin-bottom: 30px;">
-          <Tinymce ref="editor" :height="400" v-model="postForm.content" />
+          <Tinymce ref="editor" v-model="postForm.content" :height="400" />
         </el-form-item>
 
         <el-form-item prop="image_uri" style="margin-bottom: 30px;">
diff --git a/src/views/example/components/Dropdown/Comment.vue b/src/views/example/components/Dropdown/Comment.vue
index 77e8d5f1..26509611 100644
--- a/src/views/example/components/Dropdown/Comment.vue
+++ b/src/views/example/components/Dropdown/Comment.vue
@@ -1,13 +1,18 @@
 <template>
   <el-dropdown :show-timeout="100" trigger="click">
-    <el-button plain>{{ !comment_disabled?'评论已打开':'评论已关闭' }}
-      <i class="el-icon-caret-bottom el-icon--right"/>
+    <el-button plain>
+      {{ !comment_disabled?'评论已打开':'评论已关闭' }}
+      <i class="el-icon-caret-bottom el-icon--right" />
     </el-button>
     <el-dropdown-menu slot="dropdown" class="no-padding">
       <el-dropdown-item>
         <el-radio-group v-model="comment_disabled" style="padding: 10px;">
-          <el-radio :label="true">关闭评论</el-radio>
-          <el-radio :label="false">打开评论</el-radio>
+          <el-radio :label="true">
+            关闭评论
+          </el-radio>
+          <el-radio :label="false">
+            打开评论
+          </el-radio>
         </el-radio-group>
       </el-dropdown-item>
     </el-dropdown-menu>
diff --git a/src/views/example/components/Dropdown/Platform.vue b/src/views/example/components/Dropdown/Platform.vue
index fce5e4b3..98fcaf28 100644
--- a/src/views/example/components/Dropdown/Platform.vue
+++ b/src/views/example/components/Dropdown/Platform.vue
@@ -2,11 +2,11 @@
   <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 class="el-icon-caret-bottom el-icon--right" />
     </el-button>
     <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">
+        <el-checkbox v-for="item in platformsOptions" :key="item.key" :label="item.key">
           {{ item.name }}
         </el-checkbox>
       </el-checkbox-group>
diff --git a/src/views/example/components/Dropdown/SourceUrl.vue b/src/views/example/components/Dropdown/SourceUrl.vue
index d14e8549..21a58907 100644
--- a/src/views/example/components/Dropdown/SourceUrl.vue
+++ b/src/views/example/components/Dropdown/SourceUrl.vue
@@ -2,12 +2,14 @@
   <el-dropdown :show-timeout="100" trigger="click">
     <el-button plain>
       外链
-      <i class="el-icon-caret-bottom el-icon--right"/>
+      <i class="el-icon-caret-bottom el-icon--right" />
     </el-button>
     <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 v-model="source_uri" placeholder="请输入内容">
-          <template slot="prepend">填写url</template>
+          <template slot="prepend">
+            填写url
+          </template>
         </el-input>
       </el-form-item>
     </el-dropdown-menu>
diff --git a/src/views/example/components/Warning.vue b/src/views/example/components/Warning.vue
index 77d90c26..bee172d4 100644
--- a/src/views/example/components/Warning.vue
+++ b/src/views/example/components/Warning.vue
@@ -4,7 +4,8 @@
     的include，直接缓存所有页面。详情见
     <a
       href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
-      target="_blank">文档</a>
+      target="_blank"
+    >文档</a>
   </p>
 </template>
 
diff --git a/src/views/example/create.vue b/src/views/example/create.vue
index d0f7b787..4d3a24b5 100644
--- a/src/views/example/create.vue
+++ b/src/views/example/create.vue
@@ -1,5 +1,5 @@
 <template>
-  <article-detail :is-edit="false"/>
+  <article-detail :is-edit="false" />
 </template>
 
 <script>
diff --git a/src/views/example/edit.vue b/src/views/example/edit.vue
index c21af0c9..87b61260 100644
--- a/src/views/example/edit.vue
+++ b/src/views/example/edit.vue
@@ -1,5 +1,5 @@
 <template>
-  <article-detail :is-edit="true"/>
+  <article-detail :is-edit="true" />
 </template>
 
 <script>
diff --git a/src/views/example/list.vue b/src/views/example/list.vue
index 85ae4e43..59f6ee6e 100644
--- a/src/views/example/list.vue
+++ b/src/views/example/list.vue
@@ -22,7 +22,7 @@
 
       <el-table-column width="100px" label="Importance">
         <template slot-scope="scope">
-          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon"/>
+          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon" />
         </template>
       </el-table-column>
 
diff --git a/src/views/excel/components/BookTypeOption.vue b/src/views/excel/components/BookTypeOption.vue
index 9970b0e4..af9fed39 100644
--- a/src/views/excel/components/BookTypeOption.vue
+++ b/src/views/excel/components/BookTypeOption.vue
@@ -1,12 +1,13 @@
 <template>
   <div style="display:inline-block;">
     <label class="radio-label">Book Type: </label>
-    <el-select v-model="bookType" style="width:120px;" >
+    <el-select v-model="bookType" style="width:120px;">
       <el-option
         v-for="item in options"
         :key="item"
         :label="item"
-        :value="item"/>
+        :value="item"
+      />
     </el-select>
   </div>
 </template>
diff --git a/src/views/excel/components/FilenameOption.vue b/src/views/excel/components/FilenameOption.vue
index 5cc931ad..b578d65c 100644
--- a/src/views/excel/components/FilenameOption.vue
+++ b/src/views/excel/components/FilenameOption.vue
@@ -2,7 +2,7 @@
   <div style="display:inline-block;">
     <!-- $t is vue-i18n global function to translate lang -->
     <label class="radio-label" style="padding-left:0;">Filename: </label>
-    <el-input :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
+    <el-input v-model="filename" :placeholder="$t('excel.placeholder')" style="width:340px;" prefix-icon="el-icon-document" />
   </div>
 </template>
 
diff --git a/src/views/excel/exportExcel.vue b/src/views/excel/exportExcel.vue
index 914ccb7b..413b8822 100644
--- a/src/views/excel/exportExcel.vue
+++ b/src/views/excel/exportExcel.vue
@@ -35,7 +35,7 @@
       </el-table-column>
       <el-table-column align="center" label="Date" width="220">
         <template slot-scope="scope">
-          <i class="el-icon-time"/>
+          <i class="el-icon-time" />
           <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
diff --git a/src/views/excel/mergeHeader.vue b/src/views/excel/mergeHeader.vue
index 81d12a89..c145932c 100644
--- a/src/views/excel/mergeHeader.vue
+++ b/src/views/excel/mergeHeader.vue
@@ -4,8 +4,8 @@
     <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">Export</el-button>
 
     <el-table
-      v-loading="listLoading"
       ref="multipleTable"
+      v-loading="listLoading"
       :data="list"
       element-loading-text="Loading"
       border
@@ -36,7 +36,7 @@
       </el-table-column>
       <el-table-column align="center" label="Date" width="220">
         <template slot-scope="scope">
-          <i class="el-icon-time"/>
+          <i class="el-icon-time" />
           <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
diff --git a/src/views/excel/selectExcel.vue b/src/views/excel/selectExcel.vue
index 2695bfb4..7ee99c37 100644
--- a/src/views/excel/selectExcel.vue
+++ b/src/views/excel/selectExcel.vue
@@ -1,21 +1,22 @@
 <template>
   <div class="app-container">
     <!-- $t is vue-i18n global function to translate lang -->
-    <el-input :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
+    <el-input v-model="filename" :placeholder="$t('excel.placeholder')" 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>
     <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
       <el-tag type="info">Documentation</el-tag>
     </a>
     <el-table
-      v-loading="listLoading"
       ref="multipleTable"
+      v-loading="listLoading"
       :data="list"
       element-loading-text="拼命加载中"
       border
       fit
       highlight-current-row
-      @selection-change="handleSelectionChange">
-      <el-table-column type="selection" align="center"/>
+      @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 }}
@@ -38,7 +39,7 @@
       </el-table-column>
       <el-table-column align="center" label="PDate" width="220">
         <template slot-scope="scope">
-          <i class="el-icon-time"/>
+          <i class="el-icon-time" />
           <span>{{ scope.row.display_time }}</span>
         </template>
       </el-table-column>
diff --git a/src/views/excel/uploadExcel.vue b/src/views/excel/uploadExcel.vue
index 4095e910..1772b7fd 100644
--- a/src/views/excel/uploadExcel.vue
+++ b/src/views/excel/uploadExcel.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="app-container">
-    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload"/>
+    <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 v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
     </el-table>
   </div>
 </template>
diff --git a/src/views/i18n-demo/index.vue b/src/views/i18n-demo/index.vue
index b5344c67..fad364af 100644
--- a/src/views/i18n-demo/index.vue
+++ b/src/views/i18n-demo/index.vue
@@ -18,7 +18,7 @@
     <el-row :gutter="20" style="margin:100px 15px 50px;">
       <el-col :span="12" :xs="24">
         <div class="block">
-          <el-date-picker v-model="date" :placeholder="$t('i18nView.datePlaceholder')" type="date"/>
+          <el-date-picker v-model="date" :placeholder="$t('i18nView.datePlaceholder')" type="date" />
         </div>
         <div class="block">
           <el-select v-model="value" :placeholder="$t('i18nView.selectPlaceholder')">
@@ -26,7 +26,8 @@
               v-for="item in options"
               :key="item.value"
               :label="item.label"
-              :value="item.value"/>
+              :value="item.value"
+            />
           </el-select>
         </div>
         <div class="block">
@@ -40,9 +41,9 @@
       </el-col>
       <el-col :span="12" :xs="24">
         <el-table :data="tableData" fit highlight-current-row border style="width: 100%">
-          <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-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>
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
index 0e14f160..4d0eaa2b 100644
--- a/src/views/layout/Layout.vue
+++ b/src/views/layout/Layout.vue
@@ -1,11 +1,11 @@
 <template>
   <div :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <sidebar class="sidebar-container"/>
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <sidebar class="sidebar-container" />
     <div class="main-container">
-      <navbar/>
-      <tags-view/>
-      <app-main/>
+      <navbar />
+      <tags-view />
+      <app-main />
     </div>
   </div>
 </template>
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
index b6a3378f..9ee5bd52 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 :key="key" />
       </keep-alive>
     </transition>
   </section>
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
index 5c3bcda4..e2c095ec 100644
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -1,32 +1,32 @@
 <template>
   <div class="navbar">
-    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container" />
 
-    <breadcrumb class="breadcrumb-container"/>
+    <breadcrumb class="breadcrumb-container" />
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
         <search class="right-menu-item" />
 
-        <error-log class="errLog-container right-menu-item hover-effect"/>
+        <error-log class="errLog-container right-menu-item hover-effect" />
 
-        <screenfull class="right-menu-item hover-effect"/>
+        <screenfull class="right-menu-item hover-effect" />
 
         <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
-          <size-select class="right-menu-item hover-effect"/>
+          <size-select class="right-menu-item hover-effect" />
         </el-tooltip>
 
-        <lang-select class="right-menu-item hover-effect"/>
+        <lang-select class="right-menu-item hover-effect" />
 
         <el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
-          <theme-picker class="right-menu-item hover-effect"/>
+          <theme-picker class="right-menu-item hover-effect" />
         </el-tooltip>
       </template>
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
-          <i class="el-icon-caret-bottom"/>
+          <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
           <router-link to="/">
diff --git a/src/views/layout/components/Sidebar/Link.vue b/src/views/layout/components/Sidebar/Link.vue
index bff45cd8..eb4dd107 100644
--- a/src/views/layout/components/Sidebar/Link.vue
+++ b/src/views/layout/components/Sidebar/Link.vue
@@ -2,7 +2,7 @@
 <template>
   <!-- eslint-disable vue/require-component-is -->
   <component v-bind="linkProps(to)">
-    <slot/>
+    <slot />
   </component>
 </template>
 
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
index 47ac4b4d..9664ffb6 100644
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/src/views/layout/components/Sidebar/SidebarItem.vue
@@ -15,11 +15,12 @@
       </template>
       <sidebar-item
         v-for="child in item.children"
+        :key="child.path"
         :is-nest="true"
         :item="child"
-        :key="child.path"
         :base-path="resolvePath(child.path)"
-        class="nest-menu" />
+        class="nest-menu"
+      />
     </el-submenu>
 
   </div>
diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue
index 5a81e84f..4c4d6db4 100644
--- a/src/views/layout/components/Sidebar/index.vue
+++ b/src/views/layout/components/Sidebar/index.vue
@@ -9,7 +9,7 @@
       :collapse-transition="false"
       mode="vertical"
     >
-      <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path"/>
+      <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
     </el-menu>
   </el-scrollbar>
 </template>
diff --git a/src/views/layout/components/TagsView/ScrollPane.vue b/src/views/layout/components/TagsView/ScrollPane.vue
index 820a536e..89c72e1c 100644
--- a/src/views/layout/components/TagsView/ScrollPane.vue
+++ b/src/views/layout/components/TagsView/ScrollPane.vue
@@ -1,6 +1,6 @@
 <template>
   <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
-    <slot/>
+    <slot />
   </el-scrollbar>
 </template>
 
diff --git a/src/views/layout/components/TagsView/index.vue b/src/views/layout/components/TagsView/index.vue
index 72e127f2..c793ca1e 100644
--- a/src/views/layout/components/TagsView/index.vue
+++ b/src/views/layout/components/TagsView/index.vue
@@ -4,21 +4,23 @@
       <router-link
         v-for="tag in visitedViews"
         ref="tag"
+        :key="tag.path"
         :class="isActive(tag)?'active':''"
         :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-        :key="tag.path"
         tag="span"
         class="tags-view-item"
         @click.middle.native="closeSelectedTag(tag)"
-        @contextmenu.prevent.native="openMenu(tag,$event)">
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
         {{ generateTitle(tag.title) }}
         <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
       </router-link>
     </scroll-pane>
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
       <li @click="refreshSelectedTag(selectedTag)">{{ $t('tagsView.refresh') }}</li>
-      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">{{
-      $t('tagsView.close') }}</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">
+        {{ $t('tagsView.close') }}
+      </li>
       <li @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</li>
       <li @click="closeAllTags(selectedTag)">{{ $t('tagsView.closeAll') }}</li>
     </ul>
diff --git a/src/views/login/socialsignin.vue b/src/views/login/socialsignin.vue
index 62a63acc..567ac553 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"/></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"/></span> QQ
+      <span class="qq-svg-container"><svg-icon icon-class="qq" class="icon" /></span> QQ
     </div>
   </div>
 </template>
diff --git a/src/views/nested/menu1/index.vue b/src/views/nested/menu1/index.vue
index fdba73a4..30cb6701 100644
--- a/src/views/nested/menu1/index.vue
+++ b/src/views/nested/menu1/index.vue
@@ -1,4 +1,4 @@
-<template >
+<template>
   <div style="padding:30px;">
     <el-alert :closable="false" title="menu 1">
       <router-view />
diff --git a/src/views/nested/menu1/menu1-1/index.vue b/src/views/nested/menu1/menu1-1/index.vue
index 824b2cb6..27e173a6 100644
--- a/src/views/nested/menu1/menu1-1/index.vue
+++ b/src/views/nested/menu1/menu1-1/index.vue
@@ -1,4 +1,4 @@
-<template >
+<template>
   <div style="padding:30px;">
     <el-alert :closable="false" title="menu 1-1" type="success">
       <router-view />
diff --git a/src/views/pdf/download.vue b/src/views/pdf/download.vue
index b0f30f6f..b87b882d 100644
--- a/src/views/pdf/download.vue
+++ b/src/views/pdf/download.vue
@@ -6,7 +6,8 @@
     <div style="color: #ccc;">
       This article is from Evan You on <a target="_blank" href="https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf">medium</a>
     </div>
-    <div ref="content" class="node-article-content" v-html="article.content"/>
+    <!-- eslint-disable-next-line -->
+    <div ref="content" class="node-article-content" v-html="article.content" />
   </div>
 </template>
 
diff --git a/src/views/permission/components/SwitchRoles.vue b/src/views/permission/components/SwitchRoles.vue
index 6e5f84e5..c69de5a5 100644
--- a/src/views/permission/components/SwitchRoles.vue
+++ b/src/views/permission/components/SwitchRoles.vue
@@ -3,8 +3,8 @@
     <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 label="admin"/>
+      <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 df277ddc..6019fae3 100644
--- a/src/views/permission/directive.vue
+++ b/src/views/permission/directive.vue
@@ -59,7 +59,7 @@ import permission from '@/directive/permission/index.js' // 权限判断指令
 import checkPermission from '@/utils/permission' // 权限判断函数
 import SwitchRoles from './components/SwitchRoles'
 
-export default{
+export default {
   name: 'DirectivePermission',
   components: { SwitchRoles },
   directives: { permission },
diff --git a/src/views/permission/page.vue b/src/views/permission/page.vue
index 3f8a50e8..5291a782 100644
--- a/src/views/permission/page.vue
+++ b/src/views/permission/page.vue
@@ -7,7 +7,7 @@
 <script>
 import SwitchRoles from './components/SwitchRoles'
 
-export default{
+export default {
   name: 'PagePermission',
   components: { SwitchRoles },
   methods: {
diff --git a/src/views/permission/role.vue b/src/views/permission/role.vue
index df7befa6..4e22e50f 100644
--- a/src/views/permission/role.vue
+++ b/src/views/permission/role.vue
@@ -21,19 +21,20 @@
     </el-table>
 
     <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'Edit Role':'New Role'">
-      <el-form :model="role" label-width="80px" label-position="left"	>
+      <el-form :model="role" label-width="80px" label-position="left">
         <el-form-item label="Name">
-          <el-input v-model="role.name" placeholder="Role Name"/>
+          <el-input v-model="role.name" placeholder="Role Name" />
         </el-form-item>
         <el-form-item label="Desc">
           <el-input
             v-model="role.description"
             :autosize="{ minRows: 2, maxRows: 4}"
             type="textarea"
-            placeholder="Role Description"/>
+            placeholder="Role Description"
+          />
         </el-form-item>
         <el-form-item label="Menus">
-          <el-tree ref="tree" :check-strictly="checkStrictly" :data="routesData" :props="defaultProps" show-checkbox node-key="path" class="permission-tree"/>
+          <el-tree ref="tree" :check-strictly="checkStrictly" :data="routesData" :props="defaultProps" show-checkbox node-key="path" class="permission-tree" />
         </el-form-item>
       </el-form>
       <div style="text-align:right;">
diff --git a/src/views/qiniu/upload.vue b/src/views/qiniu/upload.vue
index 9cb5eb09..5766c669 100644
--- a/src/views/qiniu/upload.vue
+++ b/src/views/qiniu/upload.vue
@@ -1,6 +1,6 @@
 <template>
   <el-upload :data="dataObj" :multiple="true" :before-upload="beforeUpload" action="https://upload.qbox.me" drag>
-    <i class="el-icon-upload"/>
+    <i class="el-icon-upload" />
     <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
   </el-upload>
 </template>
@@ -10,7 +10,7 @@ import { getToken } from '@/api/qiniu'
 // 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
 // 七牛官方sdk https://developer.qiniu.com/sdk#official-sdk
 
-export default{
+export default {
   data() {
     return {
       dataObj: { token: '', key: '' },
diff --git a/src/views/tab/components/tabPane.vue b/src/views/tab/components/tabPane.vue
index e9ac20ac..1b6030c6 100644
--- a/src/views/tab/components/tabPane.vue
+++ b/src/views/tab/components/tabPane.vue
@@ -6,7 +6,8 @@
       align="center"
       label="ID"
       width="65"
-      element-loading-text="请给我点时间！">
+      element-loading-text="请给我点时间！"
+    >
       <template slot-scope="scope">
         <span>{{ scope.row.id }}</span>
       </template>
@@ -33,7 +34,7 @@
 
     <el-table-column width="120px" label="Importance">
       <template slot-scope="scope">
-        <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star"/>
+        <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" />
       </template>
     </el-table-column>
 
@@ -45,7 +46,9 @@
 
     <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>
 
diff --git a/src/views/tab/index.vue b/src/views/tab/index.vue
index 67936c0c..cce15d8a 100644
--- a/src/views/tab/index.vue
+++ b/src/views/tab/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="tab-container">
     <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-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">
+      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
         <keep-alive>
-          <tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes"/>
+          <tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />
         </keep-alive>
       </el-tab-pane>
     </el-tabs>
diff --git a/src/views/table/complexTable.vue b/src/views/table/complexTable.vue
index eb355e3b..a276df1a 100644
--- a/src/views/table/complexTable.vue
+++ b/src/views/table/complexTable.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input :placeholder="$t('table.title')" v-model="listQuery.title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
+      <el-input v-model="listQuery.title" :placeholder="$t('table.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-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
       </el-select>
       <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-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
       </el-select>
       <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-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
       </el-select>
       <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>
@@ -18,14 +18,15 @@
     </div>
 
     <el-table
-      v-loading="listLoading"
       :key="tableKey"
+      v-loading="listLoading"
       :data="list"
       border
       fit
       highlight-current-row
       style="width: 100%;"
-      @sort-change="sortChange">
+      @sort-change="sortChange"
+    >
       <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="65">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
@@ -54,7 +55,7 @@
       </el-table-column>
       <el-table-column :label="$t('table.importance')" width="80px">
         <template slot-scope="scope">
-          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__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 :label="$t('table.readings')" align="center" width="95">
@@ -71,11 +72,14 @@
       <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 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>
@@ -87,25 +91,25 @@
       <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 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-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 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 v-model="temp.title" />
         </el-form-item>
         <el-form-item :label="$t('table.status')">
           <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-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 v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;"/>
+          <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 :autosize="{ minRows: 2, maxRows: 4}" v-model="temp.remark" type="textarea" placeholder="Please input"/>
+          <el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -116,8 +120,8 @@
 
     <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 prop="pv" label="Pv"/>
+        <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>
diff --git a/src/views/table/dragTable.vue b/src/views/table/dragTable.vue
index 50d17da4..97c1e815 100644
--- a/src/views/table/dragTable.vue
+++ b/src/views/table/dragTable.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <!-- Note that row-key is necessary to get a correct row order. -->
-    <el-table v-loading="listLoading" ref="dragTable" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
+    <el-table ref="dragTable" 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">
@@ -29,7 +29,7 @@
 
       <el-table-column width="100px" label="Importance">
         <template slot-scope="scope">
-          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="icon-star"/>
+          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="icon-star" />
         </template>
       </el-table-column>
 
@@ -47,7 +47,7 @@
 
       <el-table-column align="center" label="Drag" width="80">
         <template slot-scope="{}">
-          <svg-icon class="drag-handler" icon-class="drag"/>
+          <svg-icon class="drag-handler" icon-class="drag" />
         </template>
       </el-table-column>
 
diff --git a/src/views/table/dynamicTable/fixedThead.vue b/src/views/table/dynamicTable/fixedThead.vue
index 30dcee00..e4887a06 100644
--- a/src/views/table/dynamicTable/fixedThead.vue
+++ b/src/views/table/dynamicTable/fixedThead.vue
@@ -9,8 +9,8 @@
       </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 :key="key" :data="tableData" 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] }}
diff --git a/src/views/table/dynamicTable/index.vue b/src/views/table/dynamicTable/index.vue
index 3c16bc46..56eac980 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:30px 0 5px 20px">{{ $t('table.dynamicTips2') }}</div>
-    <unfixed-thead/>
+    <unfixed-thead />
   </div>
 </template>
 
diff --git a/src/views/table/dynamicTable/unfixedThead.vue b/src/views/table/dynamicTable/unfixedThead.vue
index caa97506..d7f1bbcf 100644
--- a/src/views/table/dynamicTable/unfixedThead.vue
+++ b/src/views/table/dynamicTable/unfixedThead.vue
@@ -10,7 +10,7 @@
     </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 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] }}
diff --git a/src/views/table/inlineEditTable.vue b/src/views/table/inlineEditTable.vue
index 78800ce5..3f1e1611 100644
--- a/src/views/table/inlineEditTable.vue
+++ b/src/views/table/inlineEditTable.vue
@@ -23,7 +23,7 @@
 
       <el-table-column width="100px" label="Importance">
         <template slot-scope="scope">
-          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon"/>
+          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon" />
         </template>
       </el-table-column>
 
@@ -36,7 +36,7 @@
       <el-table-column min-width="300px" label="Title">
         <template slot-scope="scope">
           <template v-if="scope.row.edit">
-            <el-input v-model="scope.row.title" class="edit-input" size="small"/>
+            <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>
diff --git a/src/views/theme/index.vue b/src/views/theme/index.vue
index 9eec5f01..906b0b18 100644
--- a/src/views/theme/index.vue
+++ b/src/views/theme/index.vue
@@ -8,7 +8,7 @@
       </div>
       <div class="box-item">
         <span class="field-label">{{ $t('theme.change') }} : </span>
-        <el-switch v-model="theme"/>
+        <el-switch v-model="theme" />
         <code style="margin-top:15px;">{{ $t('theme.tips') }}</code>
       </div>
     </el-card>
@@ -22,18 +22,18 @@
     </div>
 
     <div class="block">
-      <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-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 class="el-icon-upload el-icon-right" />
       </el-button>
     </div>
 
     <div class="block">
-      <el-tag v-for="tag in tags" :type="tag.type" :key="tag.type" class="tag-item">
+      <el-tag v-for="tag in tags" :key="tag.type" :type="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 v-model="slideValue" />
     </div>
 
   </div>
diff --git a/src/views/tree-table/custom/index.vue b/src/views/tree-table/custom/index.vue
index 11e47912..9c4930a2 100644
--- a/src/views/tree-table/custom/index.vue
+++ b/src/views/tree-table/custom/index.vue
@@ -13,11 +13,11 @@
         :columns="columns"
         border
         default-children="children"
-        @selection-change	="selectChange"
+        @selection-change="selectChange"
       >
 
         <template slot="selection">
-          <el-table-column type="selection" align="center" width="55"/>
+          <el-table-column type="selection" align="center" width="55" />
         </template>
 
         <template slot="pre-column">
@@ -38,8 +38,9 @@
                 :style="{ width:(scope.row.timeLine||0) * 3+'px',
                           background:scope.row.timeLine>50?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)',
                           marginLeft:scope.row._level * 50+'px' }"
-                class="process">
-                <span style="display:inline-block"/>
+                class="process"
+              >
+                <span style="display:inline-block" />
               </div>
             </div>
           </el-tooltip>
@@ -70,7 +71,7 @@
     <el-dialog :visible.sync="dialogFormVisible" title="Edit">
       <el-form :model="tempItem" label-width="100px" style="width:600px">
         <el-form-item label="Name">
-          <el-input v-model.trim="tempItem.name" placeholder="Name"/>
+          <el-input v-model.trim="tempItem.name" placeholder="Name" />
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
diff --git a/src/views/tree-table/index.vue b/src/views/tree-table/index.vue
index 2e131157..ade9f4f3 100644
--- a/src/views/tree-table/index.vue
+++ b/src/views/tree-table/index.vue
@@ -13,7 +13,8 @@
           v-model="defaultExpandAll"
           active-color="#13ce66"
           inactive-color="#ff4949"
-          @change="reset"/>
+          @change="reset"
+        />
       </div>
 
       <div class="option-item">
diff --git a/src/views/zip/index.vue b/src/views/zip/index.vue
index 42f0efe6..11ce77b7 100644
--- a/src/views/zip/index.vue
+++ b/src/views/zip/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <!-- $t is vue-i18n global function to translate lang -->
-    <el-input :placeholder="$t('zip.placeholder')" v-model="filename" style="width:300px;" prefix-icon="el-icon-document"/>
+    <el-input v-model="filename" :placeholder="$t('zip.placeholder')" 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">
@@ -26,7 +26,7 @@
       </el-table-column>
       <el-table-column align="center" label="Date" width="220">
         <template slot-scope="scope">
-          <i class="el-icon-time"/>
+          <i class="el-icon-time" />
           <span>{{ scope.row.display_time }}</span>
         </template>
       </el-table-column>