Merge branch 'master' into unit-test

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
   parserOptions: {
+    parser: 'babel-eslint',
     sourceType: 'module'
   },
   env: {
@@ -10,22 +10,19 @@ module.exports = {
     es6: true,
     jest: true
   },
-  extends: 'eslint:recommended',
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
-  // required to lint *.vue files
+
-  plugins: [
-    'html'
-  ],
-  // check if imports actually resolve
-  'settings': {
-    'import/resolver': {
-      'webpack': {
-        'config': 'build/webpack.base.conf.js'
-      }
-    }
-  },
   // add your custom rules here
   //it is base on https://github.com/vuejs/eslint-config-vue
   rules: {
+    "vue/max-attributes-per-line": [2, {
+      "singleline": 10,
+      "multiline": {
+        "max": 1,
+        "allowFirstLine": false
+      }
+    }],
+    "vue/name-property-casing": ["error", "PascalCase"],
     'accessor-pairs': 2,
     'arrow-spacing': [2, {
       'before': true,
@@ -197,3 +194,4 @@ module.exports = {
     'array-bracket-spacing': [2, 'never']
   }
 }
+

README-zh.md

@@ -1,31 +1,36 @@
-# vueAdmin-template
+# vue-admin-template
 
-> 这是一个 极简的vue admin 管理后台 它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。
+> 这是一个 极简的 vue admin 管理后台 它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。
 
-[线上地址](http://panjiachen.github.io/vueAdmin-template)
+[线上地址](http://panjiachen.github.io/vue-admin-template)
+
+[国内访问](https://panjiachen.gitee.io/vue-admin-template)
 
 ## Extra
-如果你想要根据用户角色来动态生成侧边栏和router，你可以使用改分支[permission-control](https://github.com/PanJiaChen/vueAdmin-template/tree/permission-control)
- 
- ## 相关项目
- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
 
- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+如果你想要根据用户角色来动态生成侧边栏和 router，你可以使用改分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
+
+本项目基于`webpack4`开发，若还想使用`webpack3`开发，请使用该分支[webpack3](https://github.com/PanJiaChen/vue-admin-template/tree/webpack3)
+
+## 相关项目
+
+[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
+
+[electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 
 写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目:
- - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
- - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
- - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
- - [手摸手，带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
- - [手摸手，带你封装一个vue component](https://segmentfault.com/a/1190000009090836)
 
+- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
+- [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
+- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
+- [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
+- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
 
 ## Build Setup
 
-``` bash
+```bash
-
 # Clone project
-git clone https://github.com/PanJiaChen/vueAdmin-template.git
+git clone https://github.com/PanJiaChen/vue-admin-template.git
 
 # Install dependencies
 npm install
@@ -33,25 +38,28 @@ npm install
 # 建议不要用cnpm  安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
 npm install --registry=https://registry.npm.taobao.org
 
-# serve with hot reload at localhost:9528
+# Serve with hot reload at localhost:9528
 npm run dev
 
-# build for production with minification
+# Build for production with minification
 npm run build
 
-# build for production and view the bundle analyzer report
+# Build for production and view the bundle analyzer report
 npm run build --report
 ```
 
 ## Demo
+
 ![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
 
-### Element-Ui 使用cdn教程
+### Element-Ui 使用 cdn 教程
-首先找到 `index.html` ([根目录下](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/index.html))
 
-引入 Element的css和js ，并且引入 vue 。因为 Element-Ui 是依赖 vue 的，所以必须在它之前引入 vue 。
+首先找到 `index.html` ([根目录下](https://github.com/PanJiaChen/vue-admin-template/blob/element-ui-cdn/index.html))
+
+引入 Element 的 css 和 js ，并且引入 vue 。因为 Element-Ui 是依赖 vue 的，所以必须在它之前引入 vue 。
+
+之后找到 [webpack.base.conf.js](https://github.com/PanJiaChen/vue-admin-template/blob/element-ui-cdn/build/webpack.base.conf.js) 加入 `externals` 让 webpack 不打包 vue 和 element
 
-之后找到 [webpack.base.conf.js](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/build/webpack.base.conf.js) 加入 `externals` 让webpack 不打包 vue 和 element
 ```
 externals: {
   vue: 'Vue',
@@ -59,19 +67,18 @@ externals: {
 }
 ```
 
-之后还有一个小细节是如果你用了全局对象方式引入vue，就不需要 手动 `Vue.use(Vuex）` ，它会自动挂载，具体见 [issue](https://github.com/vuejs/vuex/issues/731)
+之后还有一个小细节是如果你用了全局对象方式引入 vue，就不需要 手动 `Vue.use(Vuex）` ，它会自动挂载，具体见 [issue](https://github.com/vuejs/vuex/issues/731)
 
 最终你可以使用 `npm run build --report` 查看效果
 如图：
 ![demo](https://panjiachen.github.io/images/element-cdn.png)
 
-**[具体代码](https://github.com/PanJiaChen/vueAdmin-template/commit/746aff560932704ae821f82f10b8b2a9681d5177)**
+**[具体代码](https://github.com/PanJiaChen/vue-admin-template/commit/746aff560932704ae821f82f10b8b2a9681d5177)**
 
-**[对应分支](https://github.com/PanJiaChen/vueAdmin-template/tree/element-ui-cdn)**
+**[对应分支](https://github.com/PanJiaChen/vue-admin-template/tree/element-ui-cdn)**
 
 ## License
-[MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license.
+
+[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.
 
 Copyright (c) 2017-present PanJiaChen
-
-

README.md

@@ -1,48 +1,53 @@
-# vueAdmin-template
+# vue-admin-template
 
 > A minimal vue admin template with Element UI & axios & iconfont & permission control & lint
 
-**Live demo:** http://panjiachen.github.io/vueAdmin-template
+**Live demo:** http://panjiachen.github.io/vue-admin-template
 
-[中文文档](https://github.com/PanJiaChen/vueAdmin-template/blob/master/README-zh.md)
+[中文文档](https://github.com/PanJiaChen/vue-admin-template/blob/master/README-zh.md)
 
 ## Build Setup
 
-``` bash
+```bash
-
 # Clone project
-git clone https://github.com/PanJiaChen/vueAdmin-template.git
+git clone https://github.com/PanJiaChen/vue-admin-template.git
 
 # Install dependencies
 npm install
 
-# serve with hot reload at localhost:9528
+# Serve with hot reload at localhost:9528
 npm run dev
 
-# build for production with minification
+# Build for production with minification
 npm run build
 
-# build for production and view the bundle analyzer report
+# Build for production and view the bundle analyzer report
 npm run build --report
 ```
 
 ## Demo
+
 ![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
 
 ## Extra
-If you want router permission && generate menu by user roles , you can use this branch [permission-control](https://github.com/PanJiaChen/vueAdmin-template/tree/permission-control)
+
+If you want router permission && generate menu by user roles , you can use this branch [permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
+
+This project is based on `webpack4` development. If you want to use `webpack3` development, please use this branch [webpack3](https://github.com/PanJiaChen/vue-admin-template/tree/webpack3)
 
 ## Related Project
- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
 
- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
+
+[electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 
 ### Element-Ui using cdn tutorial
-First find `index.html`([root directory](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/index.html))
+
+First find `index.html`([root directory](https://github.com/PanJiaChen/vue-admin-template/blob/element-ui-cdn/index.html))
 
 Import css and js of `Element`, and then import vue. Because `Element` is vue-dependent, vue must be import before it.
 
-Then find [webpack.base.conf.js](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/build/webpack.base.conf.js)
+Then find [webpack.base.conf.js](https://github.com/PanJiaChen/vue-admin-template/blob/element-ui-cdn/build/webpack.base.conf.js)
 Add `externals` to make webpack not package vue and element.
 
 ```
@@ -53,19 +58,19 @@ externals: {
 ```
 
 Finally there is a small detail to pay attention to that if you import vue in global, you don't need to manually `Vue.use(Vuex)`, it will be automatically mounted, see
- [issue](https://github.com/vuejs/vuex/issues/731)
+[issue](https://github.com/vuejs/vuex/issues/731)
 
 And you can use `npm run build --report` to see the effect
 
 Pictured:
 ![demo](https://panjiachen.github.io/images/element-cdn.png)
 
-**[Detailed code](https://github.com/PanJiaChen/vueAdmin-template/commit/746aff560932704ae821f82f10b8b2a9681d5177)**
+**[Detailed code](https://github.com/PanJiaChen/vue-admin-template/commit/746aff560932704ae821f82f10b8b2a9681d5177)**
-
-**[Branch](https://github.com/PanJiaChen/vueAdmin-template/tree/element-ui-cdn)**
 
+**[Branch](https://github.com/PanJiaChen/vue-admin-template/tree/element-ui-cdn)**
 
 ## License
-[MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license.
+
+[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.
 
 Copyright (c) 2017-present PanJiaChen

build/build.js

@@ -19,13 +19,15 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
   webpack(webpackConfig, (err, stats) => {
     spinner.stop()
     if (err) throw err
-    process.stdout.write(stats.toString({
+    process.stdout.write(
-      colors: true,
+      stats.toString({
-      modules: false,
+        colors: true,
-      children: false,
+        modules: false,
-      chunks: false,
+        children: false,
-      chunkModules: false
+        chunks: false,
-    }) + '\n\n')
+        chunkModules: false
+      }) + '\n\n'
+    )
 
     if (stats.hasErrors()) {
       console.log(chalk.red('  Build failed with errors.\n'))
@@ -33,9 +35,11 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
     }
 
     console.log(chalk.cyan('  Build complete.\n'))
-    console.log(chalk.yellow(
+    console.log(
-      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      chalk.yellow(
-      '  Opening index.html over file:// won\'t work.\n'
+        '  Tip: built files are meant to be served over an HTTP server.\n' +
-    ))
+          "  Opening index.html over file:// won't work.\n"
+      )
+    )
   })
 })

build/check-versions.js

@@ -4,8 +4,11 @@ const semver = require('semver')
 const packageConfig = require('../package.json')
 const shell = require('shelljs')
 
-function exec (cmd) {
+function exec(cmd) {
-  return require('child_process').execSync(cmd).toString().trim()
+  return require('child_process')
+    .execSync(cmd)
+    .toString()
+    .trim()
 }
 
 const versionRequirements = [
@@ -24,23 +27,30 @@ if (shell.which('npm')) {
   })
 }
 
-module.exports = function () {
+module.exports = function() {
   const warnings = []
 
   for (let i = 0; i < versionRequirements.length; i++) {
     const mod = versionRequirements[i]
 
     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-      warnings.push(mod.name + ': ' +
+      warnings.push(
-        chalk.red(mod.currentVersion) + ' should be ' +
+        mod.name +
-        chalk.green(mod.versionRequirement)
+          ': ' +
+          chalk.red(mod.currentVersion) +
+          ' should be ' +
+          chalk.green(mod.versionRequirement)
       )
     }
   }
 
   if (warnings.length) {
     console.log('')
-    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log(
+      chalk.yellow(
+        'To use this template, you must update following to modules:'
+      )
+    )
     console.log()
 
     for (let i = 0; i < warnings.length; i++) {

build/utils.js

@@ -1,18 +1,19 @@
 'use strict'
 const path = require('path')
 const config = require('../config')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const packageConfig = require('../package.json')
 
-exports.assetsPath = function (_path) {
+exports.assetsPath = function(_path) {
-  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+  const assetsSubDirectory =
-    ? config.build.assetsSubDirectory
+    process.env.NODE_ENV === 'production'
-    : config.dev.assetsSubDirectory
+      ? config.build.assetsSubDirectory
+      : config.dev.assetsSubDirectory
 
   return path.posix.join(assetsSubDirectory, _path)
 }
 
-exports.cssLoaders = function (options) {
+exports.cssLoaders = function(options) {
   options = options || {}
 
   const cssLoader = {
@@ -30,8 +31,22 @@ exports.cssLoaders = function (options) {
   }
 
   // generate loader string to be used with extract text plugin
-  function generateLoaders (loader, loaderOptions) {
+  function generateLoaders(loader, loaderOptions) {
-    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+    const loaders = []
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      loaders.push(MiniCssExtractPlugin.loader)
+    } else {
+      loaders.push('vue-style-loader')
+    }
+
+    loaders.push(cssLoader)
+
+    if (options.usePostCSS) {
+      loaders.push(postcssLoader)
+    }
 
     if (loader) {
       loaders.push({
@@ -42,24 +57,16 @@ exports.cssLoaders = function (options) {
       })
     }
 
-    // Extract CSS when that option is specified
+    return loaders
-    // (which is the case during production build)
-    if (options.extract) {
-      return ExtractTextPlugin.extract({
-        use: loaders,
-        fallback: 'vue-style-loader'
-      })
-    } else {
-      return ['vue-style-loader'].concat(loaders)
-    }
   }
-
   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
   return {
     css: generateLoaders(),
     postcss: generateLoaders(),
     less: generateLoaders('less'),
-    sass: generateLoaders('sass', { indentedSyntax: true }),
+    sass: generateLoaders('sass', {
+      indentedSyntax: true
+    }),
     scss: generateLoaders('sass'),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
@@ -67,7 +74,7 @@ exports.cssLoaders = function (options) {
 }
 
 // Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
+exports.styleLoaders = function(options) {
   const output = []
   const loaders = exports.cssLoaders(options)
 

build/vue-loader.conf.js

@@ -1,22 +1,5 @@
 'use strict'
-const utils = require('./utils')
-const config = require('../config')
-const isProduction = process.env.NODE_ENV === 'production'
-const sourceMapEnabled = isProduction
-  ? config.build.productionSourceMap
-  : config.dev.cssSourceMap
 
 module.exports = {
-  loaders: utils.cssLoaders({
+  //You can set the vue-loader configuration by yourself.
-    sourceMap: sourceMapEnabled,
-    extract: isProduction
-  }),
-  cssSourceMap: sourceMapEnabled,
-  cacheBusting: config.dev.cacheBusting,
-  transformToRequire: {
-    video: ['src', 'poster'],
-    source: 'src',
-    img: 'src',
-    image: 'xlink:href'
-  }
 }

build/webpack.base.conf.js

@@ -2,9 +2,10 @@
 const path = require('path')
 const utils = require('./utils')
 const config = require('../config')
+const { VueLoaderPlugin } = require('vue-loader')
 const vueLoaderConfig = require('./vue-loader.conf')
 
-function resolve (dir) {
+function resolve(dir) {
   return path.join(__dirname, '..', dir)
 }
 
@@ -27,9 +28,10 @@ module.exports = {
   output: {
     path: config.build.assetsRoot,
     filename: '[name].js',
-    publicPath: process.env.NODE_ENV === 'production'
+    publicPath:
-      ? config.build.assetsPublicPath
+      process.env.NODE_ENV === 'production'
-      : config.dev.assetsPublicPath
+        ? config.build.assetsPublicPath
+        : config.dev.assetsPublicPath
   },
   resolve: {
     extensions: ['.js', '.vue', '.json'],
@@ -48,7 +50,11 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        include: [resolve('src'), resolve('test') ,resolve('node_modules/webpack-dev-server/client')]
+        include: [
+          resolve('src'),
+          resolve('test'),
+          resolve('node_modules/webpack-dev-server/client')
+        ]
       },
       {
         test: /\.svg$/,
@@ -85,6 +91,7 @@ module.exports = {
       }
     ]
   },
+  plugins: [new VueLoaderPlugin()],
   node: {
     // prevent webpack from injecting useless setImmediate polyfill because Vue
     // source contains it (although only uses it if it's native).

build/webpack.dev.conf.js

@@ -9,7 +9,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const portfinder = require('portfinder')
 
-function resolve (dir) {
+function resolve(dir) {
   return path.join(__dirname, '..', dir)
 }
 
@@ -17,8 +17,12 @@ const HOST = process.env.HOST
 const PORT = process.env.PORT && Number(process.env.PORT)
 
 const devWebpackConfig = merge(baseWebpackConfig, {
+  mode: 'development',
   module: {
-    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+    rules: utils.styleLoaders({
+      sourceMap: config.dev.cssSourceMap,
+      usePostCSS: true
+    })
   },
   // cheap-module-eval-source-map is faster for development
   devtool: config.dev.devtool,
@@ -39,7 +43,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     proxy: config.dev.proxyTable,
     quiet: true, // necessary for FriendlyErrorsPlugin
     watchOptions: {
-      poll: config.dev.poll,
+      poll: config.dev.poll
     }
   },
   plugins: [
@@ -47,8 +51,6 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       'process.env': require('../config/dev.env')
     }),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
-    new webpack.NoEmitOnErrorsPlugin(),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'index.html',
@@ -56,7 +58,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       inject: true,
       favicon: resolve('favicon.ico'),
       title: 'vue-element-admin'
-    }),
+    })
   ]
 })
 
@@ -72,14 +74,20 @@ module.exports = new Promise((resolve, reject) => {
       devWebpackConfig.devServer.port = port
 
       // Add FriendlyErrorsPlugin
-      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+      devWebpackConfig.plugins.push(
-        compilationSuccessInfo: {
+        new FriendlyErrorsPlugin({
-          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+          compilationSuccessInfo: {
-        },
+            messages: [
-        onErrors: config.dev.notifyOnErrors
+              `Your application is running here: http://${
-        ? utils.createNotifierCallback()
+                devWebpackConfig.devServer.host
-        : undefined
+              }:${port}`
-      }))
+            ]
+          },
+          onErrors: config.dev.notifyOnErrors
+            ? utils.createNotifierCallback()
+            : undefined
+        })
+      )
 
       resolve(devWebpackConfig)
     }

build/webpack.prod.conf.js

@@ -7,17 +7,23 @@ const merge = require('webpack-merge')
 const baseWebpackConfig = require('./webpack.base.conf')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
-const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
-function resolve (dir) {
+function resolve(dir) {
   return path.join(__dirname, '..', dir)
 }
 
 const env = require('../config/prod.env')
 
+// For NamedChunksPlugin
+const seen = new Set()
+const nameLength = 4
+
 const webpackConfig = merge(baseWebpackConfig, {
+  mode: 'production',
   module: {
     rules: utils.styleLoaders({
       sourceMap: config.build.productionSourceMap,
@@ -28,37 +34,18 @@ const webpackConfig = merge(baseWebpackConfig, {
   devtool: config.build.productionSourceMap ? config.build.devtool : false,
   output: {
     path: config.build.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    filename: utils.assetsPath('js/[name].[chunkhash:8].js'),
-    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+    chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].js')
   },
   plugins: [
     // http://vuejs.github.io/vue-loader/en/workflow/production.html
     new webpack.DefinePlugin({
       'process.env': env
     }),
-    new UglifyJsPlugin({
-      uglifyOptions: {
-        compress: {
-          warnings: false
-        }
-      },
-      sourceMap: config.build.productionSourceMap,
-      parallel: true
-    }),
     // extract css into its own file
-    new ExtractTextPlugin({
+    new MiniCssExtractPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      filename: utils.assetsPath('css/[name].[contenthash:8].css'),
-      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css')
-      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
-      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
-      allChunks: false,
-    }),
-    // Compress extracted CSS. We are using this plugin so that possible
-    // duplicated CSS from different components can be deduped.
-    new OptimizeCSSPlugin({
-      cssProcessorOptions: config.build.productionSourceMap
-        ? { safe: true, map: { inline: false } }
-        : { safe: true }
     }),
     // generate dist index.html with correct asset hash for caching.
     // you can customize output by editing /index.html
@@ -75,44 +62,34 @@ const webpackConfig = merge(baseWebpackConfig, {
         removeAttributeQuotes: true
         // more options:
         // https://github.com/kangax/html-minifier#options-quick-reference
-      },
+      }
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      // default sort mode uses toposort which cannot handle cyclic deps
-      chunksSortMode: 'dependency'
+      // in certain cases, and in webpack 4, chunk order in HTML doesn't
+      // matter anyway
+    }),
+    new ScriptExtHtmlWebpackPlugin({
+      //`runtime` must same as runtimeChunk name. default is `runtime`
+      inline: /runtime\..*\.js$/
+    }),
+    // keep chunk.id stable when chunk has no name
+    new webpack.NamedChunksPlugin(chunk => {
+      if (chunk.name) {
+        return chunk.name
+      }
+      const modules = Array.from(chunk.modulesIterable)
+      if (modules.length > 1) {
+        const hash = require('hash-sum')
+        const joinedHash = hash(modules.map(m => m.id).join('_'))
+        let len = nameLength
+        while (seen.has(joinedHash.substr(0, len))) len++
+        seen.add(joinedHash.substr(0, len))
+        return `chunk-${joinedHash.substr(0, len)}`
+      } else {
+        return modules[0].id
+      }
     }),
     // keep module.id stable when vender modules does not change
     new webpack.HashedModuleIdsPlugin(),
-    // enable scope hoisting
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks (module) {
-        // any required modules inside node_modules are extracted to vendor
-        return (
-          module.resource &&
-          /\.js$/.test(module.resource) &&
-          module.resource.indexOf(
-            path.join(__dirname, '../node_modules')
-          ) === 0
-        )
-      }
-    }),
-    // extract webpack runtime and module manifest to its own file in order to
-    // prevent vendor hash from being updated whenever app bundle is updated
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      minChunks: Infinity
-    }),
-    // This instance extracts shared chunks from code splitted chunks and bundles them
-    // in a separate chunk, similar to the vendor chunk
-    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'app',
-      async: 'vendor-async',
-      children: true,
-      minChunks: 3
-    }),
-
     // copy custom static assets
     new CopyWebpackPlugin([
       {
@@ -121,7 +98,41 @@ const webpackConfig = merge(baseWebpackConfig, {
         ignore: ['.*']
       }
     ])
-  ]
+  ],
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      cacheGroups: {
+        libs: {
+          name: 'chunk-libs',
+          test: /[\\/]node_modules[\\/]/,
+          priority: 10,
+          chunks: 'initial' // 只打包初始时依赖的第三方
+        },
+        elementUI: {
+          name: 'chunk-elementUI', // 单独将 elementUI 拆包
+          priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
+          test: /[\\/]node_modules[\\/]element-ui[\\/]/
+        }
+      }
+    },
+    runtimeChunk: 'single',
+    minimizer: [
+      new UglifyJsPlugin({
+        uglifyOptions: {
+          mangle: {
+            safari10: true
+          }
+        },
+        sourceMap: config.build.productionSourceMap,
+        cache: true,
+        parallel: true
+      }),
+      // Compress extracted CSS. We are using this plugin so that possible
+      // duplicated CSS from different components can be deduped.
+      new OptimizeCSSAssetsPlugin()
+    ]
+  }
 })
 
 if (config.build.productionGzip) {
@@ -132,9 +143,7 @@ if (config.build.productionGzip) {
       asset: '[path].gz[query]',
       algorithm: 'gzip',
       test: new RegExp(
-        '\\.(' +
+        '\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
-        config.build.productionGzipExtensions.join('|') +
-        ')$'
       ),
       threshold: 10240,
       minRatio: 0.8
@@ -142,9 +151,28 @@ if (config.build.productionGzip) {
   )
 }
 
-if (config.build.bundleAnalyzerReport) {
+if (config.build.generateAnalyzerReport || config.build.bundleAnalyzerReport) {
-  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+    .BundleAnalyzerPlugin
+
+  if (config.build.bundleAnalyzerReport) {
+    webpackConfig.plugins.push(
+      new BundleAnalyzerPlugin({
+        analyzerPort: 8080,
+        generateStatsFile: false
+      })
+    )
+  }
+
+  if (config.build.generateAnalyzerReport) {
+    webpackConfig.plugins.push(
+      new BundleAnalyzerPlugin({
+        analyzerMode: 'static',
+        reportFilename: 'bundle-report.html',
+        openAnalyzer: false
+      })
+    )
+  }
 }
 
 module.exports = webpackConfig

config/index.js

@@ -6,7 +6,6 @@ const path = require('path')
 
 module.exports = {
   dev: {
-
     // Paths
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
@@ -35,17 +34,12 @@ module.exports = {
     // https://webpack.js.org/configuration/devtool/#development
     devtool: 'cheap-source-map',
 
-    // If you have problems debugging vue-files in devtools,
-    // set this to false - it *may* help
-    // https://vue-loader.vuejs.org/en/options.html#cachebusting
-    cacheBusting: true,
-
     // CSS Sourcemaps off by default because relative paths are "buggy"
     // with this option, according to the CSS-Loader README
     // (https://github.com/webpack/css-loader#sourcemaps)
     // In our experience, they generally work as expected,
     // just be aware of this issue when enabling this option.
-    cssSourceMap: false,
+    cssSourceMap: false
   },
 
   build: {
@@ -63,7 +57,7 @@ module.exports = {
      * then assetsPublicPath should be set to "/bar/".
      * In most cases please use '/' !!!
      */
-    assetsPublicPath: '/vueAdmin-template/', // If you are deployed on the root path, please use '/'
+    assetsPublicPath: '/',
 
     /**
      * Source Maps
@@ -71,7 +65,7 @@ module.exports = {
 
     productionSourceMap: false,
     // https://webpack.js.org/configuration/devtool/#production
-    devtool: '#source-map',
+    devtool: 'source-map',
 
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.
@@ -84,6 +78,9 @@ module.exports = {
     // View the bundle analyzer report after build finishes:
     // `npm run build --report`
     // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: process.env.npm_config_report
+    bundleAnalyzerReport: process.env.npm_config_report || false,
+
+    // `npm run build:prod --generate_report`
+    generateAnalyzerReport: process.env.npm_config_generate_report || false
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-admin-template",
-  "version": "3.6.0",
+  "version": "3.8.0",
   "license": "MIT",
   "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
   "author": "Pan <panfree23@gmail.com>",
@@ -15,68 +15,70 @@
     "test:ci": "npm run lint && npm run test"
   },
   "dependencies": {
-    "axios": "0.17.1",
+    "axios": "0.18.0",
-    "element-ui": "2.3.4",
+    "element-ui": "2.4.6",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
-    "vue": "2.5.10",
+    "vue": "2.5.17",
     "vue-router": "3.0.1",
     "vuex": "3.0.1"
   },
   "devDependencies": {
-    "@vue/test-utils": "^1.0.0-beta.20",
+    "@vue/test-utils": "1.0.0-beta.20",
-    "autoprefixer": "7.2.3",
+    "autoprefixer": "8.5.0",
     "babel-core": "6.26.0",
-    "babel-eslint": "8.0.3",
+    "babel-eslint": "8.2.6",
     "babel-helper-vue-jsx-merge-props": "2.0.3",
-    "babel-jest": "^23.4.0",
+    "babel-jest": "23.4.0",
-    "babel-loader": "7.1.2",
+    "babel-loader": "7.1.5",
     "babel-plugin-syntax-jsx": "6.18.0",
     "babel-plugin-transform-runtime": "6.23.0",
-    "babel-plugin-transform-vue-jsx": "3.5.0",
+    "babel-plugin-transform-vue-jsx": "3.7.0",
-    "babel-preset-env": "1.6.1",
+    "babel-preset-env": "1.7.0",
     "babel-preset-stage-2": "6.24.1",
-    "chalk": "2.3.0",
+    "chalk": "2.4.1",
-    "copy-webpack-plugin": "4.2.3",
+    "copy-webpack-plugin": "4.5.2",
-    "css-loader": "0.28.7",
+    "css-loader": "1.0.0",
-    "eslint": "4.13.1",
+    "eslint": "4.19.1",
-    "eslint-friendly-formatter": "3.0.0",
+    "eslint-friendly-formatter": "4.0.1",
-    "eslint-loader": "1.9.0",
+    "eslint-loader": "2.0.0",
-    "eslint-plugin-html": "4.0.1",
+    "eslint-plugin-vue": "4.7.1",
     "eventsource-polyfill": "0.9.6",
-    "extract-text-webpack-plugin": "3.0.2",
+    "file-loader": "1.1.11",
-    "file-loader": "1.1.5",
+    "friendly-errors-webpack-plugin": "1.7.0",
-    "friendly-errors-webpack-plugin": "1.6.1",
+    "html-webpack-plugin": "^4.0.0-alpha",
-    "html-webpack-plugin": "2.30.1",
+    "jest": "23.4.0",
-    "jest": "^23.4.0",
+    "jest-serializer-vue": "2.0.2",
-    "jest-serializer-vue": "^2.0.2",
+    "mini-css-extract-plugin": "0.4.1",
-    "node-notifier": "5.1.2",
+    "node-notifier": "5.2.1",
     "node-sass": "^4.7.2",
-    "optimize-css-assets-webpack-plugin": "3.2.0",
+    "optimize-css-assets-webpack-plugin": "5.0.0",
-    "ora": "1.3.0",
+    "ora": "3.0.0",
-    "portfinder": "1.0.13",
+    "portfinder": "1.0.16",
-    "postcss-import": "11.0.0",
+    "postcss-import": "12.0.0",
-    "postcss-loader": "2.0.9",
+    "postcss-loader": "2.1.6",
-    "postcss-url": "7.3.0",
+    "postcss-url": "7.3.2",
     "rimraf": "2.6.2",
-    "sass-loader": "6.0.6",
+    "sass-loader": "7.0.3",
-    "semver": "5.4.1",
+    "script-ext-html-webpack-plugin": "2.0.1",
-    "shelljs": "0.7.8",
+    "semver": "5.5.0",
-    "svg-sprite-loader": "3.5.2",
+    "shelljs": "0.8.2",
-    "uglifyjs-webpack-plugin": "1.1.3",
+    "svg-sprite-loader": "3.8.0",
-    "url-loader": "0.6.2",
+    "uglifyjs-webpack-plugin": "1.2.7",
-    "vue-loader": "13.7.2",
+    "url-loader": "1.0.1",
-    "vue-jest": "^2.6.0",
+    "vue-loader": "15.3.0",
-    "vue-style-loader": "3.0.3",
+    "vue-jest": "2.6.0",
-    "vue-template-compiler": "2.5.10",
+    "vue-style-loader": "4.1.2",
-    "webpack": "3.10.0",
+    "vue-template-compiler": "2.5.17",
-    "webpack-bundle-analyzer": "2.9.1",
+    "webpack": "4.16.5",
-    "webpack-dev-server": "2.9.7",
+    "webpack-bundle-analyzer": "2.13.1",
-    "webpack-merge": "4.1.1"
+    "webpack-cli": "3.1.0",
+    "webpack-dev-server": "3.1.5",
+    "webpack-merge": "4.1.4"
   },
   "engines": {
-    "node": ">= 4.0.0",
+    "node": ">= 6.0.0",
     "npm": ">= 3.0.0"
   },
   "browserslist": [

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <router-view></router-view>
+    <router-view/>
   </div>
 </template>
 

src/components/Breadcrumb/index.vue

@@ -1,9 +1,9 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path" v-if="item.meta.title">
+      <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>
+        <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>
+        <router-link v-else :to="item.redirect||item.path">{{ item.meta.title }}</router-link>
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>
@@ -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,20 +1,34 @@
 <template>
   <div>
-    <svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
+    <svg
-      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">
+      :class="{'is-active':isActive}"
-      <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"
+      t="1492500959545"
-        p-id="1692"></path>
+      class="hamburger"
-      <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"
+      style=""
-        p-id="1693"></path>
+      viewBox="0 0 1024 1024"
-      <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"
+      version="1.1"
-        p-id="1694"></path>
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="1691"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      width="64"
+      height="64"
+      @click="toggleClick">
+      <path
+        d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
+        p-id="1692" />
+      <path
+        d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
+        p-id="1693" />
+      <path
+        d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
+        p-id="1694" />
     </svg>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'hamburger',
+  name: 'Hamburger',
   props: {
     isActive: {
       type: Boolean,

src/components/SvgIcon/index.vue

@@ -1,19 +1,20 @@
 <template>
   <svg :class="svgClass" aria-hidden="true">
-    <use :xlink:href="iconName"></use>
+    <use :xlink:href="iconName"/>
   </svg>
 </template>
 
 <script>
 export default {
-  name: 'svg-icon',
+  name: 'SvgIcon',
   props: {
     iconClass: {
       type: String,
       required: true
     },
     className: {
-      type: String
+      type: String,
+      default: ''
     }
   },
   computed: {

src/icons/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import SvgIcon from '@/components/SvgIcon'// svg组件
+import SvgIcon from '@/components/SvgIcon' // svg组件
 
 // register globally
 Vue.component('svg-icon', SvgIcon)

src/icons/svg/link.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1534846208920" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2941" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M912 1008.512H15.488V112h448.256v96H111.488v704.512H816V560.256h96z" p-id="2942"></path><path d="M918.208 37.888l67.904 67.904L545.984 545.92 478.08 478.08z" p-id="2943"></path><path d="M1007.168 310.656h-96V112h-208V16h304z" p-id="2944"></path></svg>

src/main.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 
-import 'normalize.css/normalize.css'// A modern alternative to CSS resets
+import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'

src/router/index.js

@@ -76,7 +76,7 @@ export const constantRouterMap = [
     path: '/nested',
     component: Layout,
     redirect: '/nested/menu1',
-    name: 'nested',
+    name: 'Nested',
     meta: {
       title: 'nested',
       icon: 'nested'
@@ -85,31 +85,31 @@ export const constantRouterMap = [
       {
         path: 'menu1',
         component: () => import('@/views/nested/menu1/index'), // Parent router-view
-        name: 'menu1',
+        name: 'Menu1',
         meta: { title: 'menu1' },
         children: [
           {
             path: 'menu1-1',
             component: () => import('@/views/nested/menu1/menu1-1'),
-            name: 'menu1-1',
+            name: 'Menu1-1',
             meta: { title: 'menu1-1' }
           },
           {
             path: 'menu1-2',
             component: () => import('@/views/nested/menu1/menu1-2'),
-            name: 'menu1-2',
+            name: 'Menu1-2',
             meta: { title: 'menu1-2' },
             children: [
               {
                 path: 'menu1-2-1',
                 component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-                name: 'menu1-2-1',
+                name: 'Menu1-2-1',
                 meta: { title: 'menu1-2-1' }
               },
               {
                 path: 'menu1-2-2',
                 component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-                name: 'menu1-2-2',
+                name: 'Menu1-2-2',
                 meta: { title: 'menu1-2-2' }
               }
             ]
@@ -117,7 +117,7 @@ export const constantRouterMap = [
           {
             path: 'menu1-3',
             component: () => import('@/views/nested/menu1/menu1-3'),
-            name: 'menu1-3',
+            name: 'Menu1-3',
             meta: { title: 'menu1-3' }
           }
         ]
@@ -130,6 +130,17 @@ export const constantRouterMap = [
     ]
   },
 
+  {
+    path: 'external-link',
+    component: Layout,
+    children: [
+      {
+        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
+        meta: { title: 'externalLink', icon: 'link' }
+      }
+    ]
+  },
+
   { path: '*', redirect: '/404', hidden: true }
 ]
 
@@ -138,4 +149,3 @@ export default new Router({
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRouterMap
 })
-

src/utils/index.js

@@ -25,7 +25,8 @@ export function parseTime(time, cFormat) {
   }
   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]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
     if (result.length > 0 && value < 10) {
       value = '0' + value
     }
@@ -47,7 +48,8 @@ export function formatTime(time, option) {
 
   if (diff < 30) {
     return '刚刚'
-  } else if (diff < 3600) { // less 1 hour
+  } else if (diff < 3600) {
+    // less 1 hour
     return Math.ceil(diff / 60) + '分钟前'
   } else if (diff < 3600 * 24) {
     return Math.ceil(diff / 3600) + '小时前'
@@ -57,6 +59,16 @@ export function formatTime(time, option) {
   if (option) {
     return parseTime(time, option)
   } else {
-    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
+    return (
+      d.getMonth() +
+      1 +
+      '月' +
+      d.getDate() +
+      '日' +
+      d.getHours() +
+      '时' +
+      d.getMinutes() +
+      '分'
+    )
   }
 }

src/utils/request.js

@@ -10,23 +10,26 @@ const service = axios.create({
 })
 
 // request拦截器
-service.interceptors.request.use(config => {
+service.interceptors.request.use(
-  if (store.getters.token) {
+  config => {
-    config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+    if (store.getters.token) {
+      config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+    }
+    return config
+  },
+  error => {
+    // Do something with request error
+    console.log(error) // for debug
+    Promise.reject(error)
   }
-  return config
+)
-}, error => {
-  // Do something with request error
-  console.log(error) // for debug
-  Promise.reject(error)
-})
 
 // respone拦截器
 service.interceptors.response.use(
   response => {
-  /**
+    /**
-  * code为非20000是抛错 可结合自己业务进行修改
+     * code为非20000是抛错 可结合自己业务进行修改
-  */
+     */
     const res = response.data
     if (res.code !== 20000) {
       Message({
@@ -37,13 +40,17 @@ service.interceptors.response.use(
 
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+        MessageBox.confirm(
-          confirmButtonText: '重新登录',
+          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          cancelButtonText: '取消',
+          '确定登出',
-          type: 'warning'
+          {
-        }).then(() => {
+            confirmButtonText: '重新登录',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        ).then(() => {
           store.dispatch('FedLogOut').then(() => {
-            location.reload()// 为了重新实例化vue-router对象 避免bug
+            location.reload() // 为了重新实例化vue-router对象 避免bug
           })
         })
       }
@@ -53,7 +60,7 @@ service.interceptors.response.use(
     }
   },
   error => {
-    console.log('err' + error)// for debug
+    console.log('err' + error) // for debug
     Message({
       message: error.message,
       type: 'error',

src/utils/validate.js

@@ -30,4 +30,3 @@ export function validatAlphabets(str) {
   const reg = /^[A-Za-z]+$/
   return reg.test(str)
 }
-

src/views/404.vue

@@ -2,15 +2,15 @@
   <div class="wscn-http404-container">
     <div class="wscn-http404">
       <div class="pic-404">
-        <img class="pic-404__parent" :src="img_404" alt="404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
-        <img class="pic-404__child left" :src="img_404_cloud" alt="404">
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
-        <img class="pic-404__child mid" :src="img_404_cloud" alt="404">
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
-        <img class="pic-404__child right" :src="img_404_cloud" alt="404">
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
       </div>
       <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>
@@ -21,17 +21,9 @@
 </template>
 
 <script>
-import img_404 from '@/assets/404_images/404.png'
-import img_404_cloud from '@/assets/404_images/404_cloud.png'
 
 export default {
-  name: 'page404',
+  name: 'Page404',
-  data() {
-    return {
-      img_404,
-      img_404_cloud
-    }
-  },
   computed: {
     message() {
       return '网管说这个页面你不能进......'

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">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>
 
@@ -9,7 +9,7 @@
 import { mapGetters } from 'vuex'
 
 export default {
-  name: 'dashboard',
+  name: 'Dashboard',
   computed: {
     ...mapGetters([
       'name',

src/views/form/index.vue

@@ -2,42 +2,42 @@
   <div class="app-container">
     <el-form ref="form" :model="form" label-width="120px">
       <el-form-item label="Activity name">
-        <el-input v-model="form.name"></el-input>
+        <el-input v-model="form.name"/>
       </el-form-item>
       <el-form-item label="Activity zone">
         <el-select v-model="form.region" placeholder="please select your zone">
-          <el-option label="Zone one" value="shanghai"></el-option>
+          <el-option label="Zone one" value="shanghai"/>
-          <el-option label="Zone two" value="beijing"></el-option>
+          <el-option label="Zone two" value="beijing"/>
         </el-select>
       </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>
+          <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>
+          <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">
-        <el-switch v-model="form.delivery"></el-switch>
+        <el-switch v-model="form.delivery"/>
       </el-form-item>
       <el-form-item label="Activity type">
         <el-checkbox-group v-model="form.type">
-          <el-checkbox label="Online activities" name="type"></el-checkbox>
+          <el-checkbox label="Online activities" name="type"/>
-          <el-checkbox label="Promotion activities" name="type"></el-checkbox>
+          <el-checkbox label="Promotion activities" name="type"/>
-          <el-checkbox label="Offline activities" name="type"></el-checkbox>
+          <el-checkbox label="Offline activities" name="type"/>
-          <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
+          <el-checkbox label="Simple brand exposure" name="type"/>
         </el-checkbox-group>
       </el-form-item>
       <el-form-item label="Resources">
         <el-radio-group v-model="form.resource">
-          <el-radio label="Sponsor"></el-radio>
+          <el-radio label="Sponsor"/>
-          <el-radio label="Venue"></el-radio>
+          <el-radio label="Venue"/>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="Activity form">
-        <el-input type="textarea" v-model="form.desc"></el-input>
+        <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,10 +1,10 @@
 <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"></div>
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <sidebar class="sidebar-container"></sidebar>
+    <sidebar class="sidebar-container"/>
     <div class="main-container">
-      <navbar></navbar>
+      <navbar/>
-      <app-main></app-main>
+      <app-main/>
     </div>
   </div>
 </template>
@@ -14,7 +14,7 @@ import { Navbar, Sidebar, AppMain } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 
 export default {
-  name: 'layout',
+  name: 'Layout',
   components: {
     Navbar,
     Sidebar,

src/views/layout/components/AppMain.vue

@@ -2,7 +2,7 @@
   <section class="app-main">
     <transition name="fade" mode="out-in">
       <!-- <router-view :key="key"></router-view> -->
-      <router-view></router-view>
+      <router-view/>
     </transition>
   </section>
 </template>

src/views/layout/components/Navbar.vue

@@ -1,20 +1,20 @@
 <template>
   <el-menu class="navbar" mode="horizontal">
-    <hamburger class="hamburger-container" @toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
+    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar"/>
-    <breadcrumb></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"></i>
+        <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/Item.vue

@@ -0,0 +1,29 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>

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

@@ -1,39 +1,53 @@
 <template>
   <div v-if="!item.hidden&&item.children" class="menu-wrapper">
 
-      <router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="resolvePath(item.children[0].path)">
+    <template v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow">
-        <el-menu-item :index="resolvePath(item.children[0].path)" :class="{'submenu-title-noDropdown':!isNest}">
+      <a v-if="isExternalLink(onlyOneChild.path)" :href="onlyOneChild.path" target="blank">
-          <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
+        apple
-          <span v-if="item.children[0].meta&&item.children[0].meta.title" slot="title">{{item.children[0].meta.title}}</span>
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+      <router-link v-else :to="resolvePath(onlyOneChild.path)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon" :title="onlyOneChild.meta.title" />
         </el-menu-item>
       </router-link>
+    </template>
 
-      <el-submenu v-else :index="item.name||item.path">
+    <el-submenu v-else :index="item.name||item.path">
-        <template slot="title">
+      <template slot="title">
-          <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
-          <span v-if="item.meta&&item.meta.title" slot="title">{{item.meta.title}}</span>
+      </template>
-        </template>
 
-        <template v-for="child in item.children" v-if="!child.hidden">
+      <template v-for="child in item.children" v-if="!child.hidden">
-          <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu"/>
 
-          <router-link v-else :to="resolvePath(child.path)" :key="child.name">
+        <router-link v-else :to="resolvePath(child.path)" :key="child.name">
-            <el-menu-item :index="resolvePath(child.path)">
+          <el-menu-item :index="resolvePath(child.path)">
-              <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
-              <span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span>
+          </el-menu-item>
-            </el-menu-item>
+        </router-link>
-          </router-link>
+      </template>
-        </template>
+    </el-submenu>
-      </el-submenu>
 
   </div>
 </template>
 
 <script>
 import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
 
 export default {
   name: 'SidebarItem',
+  components: { Item },
   props: {
     // route配置json
     item: {
@@ -49,18 +63,32 @@ export default {
       default: ''
     }
   },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
   methods: {
-    hasOneShowingChildren(children) {
+    hasOneShowingChild(children) {
       const showingChildren = children.filter(item => {
-        return !item.hidden
+        if (item.hidden) {
+          return false
+        } else {
+          // temp set(will be used if only has one showing child )
+          this.onlyOneChild = item
+          return true
+        }
       })
       if (showingChildren.length === 1) {
         return true
       }
       return false
     },
-    resolvePath(...paths) {
+    resolvePath(routePath) {
-      return path.resolve(this.basePath, ...paths)
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
     }
   }
 }

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

@@ -1,15 +1,15 @@
 <template>
-  <el-scrollbar wrapClass="scrollbar-wrapper">
+  <el-scrollbar wrap-class="scrollbar-wrapper">
     <el-menu
-      mode="vertical"
       :show-timeout="200"
       :default-active="$route.path"
       :collapse="isCollapse"
+      mode="vertical"
       background-color="#304156"
       text-color="#bfcbd9"
       active-text-color="#409EFF"
     >
-      <sidebar-item v-for="route in routes" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
+      <sidebar-item v-for="route in routes" :key="route.name" :item="route" :base-path="route.path"/>
     </el-menu>
   </el-scrollbar>
 </template>

src/views/login/index.vue

@@ -1,23 +1,30 @@
 <template>
   <div class="login-container">
-    <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
       <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" autoComplete="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"></svg-icon>
+          <svg-icon icon-class="password" />
+        </span>
+        <el-input
+          :type="pwdType"
+          v-model="loginForm.password"
+          name="password"
+          auto-complete="on"
+          placeholder="password"
+          @keyup.enter.native="handleLogin" />
+        <span class="show-pwd" @click="showPwd">
+          <svg-icon icon-class="eye" />
         </span>
-        <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
-          placeholder="password"></el-input>
-          <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>
@@ -33,7 +40,7 @@
 import { isvalidUsername } from '@/utils/validate'
 
 export default {
-  name: 'login',
+  name: 'Login',
   data() {
     const validateUsername = (rule, value, callback) => {
       if (!isvalidUsername(value)) {

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,35 +1,41 @@
 <template>
   <div class="app-container">
-    <el-table :data="list" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row>
+    <el-table
-      <el-table-column align="center" label='ID' width="95">
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row>
+      <el-table-column align="center" label="ID" width="95">
         <template slot-scope="scope">
-          {{scope.$index}}
+          {{ scope.$index }}
         </template>
       </el-table-column>
       <el-table-column label="Title">
         <template slot-scope="scope">
-          {{scope.row.title}}
+          {{ scope.row.title }}
         </template>
       </el-table-column>
       <el-table-column label="Author" width="110" align="center">
         <template slot-scope="scope">
-          <span>{{scope.row.author}}</span>
+          <span>{{ scope.row.author }}</span>
         </template>
       </el-table-column>
       <el-table-column label="Pageviews" width="110" align="center">
         <template slot-scope="scope">
-          {{scope.row.pageviews}}
+          {{ scope.row.pageviews }}
         </template>
       </el-table-column>
       <el-table-column class-name="status-col" label="Status" width="110" 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-column align="center" prop="created_at" label="Display_time" width="200">
         <template slot-scope="scope">
-          <i class="el-icon-time"></i>
+          <i class="el-icon-time"/>
-          <span>{{scope.row.display_time}}</span>
+          <span>{{ scope.row.display_time }}</span>
         </template>
       </el-table-column>
     </el-table>
@@ -40,12 +46,6 @@
 import { getList } from '@/api/table'
 
 export default {
-  data() {
-    return {
-      list: null,
-      listLoading: true
-    }
-  },
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -56,6 +56,12 @@ export default {
       return statusMap[status]
     }
   },
+  data() {
+    return {
+      list: null,
+      listLoading: true
+    }
+  },
   created() {
     this.fetchData()
   },

src/views/tree/index.vue

@@ -1,26 +1,21 @@
 <template>
   <div class="app-container">
-    <el-input placeholder="Filter keyword" v-model="filterText" style="margin-bottom:30px;"></el-input>
+    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
 
-    <el-tree class="filter-tree" :data="data2" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree2"></el-tree>
+    <el-tree
+      ref="tree2"
+      :data="data2"
+      :props="defaultProps"
+      :filter-node-method="filterNode"
+      class="filter-tree"
+      default-expand-all
+    />
 
   </div>
 </template>
 
 <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 {
@@ -65,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>