refactor

.eslintrc.js

@@ -6,7 +6,8 @@ module.exports = {
     },
     env: {
         browser: true,
-        node: true
+        node: true,
+        es6: true,
     },
     extends: 'eslint:recommended',
     // required to lint *.vue files
@@ -22,297 +23,122 @@ module.exports = {
         }
     },
     // add your custom rules here
+    //it is base on https://github.com/vuejs/eslint-config-vue
     'rules': {
-        // don't require .vue extension when importing
-        // 'import/extensions': ['error', 'always', {
-        //     'js': 'never',
-        //     'vue': 'never'
-        // }],
-        // allow debugger during development
-        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-        /*
-         * Possible Errors
-         */
-
-        // disallow unnecessary parentheses
-        'no-extra-parens': ['error', 'all', {'nestedBinaryExpressions': false}],
-
-        // disallow negating the left operand of relational operators
-        'no-unsafe-negation': 'error',
-
-        // enforce valid JSDoc comments
-        'valid-jsdoc': 'off',
-
-        /*
-         * Best Practices
-         */
-
-        // enforce return statements in callbacks of array methods
-        'array-callback-return': 'error',
-
-        // enforce consistent brace style for all control statements
-        curly: ['error', 'multi-line'],
-
-        // enforce consistent newlines before and after dots
-        'dot-location': ['error', 'property'],
-
-        // enforce dot notation whenever possible
-        'dot-notation': 'error',
-
-        // require the use of === and !==
-        'eqeqeq': ['error', 'smart'],
-
-        // disallow the use of arguments.caller or arguments.callee
-        'no-caller': 'error',
-
-        // disallow empty functions
-        'no-empty-function': 'error',
-
-        // disallow unnecessary calls to .bind()
-        'no-extra-bind': 'error',
-
-        // disallow unnecessary labels
-        'no-extra-label': 'error',
-
-        // disallow leading or trailing decimal points in numeric literals
-        'no-floating-decimal': 'error',
-
-        // disallow assignments to native objects or read-only global variables
-        'no-global-assign': 'error',
-
-        // disallow the use of eval()-like methods
-        'no-implied-eval': 'error',
-
-        // disallow the use of the __iterator__ property
-        'no-iterator': 'error',
-
-        // disallow unnecessary nested blocks
-        'no-lone-blocks': 'error',
-
-        // disallow multiple spaces
-        'no-multi-spaces': 'error',
-
-        // disallow new operators with the String, Number, and Boolean objects
-        'no-new-wrappers': 'error',
-
-        // disallow octal escape sequences in string literals
-        'no-octal-escape': 'error',
-
-        // disallow the use of the __proto__ property
-        'no-proto': 'error',
-
-        // disallow comparisons where both sides are exactly the same
-        'no-self-compare': 'error',
-
-        // disallow throwing literals as exceptions
-        'no-throw-literal': 'error',
-
-        // disallow unused expressions
-        'no-unused-expressions': 'error',
-
-        // disallow unnecessary calls to .call() and .apply()
-        'no-useless-call': 'error',
-
-        // disallow unnecessary concatenation of literals or template literals
-        'no-useless-concat': 'error',
-
-        // disallow unnecessary escape characters
-        'no-useless-escape': 'error',
-
-        // disallow void operators
-        'no-void': 'error',
-
-        // require parentheses around immediate function invocations
-        'wrap-iife': 'error',
-
-        // require or disallow “Yoda” conditions
-        yoda: 'error',
-
-        /*
-         * Variables
-         */
-
-        // disallow labels that share a name with a variable
-        'no-label-var': 'error',
-
-        // disallow initializing variables to undefined
-        'no-undef-init': 'error',
-        'no-undef': 'off',
-        // disallow the use of variables before they are defined
-        'no-use-before-define': 'error',
-
-        /*
-         * Node.js and CommonJS
-         */
-
-        // disallow new operators with calls to require
-        'no-new-require': 'error',
-
-        /*
-         * Stylistic Issues
-         */
-
-        // enforce consistent spacing inside array brackets
-        'array-bracket-spacing': 'error',
-
-        // enforce consistent spacing inside single-line blocks
-        'block-spacing': 'error',
-
-        // enforce consistent brace style for blocks
-        'brace-style': ['error', '1tbs', {'allowSingleLine': true}],
-
-        // require or disallow trailing commas
-        'comma-dangle': 'error',
-
-        // enforce consistent spacing before and after commas
-        'comma-spacing': 'error',
-
-        // enforce consistent comma style
-        'comma-style': 'error',
-
-        // enforce consistent spacing inside computed property brackets
-        'computed-property-spacing': 'error',
-
-        // require or disallow spacing between function identifiers and their invocations
-        'func-call-spacing': 'error',
-
-        // enforce consistent indentation
-        indent: ['error', 2, {SwitchCase: 1}],
-
-        // enforce the consistent use of either double or single quotes in JSX attributes
-        'jsx-quotes': 'error',
-
-        // enforce consistent spacing between keys and values in object literal properties
-        'key-spacing': 'error',
-
-        // enforce consistent spacing before and after keywords
-        'keyword-spacing': 'error',
-
-        // enforce consistent linebreak style
-        'linebreak-style': 'error',
-
-        // require or disallow newlines around directives
-        'lines-around-directive': 'error',
-
-        // require constructor names to begin with a capital letter
-        'new-cap': 'off',
-
-        // require parentheses when invoking a constructor with no arguments
-        'new-parens': 'error',
-
-        // disallow Array constructors
-        'no-array-constructor': 'error',
-
-        // disallow Object constructors
-        'no-new-object': 'error',
-
-        // disallow trailing whitespace at the end of lines
-        'no-trailing-spaces': 'error',
-
-        // disallow ternary operators when simpler alternatives exist
-        'no-unneeded-ternary': 'error',
-
-        // disallow whitespace before properties
-        'no-whitespace-before-property': 'error',
-
-        // enforce consistent spacing inside braces
-        'object-curly-spacing': ['error', 'always'],
-
-        // require or disallow padding within blocks
-        'padded-blocks': ['error', 'never'],
-
-        // require quotes around object literal property names
-        'quote-props': ['error', 'as-needed'],
-
-        // enforce the consistent use of either backticks, double, or single quotes
-        quotes: ['error', 'single'],
-
-        // enforce consistent spacing before and after semicolons
-        'semi-spacing': 'error',
-
-        // require or disallow semicolons instead of ASI
-        // semi: ['error', 'never'],
-
-        // enforce consistent spacing before blocks
-        'space-before-blocks': 'error',
-
+        'accessor-pairs': 2,
+        'arrow-spacing': [2, { 'before': true, 'after': true }],
+        'block-spacing': [2, 'always'],
+        'brace-style': [2, '1tbs', { 'allowSingleLine': true }],
+        'camelcase': [0, { 'properties': 'always' }],
+        'comma-dangle': [2, 'never'],
+        'comma-spacing': [2, { 'before': false, 'after': true }],
+        'comma-style': [2, 'last'],
+        'constructor-super': 2,
+        'curly': [2, 'multi-line'],
+        'dot-location': [2, 'property'],
+        'eol-last': 2,
+        'eqeqeq': [2, 'allow-null'],
+        'generator-star-spacing': [2, { 'before': true, 'after': true }],
+        'handle-callback-err': [2, '^(err|error)$' ],
+        'indent': [2, 2, { 'SwitchCase': 1 }],
+        'jsx-quotes': [2, 'prefer-single'],
+        'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }],
+        'keyword-spacing': [2, { 'before': true, 'after': true }],
+        'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }],
+        'new-parens': 2,
+        'no-array-constructor': 2,
+        'no-caller': 2,
         'no-console': 'off',
-
-        // enforce consistent spacing before function definition opening parenthesis
-        'space-before-function-paren': ['error', 'never'],
-
-        // enforce consistent spacing inside parentheses
-        'space-in-parens': 'error',
-
-        // require spacing around infix operators
-        'space-infix-ops': 'error',
-
-        // enforce consistent spacing before or after unary operators
-        'space-unary-ops': 'error',
-
-        // enforce consistent spacing after the // or /* in a comment
-        'spaced-comment': 'error',
-
-        // require or disallow Unicode byte order mark (BOM)
-        'unicode-bom': 'error',
-
-
-        /*
-         * ECMAScript 6
-         */
-
-        // require braces around arrow function bodies
-        'arrow-body-style': 'error',
-
-        // require parentheses around arrow function arguments
-        'arrow-parens': ['error', 'as-needed'],
-
-        // enforce consistent spacing before and after the arrow in arrow functions
-        'arrow-spacing': 'error',
-
-        // enforce consistent spacing around * operators in generator functions
-        'generator-star-spacing': ['error', 'after'],
-
-        // disallow duplicate module imports
-        'no-duplicate-imports': 'error',
-
-        // disallow unnecessary computed property keys in object literals
-        'no-useless-computed-key': 'error',
-
-        // disallow unnecessary constructors
-        'no-useless-constructor': 'error',
-
-        // disallow renaming import, export, and destructured assignments to the same name
-        'no-useless-rename': 'error',
-
-        // require let or const instead of var
-        'no-var': 'error',
-
-        // require or disallow method and property shorthand syntax for object literals
-        'object-shorthand': 'error',
-
-        // require arrow functions as callbacks
-        'prefer-arrow-callback': 'error',
-
-        // require const declarations for variables that are never reassigned after declared
-        'prefer-const': 'error',
-
-        // disallow parseInt() in favor of binary, octal, and hexadecimal literals
-        'prefer-numeric-literals': 'error',
-
-        // require rest parameters instead of arguments
-        'prefer-rest-params': 'error',
-
-        // require spread operators instead of .apply()
-        'prefer-spread': 'error',
-
-        // enforce spacing between rest and spread operators and their expressions
-        'rest-spread-spacing': 'error',
-
-        // require or disallow spacing around embedded expressions of template strings
-        'template-curly-spacing': 'error',
-
-        // require or disallow spacing around the * in yield* expressions
-        'yield-star-spacing': 'error'
+        'no-class-assign': 2,
+        'no-cond-assign': 2,
+        'no-const-assign': 2,
+        'no-control-regex': 2,
+        'no-delete-var': 2,
+        'no-dupe-args': 2,
+        'no-dupe-class-members': 2,
+        'no-dupe-keys': 2,
+        'no-duplicate-case': 2,
+        'no-empty-character-class': 2,
+        'no-empty-pattern': 2,
+        'no-eval': 2,
+        'no-ex-assign': 2,
+        'no-extend-native': 2,
+        'no-extra-bind': 2,
+        'no-extra-boolean-cast': 2,
+        'no-extra-parens': [2, 'functions'],
+        'no-fallthrough': 2,
+        'no-floating-decimal': 2,
+        'no-func-assign': 2,
+        'no-implied-eval': 2,
+        'no-inner-declarations': [2, 'functions'],
+        'no-invalid-regexp': 2,
+        'no-irregular-whitespace': 2,
+        'no-iterator': 2,
+        'no-label-var': 2,
+        'no-labels': [2, { 'allowLoop': false, 'allowSwitch': false }],
+        'no-lone-blocks': 2,
+        'no-mixed-spaces-and-tabs': 2,
+        'no-multi-spaces': 2,
+        'no-multi-str': 2,
+        'no-multiple-empty-lines': [2, { 'max': 1 }],
+        'no-native-reassign': 2,
+        'no-negated-in-lhs': 2,
+        'no-new-object': 2,
+        'no-new-require': 2,
+        'no-new-symbol': 2,
+        'no-new-wrappers': 2,
+        'no-obj-calls': 2,
+        'no-octal': 2,
+        'no-octal-escape': 2,
+        'no-path-concat': 2,
+        'no-proto': 2,
+        'no-redeclare': 2,
+        'no-regex-spaces': 2,
+        'no-return-assign': [2, 'except-parens'],
+        'no-self-assign': 2,
+        'no-self-compare': 2,
+        'no-sequences': 2,
+        'no-shadow-restricted-names': 2,
+        'no-spaced-func': 2,
+        'no-sparse-arrays': 2,
+        'no-this-before-super': 2,
+        'no-throw-literal': 2,
+        'no-trailing-spaces': 2,
+        'no-undef': 2,
+        'no-undef-init': 2,
+        'no-unexpected-multiline': 2,
+        'no-unmodified-loop-condition': 2,
+        'no-unneeded-ternary': [2, { 'defaultAssignment': false }],
+        'no-unreachable': 2,
+        'no-unsafe-finally': 2,
+        'no-unused-vars': [2, { 'vars': 'all', 'args': 'none' }],
+        'no-useless-call': 2,
+        'no-useless-computed-key': 2,
+        'no-useless-constructor': 2,
+        'no-useless-escape': 0,
+        'no-whitespace-before-property': 2,
+        'no-with': 2,
+        'one-var': [2, { 'initialized': 'never' }],
+        'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }],
+        'padded-blocks': [2, 'never'],
+        'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }],
+        'semi': [2, 'never'],
+        'semi-spacing': [2, { 'before': false, 'after': true }],
+        'space-before-blocks': [2, 'always'],
+        'space-before-function-paren': [2, 'never'],
+        'space-in-parens': [2, 'never'],
+        'space-infix-ops': 2,
+        'space-unary-ops': [2, { 'words': true, 'nonwords': false }],
+        'spaced-comment': [2, 'always', { 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }],
+        'template-curly-spacing': [2, 'never'],
+        'use-isnan': 2,
+        'valid-typeof': 2,
+        'wrap-iife': [2, 'any'],
+        'yield-star-spacing': [2, 'both'],
+        'yoda': [2, 'never'],
+        'prefer-const': 2,
+        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+        'object-curly-spacing': [2, 'always', { objectsInObjects: false }],
+        'array-bracket-spacing': [2, 'never']
     }
 }

build/webpack.base.conf.js

@@ -47,9 +47,18 @@ module.exports = {
         include: [resolve('src'), resolve('test')]
       },
       {
+        test: /\.svg$/,
+        loader: 'svg-sprite-loader',
+        include: [resolve('src/icons')],
+        options: {
+          symbolId: 'icon-[name]'
+        }
+      },
+      {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         loader: 'url-loader',
-        options: {
+        exclude: [resolve('src/icons')],
+        query: {
           limit: 10000,
           name: utils.assetsPath('img/[name].[hash:7].[ext]')
         }

package.json

@@ -12,12 +12,12 @@
   },
   "dependencies": {
     "axios": "0.16.2",
-    "element-ui": "1.3.7",
-    "js-cookie": "^2.1.4",
-    "normalize.css": "3.0.2",
-    "nprogress": "^0.2.0",
-    "vue": "2.3.3",
-    "vue-router": "2.5.3",
+    "element-ui": "1.4.3",
+    "js-cookie": "2.1.4",
+    "normalize.css": "7.0.0",
+    "nprogress": "0.2.0",
+    "vue": "2.4.2",
+    "vue-router": "2.7.0",
     "vuex": "2.3.1"
   },
   "devDependencies": {
@@ -53,10 +53,11 @@
     "rimraf": "2.6.0",
     "node-sass": "^4.5.0",
     "sass-loader": "6.0.5",
+    "svg-sprite-loader": "3.2.4",
     "url-loader": "0.5.8",
-    "vue-loader": "12.1.0",
+    "vue-loader": "13.0.4",
     "vue-style-loader": "3.0.1",
-    "vue-template-compiler": "2.3.3",
+    "vue-template-compiler": "2.4.2",
     "webpack": "2.6.1",
     "webpack-dev-middleware": "1.10.0",
     "webpack-hot-middleware": "2.18.0",

src/App.vue

@@ -9,8 +9,8 @@ export default {
   name: 'app'
 }
 </script>
+
 <style lang="scss">
+  @import '~normalize.css/normalize.css';// normalize.css 样式格式化
   @import './styles/index.scss'; // 全局自定义的css样式
 </style>
-
-

src/api/login.js

@@ -1,4 +1,4 @@
-import fetch from '@/utils/fetch';
+import fetch from '@/utils/fetch'
 
 export function login(email, password) {
   return fetch({
@@ -8,7 +8,7 @@ export function login(email, password) {
       email,
       password
     }
-  });
+  })
 }
 
 export function getInfo(token) {
@@ -16,15 +16,12 @@ export function getInfo(token) {
     url: '/user/info',
     method: 'get',
     params: { token }
-  });
+  })
 }
 
 export function logout() {
   return fetch({
     url: '/user/logout',
     method: 'post'
-  });
+  })
 }
-
-
-

src/api/table.js

@@ -1,11 +1,9 @@
-import fetch from '@/utils/fetch';
+import fetch from '@/utils/fetch'
 
 export function getList(params) {
   return fetch({
     url: '/table/list',
     method: 'get',
     params
-  });
+  })
 }
-
-

src/components/Hamburger/index.vue

@@ -1,32 +1,31 @@
 <template>
-    <div>
-        <svg t="1492500959545" @click="toggleClick" class="svg-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
-            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64"
-            height="64">
-            <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
-                p-id="1692"></path>
-            <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
-                p-id="1693"></path>
-            <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
-                p-id="1694"></path>
-        </svg>
-    </div>
+  <div>
+    <svg t="1492500959545" @click="toggleClick" class="svg-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
+      version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
+      <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
+        p-id="1692"></path>
+      <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
+        p-id="1693"></path>
+      <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
+        p-id="1694"></path>
+    </svg>
+  </div>
 </template>
 
 <script>
-    export default {
-      name: 'hamburger',
-      props: {
-        isActive: {
-          type: Boolean,
-          default: false
-        },
-        toggleClick: {
-          type: Function,
-          default: null
-        }
-      }
+export default {
+  name: 'hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    },
+    toggleClick: {
+      type: Function,
+      default: null
     }
+  }
+}
 </script>
 
 <style scoped>

src/icons/index.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import IconSvg from '@/components/Icon-svg'// svg组件
+
+// register globally
+Vue.component('icon-svg', IconSvg)
+
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+const req = require.context('./svg', false, /\.svg$/)
+requireAll(req)

src/main.js

@@ -1,55 +1,15 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-default/index.css'
 import App from './App'
 import router from './router'
 import store from './store'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-default/index.css'
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
-import 'normalize.css/normalize.css'
-import '@/assets/iconfont/iconfont'
-import IconSvg from '@/components/Icon-svg/index.vue'
-import { getToken } from '@/utils/auth'
+import '@/icons' // icon
+import '@/permission' // 权限
 
-Vue.config.productionTip = false
-
-Vue.use(ElementUI);
-Vue.component('icon-svg', IconSvg)
+Vue.use(ElementUI)
 
-const whiteList = ['/login'];
-router.beforeEach((to, from, next) => {
-  NProgress.start();
-  if (getToken()) {
-    if (to.path === '/login') {
-      next({ path: '/' });
-    } else {
-      if (store.getters.roles.length === 0) {
-        store.dispatch('GetInfo').then(res => {
-          const roles = res.data.role;
-          store.dispatch('GenerateRoutes', { roles }).then(() => {
-            router.addRoutes(store.getters.addRouters);
-            next({ ...to });
-          })
-        })
-      } else {
-        next();
-      }
-    }
-  } else {
-    if (whiteList.indexOf(to.path) !== -1) {
-      next()
-    } else {
-      next('/login');
-      NProgress.done();
-    }
-  }
-});
-
-router.afterEach(() => {
-  NProgress.done();
-});
+Vue.config.productionTip = false
 
 new Vue({
   el: '#app',

src/permission.js

@@ -0,0 +1,38 @@
+import router from './router'
+import store from './store'
+import NProgress from 'nprogress' // Progress 进度条
+import 'nprogress/nprogress.css'// Progress 进度条样式
+import { getToken } from '@/utils/auth' // 验权
+
+const whiteList = ['/login']
+router.beforeEach((to, from, next) => {
+  NProgress.start()
+  if (getToken()) {
+    if (to.path === '/login') {
+      next({ path: '/' })
+    } else {
+      if (store.getters.roles.length === 0) {
+        store.dispatch('GetInfo').then(res => {
+          const roles = res.data.role
+          store.dispatch('GenerateRoutes', { roles }).then(() => {
+            router.addRoutes(store.getters.addRouters)
+            next({ ...to })
+          })
+        })
+      } else {
+        next()
+      }
+    }
+  } else {
+    if (whiteList.indexOf(to.path) !== -1) {
+      next()
+    } else {
+      next('/login')
+      NProgress.done()
+    }
+  }
+})
+
+router.afterEach(() => {
+  NProgress.done() // 结束Progress
+})

src/router/_import_development.js

@@ -1 +1 @@
-module.exports = file => require('@/views/' + file + '.vue')
+module.exports = file => require('@/views/' + file + '.vue').default

src/router/index.js

@@ -1,25 +1,25 @@
-import Vue from 'vue';
-import Router from 'vue-router';
-const _import = require('./_import_' + process.env.NODE_ENV);
-// in development env not use Lazy Loading,because Lazy Loading large page will cause webpack hot update too slow.so only in production use Lazy Loading
+import Vue from 'vue'
+import Router from 'vue-router'
+const _import = require('./_import_' + process.env.NODE_ENV)
+// in development env not use Lazy Loading,because Lazy Loading too many pages will cause webpack hot update too slow.so only in production use Lazy Loading
 
 /* layout */
-import Layout from '../views/layout/Layout';
+import Layout from '../views/layout/Layout'
 
 /* login */
-const Login = _import('login/index');
+const Login = _import('login/index')
 
 /* dashboard */
-const dashboard = _import('dashboard/index');
+const dashboard = _import('dashboard/index')
 
 /* error page */
-const Err404 = _import('404');
+const Err404 = _import('404')
 
 /* demo page */
-const Form = _import('page/form');
-const Table = _import('table/index');
+const Form = _import('page/form')
+const Table = _import('table/index')
 
-Vue.use(Router);
+Vue.use(Router)
 
  /**
   * icon : the icon show in the sidebar
@@ -45,7 +45,7 @@ export default new Router({
   // mode: 'history', //后端支持可开
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRouterMap
-});
+})
 
 export const asyncRouterMap = [
   {
@@ -63,10 +63,10 @@ export const asyncRouterMap = [
     path: '/table',
     component: Layout,
     redirect: '/table/index',
-    icon: 'tubiaoleixingzhengchang',
+    icon: 'tubiao',
     noDropdown: true,
-    children: [{ path: 'index', component: Table, name: 'Table', meta: { role: ['admin'] } }]
+    children: [{ path: 'index', component: Table, name: 'Table', meta: { role: ['admin'] }}]
   },
 
   { path: '*', redirect: '/404', hidden: true }
-];
+]

src/store/getters.js

@@ -6,5 +6,5 @@ const getters = {
   roles: state => state.user.roles,
   permission_routers: state => state.permission.routers,
   addRouters: state => state.permission.addRouters
-};
+}
 export default getters

src/store/index.js

@@ -1,11 +1,11 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import app from './modules/app';
-import user from './modules/user';
-import permission from './modules/permission';
-import getters from './getters';
+import Vue from 'vue'
+import Vuex from 'vuex'
+import app from './modules/app'
+import user from './modules/user'
+import permission from './modules/permission'
+import getters from './getters'
 
-Vue.use(Vuex);
+Vue.use(Vuex)
 
 const store = new Vuex.Store({
   modules: {
@@ -14,6 +14,6 @@ const store = new Vuex.Store({
     permission
   },
   getters
-});
+})
 
 export default store

src/store/modules/app.js

@@ -1,4 +1,4 @@
-import Cookies from 'js-cookie';
+import Cookies from 'js-cookie'
 
 const app = {
   state: {
@@ -9,11 +9,11 @@ const app = {
   mutations: {
     TOGGLE_SIDEBAR: state => {
       if (state.sidebar.opened) {
-        Cookies.set('sidebarStatus', 1);
+        Cookies.set('sidebarStatus', 1)
       } else {
-        Cookies.set('sidebarStatus', 0);
+        Cookies.set('sidebarStatus', 0)
       }
-      state.sidebar.opened = !state.sidebar.opened;
+      state.sidebar.opened = !state.sidebar.opened
     }
   },
   actions: {
@@ -21,6 +21,6 @@ const app = {
       commit('TOGGLE_SIDEBAR')
     }
   }
-};
+}
 
-export default app;
+export default app

src/store/modules/permission.js

@@ -1,4 +1,4 @@
-import { asyncRouterMap, constantRouterMap } from '@/router/index';
+import { asyncRouterMap, constantRouterMap } from '@/router/index'
 
 /**
  * 通过meta.role判断是否与当前用户权限匹配
@@ -38,8 +38,8 @@ const permission = {
   },
   mutations: {
     SET_ROUTERS: (state, routers) => {
-      state.addRouters = routers;
-      state.routers = constantRouterMap.concat(routers);
+      state.addRouters = routers
+      state.routers = constantRouterMap.concat(routers)
     }
   },
   actions: {
@@ -52,11 +52,11 @@ const permission = {
         } else {
           accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
         }
-        commit('SET_ROUTERS', accessedRouters);
-        resolve();
+        commit('SET_ROUTERS', accessedRouters)
+        resolve()
       })
     }
   }
-};
+}
 
-export default permission;
+export default permission

src/store/modules/user.js

@@ -1,5 +1,5 @@
-import { login, logout, getInfo } from '@/api/login';
-import { getToken, setToken, removeToken } from '@/utils/auth';
+import { login, logout, getInfo } from '@/api/login'
+import { getToken, setToken, removeToken } from '@/utils/auth'
 
 const user = {
   state: {
@@ -11,74 +11,73 @@ const user = {
 
   mutations: {
     SET_TOKEN: (state, token) => {
-      state.token = token;
+      state.token = token
     },
     SET_NAME: (state, name) => {
-      state.name = name;
+      state.name = name
     },
     SET_AVATAR: (state, avatar) => {
-      state.avatar = avatar;
+      state.avatar = avatar
     },
     SET_ROLES: (state, roles) => {
-      state.roles = roles;
+      state.roles = roles
     }
   },
 
   actions: {
     // 登录
     Login({ commit }, userInfo) {
-      const email = userInfo.email.trim();
+      const email = userInfo.email.trim()
       return new Promise((resolve, reject) => {
         login(email, userInfo.password).then(response => {
-          const data = response.data;
-          setToken(data.token);
-          commit('SET_TOKEN', data.token);
-          resolve();
+          const data = response.data
+          setToken(data.token)
+          commit('SET_TOKEN', data.token)
+          resolve()
         }).catch(error => {
-          reject(error);
-        });
-      });
+          reject(error)
+        })
+      })
     },
 
-
     // 获取用户信息
     GetInfo({ commit, state }) {
       return new Promise((resolve, reject) => {
         getInfo(state.token).then(response => {
-          const data = response.data;
-          commit('SET_ROLES', data.role);
-          commit('SET_NAME', data.name);
-          commit('SET_AVATAR', data.avatar);
-          resolve(response);
+          const data = response.data
+          commit('SET_ROLES', data.role)
+          commit('SET_NAME', data.name)
+          commit('SET_AVATAR', data.avatar)
+          resolve(response)
         }).catch(error => {
-          reject(error);
-        });
-      });
+          reject(error)
+        })
+      })
     },
 
     // 登出
     LogOut({ commit, state }) {
       return new Promise((resolve, reject) => {
         logout(state.token).then(() => {
-          commit('SET_TOKEN', '');
-          commit('SET_ROLES', []);
-          removeToken();
-          resolve();
+          commit('SET_TOKEN', '')
+          commit('SET_ROLES', [])
+          removeToken()
+          resolve()
         }).catch(error => {
-          reject(error);
-        });
-      });
+          reject(error)
+        })
+      })
     },
 
     // 前端 登出
     FedLogOut({ commit }) {
       return new Promise(resolve => {
-        commit('SET_TOKEN', '');
-        removeToken();
-        resolve();
-      });
+        commit('SET_TOKEN', '')
+        removeToken()
+        resolve()
+      })
     }
   }
-};
+}
 
-export default user;
+export default user

src/utils/fetch.js

@@ -1,25 +1,24 @@
-import axios from 'axios';
-import { Message } from 'element-ui';
-import store from '../store';
-import { getToken } from '@/utils/auth';
-
+import axios from 'axios'
+import { Message } from 'element-ui'
+import store from '../store'
+import { getToken } from '@/utils/auth'
 
 // 创建axios实例
 const service = axios.create({
   baseURL: process.env.BASE_API, // api的base_url
   timeout: 15000                  // 请求超时时间
-});
+})
 
 // request拦截器
 service.interceptors.request.use(config => {
   if (store.getters.token) {
-    config.headers['X-Token'] = getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
+    config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
   }
-  return config;
+  return config
 }, error => {
   // Do something with request error
-  console.log(error); // for debug
-  Promise.reject(error);
+  console.log(error) // for debug
+  Promise.reject(error)
 })
 
 // respone拦截器
@@ -28,13 +27,13 @@ service.interceptors.response.use(
   /**
   * code为非20000是抛错 可结合自己业务进行修改
   */
-    const res = response.data;
+    const res = response.data
     if (res.code !== 20000) {
       Message({
         message: res.data,
         type: 'error',
         duration: 5 * 1000
-      });
+      })
 
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
@@ -44,24 +43,24 @@ service.interceptors.response.use(
           type: 'warning'
         }).then(() => {
           store.dispatch('FedLogOut').then(() => {
-            location.reload();// 为了重新实例化vue-router对象 避免bug
-          });
+            location.reload()// 为了重新实例化vue-router对象 避免bug
+          })
         })
       }
-      return Promise.reject('error');
+      return Promise.reject('error')
     } else {
-      return response.data;
+      return response.data
     }
   },
   error => {
-    console.log('err' + error);// for debug
+    console.log('err' + error)// for debug
     Message({
       message: error.message,
       type: 'error',
       duration: 5 * 1000
-    });
-    return Promise.reject(error);
+    })
+    return Promise.reject(error)
   }
 )
 
-export default service;
+export default service

src/utils/index.js

@@ -4,15 +4,15 @@
 
  export function parseTime(time, cFormat) {
    if (arguments.length === 0) {
-     return null;
+     return null
    }
-   const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
-   let date;
-   if (typeof time == 'object') {
-     date = time;
+   const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+   let date
+   if (typeof time === 'object') {
+     date = time
    } else {
-     if (('' + time).length === 10) time = parseInt(time) * 1000;
-     date = new Date(time);
+     if (('' + time).length === 10) time = parseInt(time) * 1000
+     date = new Date(time)
    }
    const formatObj = {
      y: date.getFullYear(),
@@ -22,24 +22,24 @@
      i: date.getMinutes(),
      s: date.getSeconds(),
      a: date.getDay()
-   };
+   }
    const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
-     let value = formatObj[key];
-     if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1];
+     let value = formatObj[key]
+     if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
      if (result.length > 0 && value < 10) {
-       value = '0' + value;
+       value = '0' + value
      }
-     return value || 0;
-   });
-   return time_str;
+     return value || 0
+   })
+   return time_str
  }
 
  export function formatTime(time, option) {
-   time = +time * 1000;
-   const d = new Date(time);
-   const now = Date.now();
+   time = +time * 1000
+   const d = new Date(time)
+   const now = Date.now()
 
-   const diff = (now - d) / 1000;
+   const diff = (now - d) / 1000
 
    if (diff < 30) {
      return '刚刚'

src/utils/validate.js

@@ -4,32 +4,31 @@
 
 /* 是否是公司邮箱*/
 export function isWscnEmail(str) {
-  const reg = /^[a-z0-9](?:[-_.+]?[a-z0-9]+)*@wallstreetcn\.com$/i;
-  return reg.test(str.trim());
+  const reg = /^[a-z0-9](?:[-_.+]?[a-z0-9]+)*@wallstreetcn\.com$/i
+  return reg.test(str.trim())
 }
 
 /* 合法uri*/
 export function validateURL(textval) {
-  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
-  return urlregex.test(textval);
+  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  return urlregex.test(textval)
 }
 
 /* 小写字母*/
 export function validateLowerCase(str) {
-  const reg = /^[a-z]+$/;
-  return reg.test(str);
+  const reg = /^[a-z]+$/
+  return reg.test(str)
 }
 
 /* 大写字母*/
 export function validateUpperCase(str) {
-  const reg = /^[A-Z]+$/;
-  return reg.test(str);
+  const reg = /^[A-Z]+$/
+  return reg.test(str)
 }
 
 /* 大小写字母*/
 export function validatAlphabets(str) {
-  const reg = /^[A-Za-z]+$/;
-  return reg.test(str);
+  const reg = /^[A-Za-z]+$/
+  return reg.test(str)
 }
 
-

src/views/dashboard/index.vue

@@ -6,19 +6,19 @@
 </template>
 
 <script>
-    import { mapGetters } from 'vuex';
-    export default {
-      name: 'dashboard',
-      computed: {
-        ...mapGetters([
-          'name',
-          'roles'
-        ])
-      }
-    }
+import { mapGetters } from 'vuex'
+export default {
+  name: 'dashboard',
+  computed: {
+    ...mapGetters([
+      'name',
+      'roles'
+    ])
+  }
+}
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style rel="stylesheet/scss" lang="scss" scoped>
 .dashboard {
   &-container {
     margin: 30px;

src/views/layout/AppMain.vue

@@ -1,18 +1,18 @@
 <template>
-    <section class="app-main">
-        <transition name="fade" mode="out-in">
-            <router-view :key="key"></router-view>
-        </transition>
-    </section>
+  <section class="app-main">
+    <transition name="fade" mode="out-in">
+      <router-view :key="key"></router-view>
+    </transition>
+  </section>
 </template>
 
 <script>
-    export default {
-      name: 'AppMain',
-      computed: {
-        key() {
-          return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
-        }
-      }
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
     }
+  }
+}
 </script>

src/views/layout/Layout.vue

@@ -1,31 +1,32 @@
 <template>
-    <div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
-        <div class="sidebar-wrapper">
-            <sidebar class="sidebar-container"></sidebar>
-        </div>
-        <div class="main-container">
-            <navbar></navbar>
-            <app-main></app-main>
-        </div>
+  <div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
+    <div class="sidebar-wrapper">
+      <sidebar class="sidebar-container"></sidebar>
     </div>
+    <div class="main-container">
+      <navbar></navbar>
+      <app-main></app-main>
+    </div>
+  </div>
 </template>
 
+
 <script>
-    import { Navbar, Sidebar, AppMain } from '@/views/layout';
+import { Navbar, Sidebar, AppMain } from '@/views/layout'
 
-    export default {
-      name: 'layout',
-      components: {
-        Navbar,
-        Sidebar,
-        AppMain
-      },
-      computed: {
-        sidebar() {
-          return this.$store.state.app.sidebar;
-        }
-      }
+export default {
+  name: 'layout',
+  components: {
+    Navbar,
+    Sidebar,
+    AppMain
+  },
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar
     }
+  }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>

src/views/layout/Levelbar.vue

@@ -1,6 +1,6 @@
 <template>
   <el-breadcrumb class="app-levelbar" separator="/">
-    <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item">
+    <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path">
       <router-link v-if='item.redirect==="noredirect"||index==levelList.length-1' to="" class="no-redirect">{{item.name}}</router-link>
       <router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>
     </el-breadcrumb-item>
@@ -8,42 +8,42 @@
 </template>
 
 <script>
-    export default {
-      created() {
-        this.getBreadcrumb()
-      },
-      data() {
-        return {
-          levelList: null
-        }
-      },
-      methods: {
-        getBreadcrumb() {
-          let matched = this.$route.matched.filter(item => item.name);
-          const first = matched[0];
-          if (first && (first.name !== '首页' || first.path !== '')) {
-            matched = [{ name: '首页', path: '/' }].concat(matched)
-          }
-          this.levelList = matched;
-        }
-      },
-      watch: {
-        $route() {
-          this.getBreadcrumb();
-        }
+export default {
+  created() {
+    this.getBreadcrumb()
+  },
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  methods: {
+    getBreadcrumb() {
+      let matched = this.$route.matched.filter(item => item.name)
+      const first = matched[0]
+      if (first && (first.name !== '首页' || first.path !== '')) {
+        matched = [{ name: '首页', path: '/' }].concat(matched)
       }
+      this.levelList = matched
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
     }
+  }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-    .app-levelbar.el-breadcrumb {
-      display: inline-block;
-      font-size: 14px;
-      line-height: 50px;
-      margin-left: 10px;
-      .no-redirect {
-        color: #97a8be;
-        cursor: text;
-      }
-    }
+.app-levelbar.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 10px;
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
 </style>

src/views/layout/Navbar.vue

@@ -1,51 +1,51 @@
 <template>
-    <el-menu class="navbar" mode="horizontal">
-        <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
-        <levelbar></levelbar>
-        <el-dropdown class="avatar-container" trigger="click">
-            <div class="avatar-wrapper">
-                <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
-                <i class="el-icon-caret-bottom"></i>
-            </div>
-            <el-dropdown-menu class="user-dropdown" slot="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></el-dropdown-item>
-            </el-dropdown-menu>
-        </el-dropdown>
-    </el-menu>
+  <el-menu class="navbar" mode="horizontal">
+    <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
+    <levelbar></levelbar>
+    <el-dropdown class="avatar-container" trigger="click">
+      <div class="avatar-wrapper">
+        <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
+        <i class="el-icon-caret-bottom"></i>
+      </div>
+      <el-dropdown-menu class="user-dropdown" slot="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></el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-menu>
 </template>
 
 <script>
-    import { mapGetters } from 'vuex';
-    import Levelbar from './Levelbar';
-    import Hamburger from '@/components/Hamburger';
+import { mapGetters } from 'vuex'
+import Levelbar from './Levelbar'
+import Hamburger from '@/components/Hamburger'
 
-    export default {
-      components: {
-        Levelbar,
-        Hamburger
-      },
-      computed: {
-        ...mapGetters([
-          'sidebar',
-          'avatar'
-        ])
-      },
-      methods: {
-        toggleSideBar() {
-          this.$store.dispatch('ToggleSideBar')
-        },
-        logout() {
-          this.$store.dispatch('LogOut').then(() => {
-            location.reload();  // 为了重新实例化vue-router对象 避免bug
-          });
-        }
-      }
+export default {
+  components: {
+    Levelbar,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload()  // 为了重新实例化vue-router对象 避免bug
+      })
     }
+  }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
@@ -95,5 +95,3 @@
     }
 </style>
 
-
-

src/views/layout/Sidebar.vue

@@ -1,25 +1,24 @@
 <template>
-    <el-menu mode="vertical" theme="dark" :default-active="$route.path">
-        <sidebar-item :routes='permission_routers'></sidebar-item>
-    </el-menu>
+  <el-menu mode="vertical" theme="dark" :default-active="$route.path">
+    <sidebar-item :routes='permission_routers'></sidebar-item>
+  </el-menu>
 </template>
 
 <script>
-    import { mapGetters } from 'vuex';
-    import SidebarItem from './SidebarItem';
-    export default {
-      components: { SidebarItem },
-      computed: {
-        ...mapGetters([
-          'permission_routers'
-        ])
-      }
-    }
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'permission_routers'
+    ])
+  }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 .el-menu {
-    min-height: 100%;
+  min-height: 100%;
 }
-
 </style>

src/views/layout/SidebarItem.vue

@@ -1,46 +1,46 @@
 <template>
-    <div>
-        <template v-for="item in routes">
-            <router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
-                <el-menu-item :index="item.path+'/'+item.children[0].path">
-                    <icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
-                </el-menu-item>
-            </router-link>
-            <el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
-                <template slot="title">
-                    <icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
-                </template>
-                <template v-for="child in item.children" v-if='!child.hidden'>
-                    <sidebar-item class='menu-indent' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
-                    <router-link v-else class="menu-indent" :to="item.path+'/'+child.path">
-                        <el-menu-item :index="item.path+'/'+child.path">
-                            {{child.name}}
-                        </el-menu-item>
-                    </router-link>
-                </template>
-            </el-submenu>
+  <div>
+    <template v-for="item in routes">
+      <router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
+        <el-menu-item :index="item.path+'/'+item.children[0].path">
+          <icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
+        </el-menu-item>
+      </router-link>
+      <el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
+        <template slot="title">
+          <icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
         </template>
-    </div>
+        <template v-for="child in item.children" v-if='!child.hidden'>
+          <sidebar-item class='menu-indent' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
+          <router-link v-else class="menu-indent" :to="item.path+'/'+child.path">
+            <el-menu-item :index="item.path+'/'+child.path">
+              {{child.name}}
+            </el-menu-item>
+          </router-link>
+        </template>
+      </el-submenu>
+    </template>
+  </div>
 </template>
 
 <script>
-    export default {
-      name: 'SidebarItem',
-      props: {
-        routes: {
-          type: Array
-        }
-      }
+export default {
+  name: 'SidebarItem',
+  props: {
+    routes: {
+      type: Array
     }
+  }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-    .svg-icon {
-        margin-right: 10px;
-    }
-    .hideSidebar .menu-indent{
-        display: block;
-        text-indent: 10px;
-    }
+.svg-icon {
+  margin-right: 10px;
+}
+.hideSidebar .menu-indent{
+  display: block;
+  text-indent: 10px;
+}
 </style>
 

src/views/layout/index.js

@@ -1,7 +1,7 @@
-export { default as Navbar } from './Navbar';
+export { default as Navbar } from './Navbar'
 
-export { default as Sidebar } from './Sidebar';
+export { default as Sidebar } from './Sidebar'
 
-export { default as Levelbar } from './Levelbar';
+export { default as Levelbar } from './Levelbar'
 
-export { default as AppMain } from './AppMain';
+export { default as AppMain } from './AppMain'

src/views/login/index.vue

@@ -5,14 +5,14 @@
       <h3 class="title">系统登录</h3>
       <el-form-item prop="email">
         <span class="svg-container">
-                  <icon-svg icon-class="jiedianyoujian"></icon-svg>
-                </span>
+          <icon-svg icon-class="email"></icon-svg>
+        </span>
         <el-input name="email" type="text" v-model="loginForm.email" autoComplete="on" placeholder="邮箱"></el-input>
       </el-form-item>
       <el-form-item prop="password">
         <span class="svg-container">
-                  <icon-svg icon-class="mima" ></icon-svg>
-                </span>
+          <icon-svg icon-class="mima" ></icon-svg>
+        </span>
         <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
           placeholder="密码"></el-input>
       </el-form-item>
@@ -28,60 +28,60 @@
 </template>
 
 <script>
-    import { isWscnEmail } from '@/utils/validate';
+import { isWscnEmail } from '@/utils/validate'
 
-    export default {
-      name: 'login',
-      data() {
-        const validateEmail = (rule, value, callback) => {
-          if (!isWscnEmail(value)) {
-            callback(new Error('请输入正确的合法邮箱'));
-          } else {
-            callback();
-          }
-        };
-        const validatePass = (rule, value, callback) => {
-          if (value.length < 6) {
-            callback(new Error('密码不能小于6位'));
-          } else {
-            callback();
-          }
-        };
-        return {
-          loginForm: {
-            email: 'admin@wallstreetcn.com',
-            password: '111111'
-          },
-          loginRules: {
-            email: [
+export default {
+  name: 'login',
+  data() {
+    const validateEmail = (rule, value, callback) => {
+      if (!isWscnEmail(value)) {
+        callback(new Error('请输入正确的合法邮箱'))
+      } else {
+        callback()
+      }
+    }
+    const validatePass = (rule, value, callback) => {
+      if (value.length < 6) {
+        callback(new Error('密码不能小于6位'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      loginForm: {
+        email: 'admin@wallstreetcn.com',
+        password: '111111'
+      },
+      loginRules: {
+        email: [
                 { required: true, trigger: 'blur', validator: validateEmail }
-            ],
-            password: [
+        ],
+        password: [
                 { required: true, trigger: 'blur', validator: validatePass }
-            ]
-          },
-          loading: false
-        }
+        ]
       },
-      methods: {
-        handleLogin() {
-          this.$refs.loginForm.validate(valid => {
-            if (valid) {
-              this.loading = true;
-              this.$store.dispatch('Login', this.loginForm).then(() => {
-                this.loading = false;
-                this.$router.push({ path: '/' });
-              }).catch(() => {
-                this.loading = false;
-              });
-            } else {
-              console.log('error submit!!');
-              return false;
-            }
-          });
+      loading: false
+    }
+  },
+  methods: {
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+          this.$store.dispatch('Login', this.loginForm).then(() => {
+            this.loading = false
+            this.$router.push({ path: '/' })
+          }).catch(() => {
+            this.loading = false
+          })
+        } else {
+          console.log('error submit!!')
+          return false
         }
-      }
+      })
     }
+  }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss">

src/views/page/form.vue

@@ -1,72 +1,72 @@
 <template>
-    <div class="app-container">
-        <el-form ref="form" :model="form" label-width="80px">
-            <el-form-item label="活动名称">
-                <el-input v-model="form.name"></el-input>
-            </el-form-item>
-            <el-form-item label="活动区域">
-                <el-select v-model="form.region" placeholder="请选择活动区域">
-                    <el-option label="区域一" value="shanghai"></el-option>
-                    <el-option label="区域二" value="beijing"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="活动时间">
-                <el-col :span="11">
-                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
-                </el-col>
-                <el-col class="line" :span="2">-</el-col>
-                <el-col :span="11">
-                    <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
-                </el-col>
-            </el-form-item>
-            <el-form-item label="即时配送">
-                <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
-            </el-form-item>
-            <el-form-item label="活动性质">
-                <el-checkbox-group v-model="form.type">
-                    <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
-                    <el-checkbox label="地推活动" name="type"></el-checkbox>
-                    <el-checkbox label="线下主题活动" name="type"></el-checkbox>
-                    <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
-                </el-checkbox-group>
-            </el-form-item>
-            <el-form-item label="特殊资源">
-                <el-radio-group v-model="form.resource">
-                    <el-radio label="线上品牌商赞助"></el-radio>
-                    <el-radio label="线下场地免费"></el-radio>
-                </el-radio-group>
-            </el-form-item>
-            <el-form-item label="活动形式">
-                <el-input type="textarea" v-model="form.desc"></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" @click="onSubmit">立即创建</el-button>
-                <el-button>取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="app-container">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="活动名称">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="活动区域">
+        <el-select v-model="form.region" placeholder="请选择活动区域">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="活动时间">
+        <el-col :span="11">
+          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
+        </el-col>
+        <el-col class="line" :span="2">-</el-col>
+        <el-col :span="11">
+          <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="即时配送">
+        <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
+      </el-form-item>
+      <el-form-item label="活动性质">
+        <el-checkbox-group v-model="form.type">
+          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
+          <el-checkbox label="地推活动" name="type"></el-checkbox>
+          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
+          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="特殊资源">
+        <el-radio-group v-model="form.resource">
+          <el-radio label="线上品牌商赞助"></el-radio>
+          <el-radio label="线下场地免费"></el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="活动形式">
+        <el-input type="textarea" v-model="form.desc"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">立即创建</el-button>
+        <el-button>取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        form: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        }
-      }
-    },
-    methods: {
-      onSubmit() {
-        console.log('submit!');
+export default {
+  data() {
+    return {
+      form: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: ''
       }
     }
+  },
+  methods: {
+    onSubmit() {
+      console.log('submit!')
+    }
   }
+}
 </script>

src/views/table/index.vue

@@ -33,26 +33,26 @@
 </template>
 
 <script>
-  import { getList } from '@/api/table';
+import { getList } from '@/api/table'
 
-  export default {
-    data() {
-      return {
-        list: null,
-        listLoading: true
-      }
-    },
-    created() {
-      this.fetchData();
-    },
-    methods: {
-      fetchData() {
-        this.listLoading = true;
-        getList(this.listQuery).then(response => {
-          this.list = response.data.items;
-          this.listLoading = false;
-        })
-      }
+export default {
+  data() {
+    return {
+      list: null,
+      listLoading: true
     }
-  };
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getList(this.listQuery).then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      })
+    }
+  }
+}
 </script>