lint

.eslintrc.js

@@ -9,7 +9,7 @@ module.exports = {
     node: true,
     es6: true,
   },
-  extends: ['plugin:vue/strongly-recommended', 'eslint:recommended'],
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
 
   // add your custom rules here
   //it is base on https://github.com/vuejs/eslint-config-vue

src/components/Breadcrumb/index.vue

@@ -1,7 +1,7 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path" v-if="item.meta.title">
+      <el-breadcrumb-item v-for="(item,index) in levelList" v-if="item.meta.title" :key="item.path">
         <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
         <router-link v-else :to="item.redirect||item.path">{{ item.meta.title }}</router-link>
       </el-breadcrumb-item>
@@ -11,9 +11,6 @@
 
 <script>
 export default {
-  created() {
-    this.getBreadcrumb()
-  },
   data() {
     return {
       levelList: null
@@ -24,6 +21,9 @@ export default {
       this.getBreadcrumb()
     }
   },
+  created() {
+    this.getBreadcrumb()
+  },
   methods: {
     getBreadcrumb() {
       let matched = this.$route.matched.filter(item => item.name)

src/components/Hamburger/index.vue

@@ -1,10 +1,9 @@
 <template>
   <div>
     <svg
-      t="1492500959545"
-      @click="toggleClick"
-      class="hamburger"
       :class="{'is-active':isActive}"
+      t="1492500959545"
+      class="hamburger"
       style=""
       viewBox="0 0 1024 1024"
       version="1.1"
@@ -12,7 +11,8 @@
       p-id="1691"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="64"
-      height="64">
+      height="64"
+      @click="toggleClick">
       <path
         d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
         p-id="1692" />

src/views/404.vue

@@ -10,7 +10,7 @@
       <div class="bullshit">
         <div class="bullshit__oops">OOPS!</div>
         <div class="bullshit__info">版权所有
-          <a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a>
+          <a class="link-type" href="https://wallstreetcn.com" target="_blank">华尔街见闻</a>
         </div>
         <div class="bullshit__headline">{{ message }}</div>
         <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>

src/views/dashboard/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dashboard-container">
     <div class="dashboard-text">name:{{ name }}</div>
-    <div class="dashboard-text">roles:<span v-for='role in roles' :key='role'>{{ role }}</span></div>
+    <div class="dashboard-text">roles:<span v-for="role in roles" :key="role">{{ role }}</span></div>
   </div>
 </template>
 

src/views/form/index.vue

@@ -12,11 +12,11 @@
       </el-form-item>
       <el-form-item label="Activity time">
         <el-col :span="11">
-          <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"/>
+          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;"/>
         </el-col>
-        <el-col class="line" :span="2">-</el-col>
+        <el-col :span="2" class="line">-</el-col>
         <el-col :span="11">
-          <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="form.date2" style="width: 100%;"/>
+          <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;"/>
         </el-col>
       </el-form-item>
       <el-form-item label="Instant delivery">
@@ -37,7 +37,7 @@
         </el-radio-group>
       </el-form-item>
       <el-form-item label="Activity form">
-        <el-input type="textarea" v-model="form.desc"/>
+        <el-input v-model="form.desc" type="textarea"/>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">Create</el-button>

src/views/layout/Layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-wrapper" :class="classObj">
+  <div :class="classObj" class="app-wrapper">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
     <sidebar class="sidebar-container"/>
     <div class="main-container">

src/views/layout/components/Navbar.vue

@@ -1,20 +1,20 @@
 <template>
   <el-menu class="navbar" mode="horizontal">
-    <hamburger class="hamburger-container" :toggle-click="toggleSideBar" :is-active="sidebar.opened"/>
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
-    <breadcrumb/>
+    <breadcrumb />
     <el-dropdown class="avatar-container" trigger="click">
       <div class="avatar-wrapper">
-        <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
+        <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
         <i class="el-icon-caret-bottom"/>
       </div>
-      <el-dropdown-menu class="user-dropdown" slot="dropdown">
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
         <router-link class="inlineBlock" to="/">
           <el-dropdown-item>
             Home
           </el-dropdown-item>
         </router-link>
         <el-dropdown-item divided>
-          <span @click="logout" style="display:block;">LogOut</span>
+          <span style="display:block;" @click="logout">LogOut</span>
         </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>

src/views/layout/components/Sidebar/SidebarItem.vue

@@ -16,12 +16,12 @@
 
       <template v-for="child in item.children" v-if="!child.hidden">
         <sidebar-item
-          :is-nest="true"
-          class="nest-menu"
           v-if="child.children&&child.children.length>0"
+          :is-nest="true"
           :item="child"
           :key="child.path"
-          :base-path="resolvePath(child.path)"/>
+          :base-path="resolvePath(child.path)"
+          class="nest-menu"/>
 
         <router-link v-else :to="resolvePath(child.path)" :key="child.name">
           <el-menu-item :index="resolvePath(child.path)">

src/views/layout/components/Sidebar/index.vue

@@ -1,10 +1,10 @@
 <template>
   <el-scrollbar wrap-class="scrollbar-wrapper">
     <el-menu
-      mode="vertical"
       :show-timeout="200"
       :default-active="$route.path"
       :collapse="isCollapse"
+      mode="vertical"
       background-color="#304156"
       text-color="#bfcbd9"
       active-text-color="#409EFF"

src/views/login/index.vue

@@ -1,30 +1,30 @@
 <template>
   <div class="login-container">
-    <el-form class="login-form" auto-complete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
       <h3 class="title">vue-element-admin</h3>
       <el-form-item prop="username">
         <span class="svg-container svg-container_login">
           <svg-icon icon-class="user" />
         </span>
-        <el-input name="username" type="text" v-model="loginForm.username" auto-complete="on" placeholder="username" />
+        <el-input v-model="loginForm.username" name="username" type="text" auto-complete="on" placeholder="username" />
       </el-form-item>
       <el-form-item prop="password">
         <span class="svg-container">
           <svg-icon icon-class="password" />
         </span>
         <el-input
-          name="password"
           :type="pwdType"
-          @keyup.enter.native="handleLogin"
           v-model="loginForm.password"
+          name="password"
           auto-complete="on"
-          placeholder="password" />
+          placeholder="password"
+          @keyup.enter.native="handleLogin" />
         <span class="show-pwd" @click="showPwd">
           <svg-icon icon-class="eye" />
         </span>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
+        <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
           Sign in
         </el-button>
       </el-form-item>

src/views/nested/menu1/index.vue

@@ -1,6 +1,6 @@
 <template >
   <div style="padding:30px;">
-    <el-alert title="menu 1" :closable="false">
+    <el-alert :closable="false" title="menu 1">
       <router-view />
     </el-alert>
   </div>

src/views/nested/menu1/menu1-1/index.vue

@@ -1,6 +1,6 @@
 <template >
   <div style="padding:30px;">
-    <el-alert title="menu 1-1" type="success" :closable="false">
+    <el-alert :closable="false" title="menu 1-1" type="success">
       <router-view />
     </el-alert>
   </div>

src/views/nested/menu1/menu1-2/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="padding:30px;">
-    <el-alert title="menu 1-2" type="success" :closable="false">
+    <el-alert :closable="false" title="menu 1-2" type="success">
       <router-view />
     </el-alert>
   </div>

src/views/nested/menu1/menu1-2/menu1-2-1/index.vue

@@ -1,5 +1,5 @@
 <template functional>
   <div style="padding:30px;">
-    <el-alert title="menu 1-2-1" type="warning" :closable="false" />
+    <el-alert :closable="false" title="menu 1-2-1" type="warning" />
   </div>
 </template>

src/views/nested/menu1/menu1-2/menu1-2-2/index.vue

@@ -1,5 +1,5 @@
 <template functional>
   <div style="padding:30px;">
-    <el-alert title="menu 1-2-2" type="warning" :closable="false" />
+    <el-alert :closable="false" title="menu 1-2-2" type="warning" />
   </div>
 </template>

src/views/nested/menu1/menu1-3/index.vue

@@ -1,5 +1,5 @@
 <template functional>
   <div style="padding:30px;">
-    <el-alert title="menu 1-3" type="success" :closable="false" />
+    <el-alert :closable="false" title="menu 1-3" type="success" />
   </div>
 </template>

src/views/nested/menu2/index.vue

@@ -1,5 +1,5 @@
 <template>
   <div style="padding:30px;">
-    <el-alert title="menu 2" :closable="false" />
+    <el-alert :closable="false" title="menu 2" />
   </div>
 </template>

src/views/table/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="app-container">
     <el-table
-      :data="list"
       v-loading="listLoading"
+      :data="list"
       element-loading-text="Loading"
       border
       fit
       highlight-current-row>
-      <el-table-column align="center" label='ID' width="95">
+      <el-table-column align="center" label="ID" width="95">
         <template slot-scope="scope">
           {{ scope.$index }}
         </template>
@@ -46,12 +46,6 @@
 import { getList } from '@/api/table'
 
 export default {
-  data() {
-    return {
-      list: null,
-      listLoading: true
-    }
-  },
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -62,6 +56,12 @@ export default {
       return statusMap[status]
     }
   },
+  data() {
+    return {
+      list: null,
+      listLoading: true
+    }
+  },
   created() {
     this.fetchData()
   },

src/views/tree/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="app-container">
-    <el-input placeholder="Filter keyword" v-model="filterText" style="margin-bottom:30px;" />
+    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
 
     <el-tree
-      class="filter-tree"
+      ref="tree2"
       :data="data2"
       :props="defaultProps"
-      default-expand-all
       :filter-node-method="filterNode"
-      ref="tree2"
+      class="filter-tree"
+      default-expand-all
     />
 
   </div>
@@ -16,18 +16,6 @@
 
 <script>
 export default {
-  watch: {
-    filterText(val) {
-      this.$refs.tree2.filter(val)
-    }
-  },
-
-  methods: {
-    filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
-    }
-  },
 
   data() {
     return {
@@ -72,6 +60,18 @@ export default {
         label: 'label'
       }
     }
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree2.filter(val)
+    }
+  },
+
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    }
   }
 }
 </script>