refactor: add eslint-plugin-vue && lint code (#976)

src/views/i18n-demo/index.vue

@@ -3,41 +3,45 @@
     <el-card class="box-card" style="margin-top:40px;">
       <div slot="header" class="clearfix">
         <svg-icon icon-class="international" />
-        <span style='margin-left:10px;'>{{$t('i18nView.title')}}</span>
+        <span style="margin-left:10px;">{{ $t('i18nView.title') }}</span>
       </div>
       <div>
         <el-radio-group v-model="lang" size="small">
           <el-radio label="zh" border>简体中文</el-radio>
           <el-radio label="en" border>English</el-radio>
         </el-radio-group>
-        <el-tag style='margin-top:15px;display:block;' type="info">{{$t('i18nView.note')}}</el-tag>
+        <el-tag style="margin-top:15px;display:block;" type="info">{{ $t('i18nView.note') }}</el-tag>
       </div>
     </el-card>
 
     <el-row :gutter="20" style="margin:100px 15px 50px;">
       <el-col :span="12">
         <div class="block">
-          <el-date-picker v-model="date" type="date" :placeholder="$t('i18nView.datePlaceholder')"></el-date-picker>
+          <el-date-picker v-model="date" :placeholder="$t('i18nView.datePlaceholder')" type="date"/>
         </div>
         <div class="block">
-          <el-pagination background :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next"
-            :total="400">
-          </el-pagination>
+          <el-pagination
+            :current-page="currentPage"
+            :page-sizes="[100, 200, 300, 400]"
+            :page-size="100"
+            :total="400"
+            background
+            layout="total, sizes, prev, pager, next"/>
         </div>
         <div class="block">
-          <el-button class="item-btn" size="small">{{$t('i18nView.default')}}</el-button>
-          <el-button class="item-btn" size="small" type="primary">{{$t('i18nView.primary')}}</el-button>
-          <el-button class="item-btn" size="small" type="success">{{$t('i18nView.success')}}</el-button>
-          <el-button class="item-btn" size="small" type="info">{{$t('i18nView.info')}}</el-button>
-          <el-button class="item-btn" size="small" type="warning">{{$t('i18nView.warning')}}</el-button>
-          <el-button class="item-btn" size="small" type="danger">{{$t('i18nView.danger')}}</el-button>
+          <el-button class="item-btn" size="small">{{ $t('i18nView.default') }}</el-button>
+          <el-button class="item-btn" size="small" type="primary">{{ $t('i18nView.primary') }}</el-button>
+          <el-button class="item-btn" size="small" type="success">{{ $t('i18nView.success') }}</el-button>
+          <el-button class="item-btn" size="small" type="info">{{ $t('i18nView.info') }}</el-button>
+          <el-button class="item-btn" size="small" type="warning">{{ $t('i18nView.warning') }}</el-button>
+          <el-button class="item-btn" size="small" type="danger">{{ $t('i18nView.danger') }}</el-button>
         </div>
       </el-col>
       <el-col :span="12">
         <el-table :data="tableData" fit highlight-current-row border style="width: 100%">
-          <el-table-column prop="name" :label="$t('i18nView.tableName')" width="100" align="center"></el-table-column>
-          <el-table-column prop="date" :label="$t('i18nView.tableDate')" width="120" align="center"></el-table-column>
-          <el-table-column prop="address" :label="$t('i18nView.tableAddress')"></el-table-column>
+          <el-table-column :label="$t('i18nView.tableName')" prop="name" width="100" align="center"/>
+          <el-table-column :label="$t('i18nView.tableDate')" prop="date" width="120" align="center"/>
+          <el-table-column :label="$t('i18nView.tableAddress')" prop="address"/>
         </el-table>
       </el-col>
     </el-row>
@@ -49,7 +53,7 @@ import local from './local'
 const viewName = 'i18nView'
 
 export default {
-  name: 'i18n',
+  name: 'I18n',
   data() {
     return {
       date: '',
@@ -76,12 +80,6 @@ export default {
       }]
     }
   },
-  created() {
-    if (!this.$i18n.getLocaleMessage('en')[viewName]) {
-      this.$i18n.mergeLocaleMessage('en', local.en)
-      this.$i18n.mergeLocaleMessage('zh', local.zh)
-    }
-  },
   computed: {
     lang: {
       get() {
@@ -92,6 +90,12 @@ export default {
         this.$store.dispatch('setLanguage', lang)
       }
     }
+  },
+  created() {
+    if (!this.$i18n.getLocaleMessage('en')[viewName]) {
+      this.$i18n.mergeLocaleMessage('en', local.en)
+      this.$i18n.mergeLocaleMessage('zh', local.zh)
+    }
   }
 }
 </script>

src/views/i18n-demo/local.js

@@ -3,7 +3,7 @@ export default {
   zh: {
     i18nView: {
       title: '切换语言',
-      note: '目前只翻译了当前页面和侧边栏和导航，未完待续，敬请期待...',
+      note: '本项目国际化基于 vue-i18n',
       datePlaceholder: '请选择日期',
       tableDate: '日期',
       tableName: '姓名',
@@ -20,7 +20,7 @@ export default {
   en: {
     i18nView: {
       title: 'Switch Language',
-      note: 'Currently only translated the i18n page and the sidebar and levelbar, please look forword to...',
+      note: 'The internationalization of this project is based on vue-i18n',
       datePlaceholder: 'Pick a day',
       tableDate: 'tableDate',
       tableName: 'tableName',