[release] 3.4.1

perf[drag-table]:refine the effect && fixed row-key bug
fix[tags-view]: fixed bug in DEL_OTHERS_VIEWS (#368 )
2017-12-22 11:10:46 +08:00 · 2017-12-22 11:09:54 +08:00 · 2017-12-22 10:29:47 +08:00 · 2017-12-21 13:25:29 +08:00 · 2017-12-18 18:47:06 +08:00 · 2017-12-18 10:25:53 +08:00
60 changed files with 1224 additions and 857 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -1,10 +1,12 @@
 {
  "presets": [
    ["env", {
-      "modules": false
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
    }],
    "stage-2"
  ],
-  "plugins": ["transform-runtime"],
-  "comments": false
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
 }
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,144 +1,199 @@
 module.exports = {
-    root: true,
-    parser: 'babel-eslint',
-    parserOptions: {
-        sourceType: 'module'
-    },
-    env: {
-        browser: true,
-        node: true,
-        es6: true,
-    },
-    extends: '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': {
-        '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',
-        'no-class-assign': 2,
-        'no-cond-assign': 2,
-        'no-const-assign': 2,
-        'no-control-regex': 0,
-        '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']
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: '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': {
+    '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',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    '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']
+  }
 }
+
--- a/.gitignore
+++ b/.gitignore
@@ -2,9 +2,20 @@
 node_modules/
 dist/
 gifs/
-npm-debug.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
 test/unit/coverage
 test/e2e/reports
 selenium-debug.log
+
+# Editor directories and files
 .idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+
 package-lock.json
--- a/.postcssrc.js
+++ b/.postcssrc.js
@@ -3,6 +3,7 @@
 module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
+    "postcss-import": {},
    "autoprefixer": {}
  }
 }
--- a/.travis.yml
+++ b/.travis.yml
@@ -0,0 +1,5 @@
+language: node_js
+node_js: stable
+script: npm run test
+notifications:
+  email: false
--- a/README.md
+++ b/README.md
@@ -4,8 +4,9 @@

 # vue-element-admin

-[![vue](https://img.shields.io/badge/vue-2.5.9-brightgreen.svg)](https://github.com/vuejs/vue)
-[![element-ui](https://img.shields.io/badge/element--ui-2.0.7-brightgreen.svg)](https://github.com/ElemeFE/element)
+[![vue](https://img.shields.io/badge/vue-2.5.10-brightgreen.svg)](https://github.com/vuejs/vue)
+[![element-ui](https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg)](https://github.com/ElemeFE/element)
+[![Build Status](https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master)](https://travis-ci.org/PanJiaChen/vue-element-admin)
 [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
 [![GitHub release](https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg)]()

@@ -25,10 +26,7 @@
 - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
 - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)

-
-**注意：该项目目前使用element-ui@2.0.5版本，所以最低兼容 Vue 2.5.0**
-
-楼主这里有一份调查[问卷](https://www.wjx.cn/m/16866569.aspx) 有空请填写一下，以表对本项目的支持~ps:不是给这个调查问卷网站做广告，所以填完问卷不用点上面抽奖有的没的那些东西
+**注意：该项目使用 element-ui@2.0.0+ 版本，所以最低兼容 vue@2.5.0**

 ## 前序准备

@@ -42,9 +40,9 @@
 - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
 - [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)

- 相应需求，开了一个qq群 `591724180` 方便大家交流
+ 响应需求，开了一个qq群 `591724180` 方便大家交流

- 或者可以加入该 **[圈子](https://jianshiapp.com/circles/1209)** 讨论问题
+ 或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西

 **如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**

@@ -52,6 +50,9 @@

 **该项目不支持低版本游览器(如ie)，有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**

+ <p align="center">
+  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
+</p>

 ## 功能
 - 登录/注销
@@ -61,7 +62,7 @@
 - 动态面包屑
 - 国际化多语言
 - 多种动态换肤
- 快捷导航(标签页)
+- 快捷导航(标签页 支持右键操作)
 - 富文本编辑器
 - Markdown编辑器
 - JSON编辑器
@@ -87,35 +88,46 @@
 - Dropzone
 - Sticky
 - CountTo
- Markdown2html
-
+- Markdown to html

 ## 开发
 ```bash
-    # 克隆项目
-    git clone https://github.com/PanJiaChen/vue-element-admin.git
+	# 克隆项目
+	git clone https://github.com/PanJiaChen/vue-element-admin.git

-    # 安装依赖
-    npm install
-    
-    //or # 建议不要用cnpm  安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
-    npm install --registry=https://registry.npm.taobao.org
+	# 安装依赖
+	npm install
+	   
+	# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
+	npm install --registry=https://registry.npm.taobao.org

-    # 本地开发 开启服务
-    npm run dev
+	# 启动服务
+	npm run dev
 ```
 浏览器访问 http://localhost:9527

 ## 发布
 ```bash
-    # 发布测试环境 带webpack ananalyzer
-    npm run build:sit-preview
+	# 构建测试环境
+	npm run build:sit

-    # 构建生成环境
-    npm run build:prod
+	# 构建生成环境
+	npm run build:prod
 ```

-更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/)
+## 其它
+```bash
+	# --report to build with bundle size analytics
+	npm run build:prod --report
+
+	# --preview to start a server in local to preview
+	npm run build:prod --preview
+
+	# lint code
+	npm run lint
+```
+
+更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/deploy)

 ## 目录结构
 ```shell
@@ -123,26 +135,27 @@
 ├── config                     // 配置相关
 ├── src                        // 源代码
 │   ├── api                    // 所有请求
-│   ├── assets                 // 主题 字体等静态资源
+│   ├── assets                 // 主题 图片等静态资源
 │   ├── components             // 全局公用组件
 │   ├── directive              // 全局指令
 │   ├── filtres                // 全局 filter
-│   ├── icons                  // 项目所有 svg icons
-│   ├── lang                   // 国际化 language
+│   ├── icons                  // 项目svg icons
+│   ├── lang                   // 国际化 lang
 │   ├── mock                   // 项目mock 模拟数据
 │   ├── router                 // 路由
-│   ├── store                  // 全局 store管理
+│   ├── store                  // 全局 store
 │   ├── styles                 // 全局样式
 │   ├── utils                  // 全局公用方法
 │   ├── vendor                 // 公用vendor
-│   ├── views                   // view
+│   ├── views                  // views
 │   ├── App.vue                // 入口页面
-│   ├── main.js                // 入口 加载组件 初始化等
+│   ├── main.js                // 入口js 初始化 加载组件等
 │   └── permission.js          // 权限管理
 ├── static                     // 第三方不打包资源
 │   └── Tinymce                // 富文本
 ├── .babelrc                   // babel-loader 配置
-├── eslintrc.js                // eslint 配置项
+├── .eslintrc.js               // eslint 配置项
+├── .postcssrc.js              // postcss 配置项
 ├── .gitignore                 // git 忽略项
 ├── favicon.ico                // favicon图标
 ├── index.html                 // html模板
@@ -153,8 +166,8 @@
 ## Changelog
 Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).

-## [查看更多demo](http://panjiachen.github.io/vue-element-admin)
-![](https://wpimg.wallstcn.com/1bc334a6-32a8-4f29-a037-ac3f5ce32588.png)
+## Online Demo
+[查看更多demo](http://panjiachen.github.io/vue-element-admin)

 ## Donate
 If you find this project useful, you can buy me a cup of coffee
--- a/build/build.js
+++ b/build/build.js
@@ -1,39 +1,48 @@
-require('./check-versions')();
-var server = require('pushstate-server');
-var opn = require('opn')
-var ora = require('ora')
-var rm = require('rimraf')
-var path = require('path')
-var chalk = require('chalk')
-var webpack = require('webpack');
-var config = require('../config');
-var webpackConfig = require('./webpack.prod.conf');
+'use strict'
+require('./check-versions')()

-var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+const server = require('pushstate-server')
+
+var spinner = ora('building for '+ process.env.env_config+ ' environment...' )
 spinner.start()

-
 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
    if (err) throw err
-    webpack(webpackConfig, function (err, stats) {
-        spinner.stop()
-        if (err) throw err
-        process.stdout.write(stats.toString({
-                colors: true,
-                modules: false,
-                children: false,
-                chunks: false,
-                chunkModules: false
-            }) + '\n\n')
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')

-        console.log(chalk.cyan('  Build complete.\n'))
-        if(process.env.npm_config_preview){
-            server.start({
-                port: 9528,
-                directory: './dist',
-                file: '/index.html'
-            });
-            console.log('> Listening at ' +  'http://localhost:9528' + '\n')
-        }
-    })
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+    if(process.env.npm_config_preview){
+      server.start({
+          port: 9526,
+          directory: './dist',
+          file: '/index.html'
+      });
+      console.log('> Listening at ' +  'http://localhost:9526' + '\n')
+    }
+  })
 })
--- a/build/check-versions.js
+++ b/build/check-versions.js
@@ -1,45 +1,54 @@
-var chalk = require('chalk')
-var semver = require('semver')
-var packageConfig = require('../package.json')
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')

-function exec(cmd) {
-    return require('child_process').execSync(cmd).toString().trim()
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
 }

-var versionRequirements = [
-    {
-        name: 'node',
-        currentVersion: semver.clean(process.version),
-        versionRequirement: packageConfig.engines.node
-    },
-    {
-        name: 'npm',
-        currentVersion: exec('npm --version'),
-        versionRequirement: packageConfig.engines.npm
-    }
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
 ]

+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
 module.exports = function () {
-    var warnings = []
-    for (var i = 0; i < versionRequirements.length; i++) {
-        var mod = versionRequirements[i]
-        if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-            warnings.push(mod.name + ': ' +
-                chalk.red(mod.currentVersion) + ' should be ' +
-                chalk.green(mod.versionRequirement)
-            )
-        }
+  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 + ': ' +
+        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()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
    }

-    if (warnings.length) {
-        console.log('')
-        console.log(chalk.yellow('To use this template, you must update following to modules:'))
-        console.log()
-        for (var i = 0; i < warnings.length; i++) {
-            var warning = warnings[i]
-            console.log('  ' + warning)
-        }
-        console.log()
-        process.exit(1)
-    }
+    console.log()
+    process.exit(1)
+  }
 }
--- a/build/dev-client.js
+++ b/build/dev-client.js
@@ -1,9 +0,0 @@
-/* eslint-disable */
-require('eventsource-polyfill')
-var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
-
-hotClient.subscribe(function (event) {
-  if (event.action === 'reload') {
-    window.location.reload()
-  }
-})
--- a/build/dev-server.js
+++ b/build/dev-server.js
@@ -1,93 +0,0 @@
-require('./check-versions')(); // 检查 Node 和 npm 版本
-
-var config = require('../config');
-if (!process.env.NODE_ENV) {
-    process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
-}
-
-var opn = require('opn')
-var path = require('path');
-var express = require('express');
-var webpack = require('webpack');
-var proxyMiddleware = require('http-proxy-middleware');
-var webpackConfig = require('./webpack.dev.conf');
-
-// default port where dev server listens for incoming traffic
-var port = process.env.PORT || config.dev.port;
-// automatically open browser, if not set will be false
-var autoOpenBrowser = !!config.dev.autoOpenBrowser;
-// Define HTTP proxies to your custom API backend
-// https://github.com/chimurai/http-proxy-middleware
-var proxyTable = config.dev.proxyTable;
-
-var app = express();
-var compiler = webpack(webpackConfig);
-
-var devMiddleware = require('webpack-dev-middleware')(compiler, {
-    publicPath: webpackConfig.output.publicPath,
-    quiet: true
-});
-
-var hotMiddleware = require('webpack-hot-middleware')(compiler, {
-    log: false,
-    heartbeat: 2000
-});
-
-// force page reload when html-webpack-plugin template changes
-// currently disabled until this is resolved:
-// https://github.com/jantimon/html-webpack-plugin/issues/680
-// compiler.plugin('compilation', function (compilation) {
-//   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
-//     hotMiddleware.publish({ action: 'reload' })
-//     cb()
-//   })
-// })
-
-// proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
-    var options = proxyTable[context]
-    if (typeof options === 'string') {
-        options = {target: options}
-    }
-    app.use(proxyMiddleware(options.filter || context, options))
-});
-
-// handle fallback for HTML5 history API
-app.use(require('connect-history-api-fallback')());
-
-// serve webpack bundle output
-app.use(devMiddleware);
-
-// enable hot-reload and state-preserving
-// compilation error display
-app.use(hotMiddleware);
-
-// serve pure static assets
-var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory);
-app.use(staticPath, express.static('./static'));
-
-var uri = 'http://localhost:' + port
-
-var _resolve
-var readyPromise = new Promise(resolve => {
-  _resolve = resolve
-})
-
-console.log('> Starting dev server...')
-devMiddleware.waitUntilValid(() => {
-  console.log('> Listening at ' + uri + '\n')
-  // when env is testing, don't need open it
-  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
-    opn(uri)
-  }
-  _resolve()
-})
-
-var server = app.listen(port)
-
-module.exports = {
-  ready: readyPromise,
-  close: () => {
-    server.close()
-  }
-}
--- a/build/logo.png
+++ b/build/logo.png
--- a/build/utils.js
+++ b/build/utils.js
@@ -1,35 +1,38 @@
-var path = require('path')
-var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')

 exports.assetsPath = function (_path) {
-  var assetsSubDirectory = process.env.NODE_ENV === 'production'
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory
+
  return path.posix.join(assetsSubDirectory, _path)
 }

 exports.cssLoaders = function (options) {
  options = options || {}

-  var cssLoader = {
+  const cssLoader = {
    loader: 'css-loader',
    options: {
-      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }

-  var postcssLoader = {
+  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
-      sourceMap: true
+      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
-    var loaders = options.usePostCSS !== false ? [cssLoader, postcssLoader] : [cssLoader]
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
@@ -65,14 +68,34 @@ exports.cssLoaders = function (options) {

 // Generate loaders for standalone style files (outside of .vue)
 exports.styleLoaders = function (options) {
-  var output = []
-  var loaders = exports.cssLoaders(options)
-  for (var extension in loaders) {
-    var loader = loaders[extension]
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }
+
  return output
 }
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}
--- a/build/vue-loader.conf.js
+++ b/build/vue-loader.conf.js
@@ -1,12 +1,22 @@
-var utils = require('./utils')
-var config = require('../config')
-var isProduction = process.env.NODE_ENV === 'production'
+'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({
-        sourceMap: isProduction
-            ? config.build.productionSourceMap
-            : config.dev.cssSourceMap,
-        extract: isProduction
-    })
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
 }
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -1,51 +1,46 @@
-var path = require('path')
-var utils = require('./utils')
-var config = require('../config')
-var vueLoaderConfig = require('./vue-loader.conf')
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')

-function resolve(dir) {
+function resolve (dir) {
  return path.join(__dirname, '..', dir)
 }

+const createLintingRule = () => ({
+  test: /\.(js|vue)$/,
+  loader: 'eslint-loader',
+  enforce: 'pre',
+  include: [resolve('src'), resolve('test')],
+  options: {
+    formatter: require('eslint-friendly-formatter'),
+    emitWarning: !config.dev.showEslintErrorsInOverlay
+  }
+})
+
 module.exports = {
+  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
-    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
-      'src': path.resolve(__dirname, '../src'),
-      'assets': path.resolve(__dirname, '../src/assets'),
-      'components': path.resolve(__dirname, '../src/components'),
-      'views': path.resolve(__dirname, '../src/views'),
-      'styles': path.resolve(__dirname, '../src/styles'),
-      'api': path.resolve(__dirname, '../src/api'),
-      'utils': path.resolve(__dirname, '../src/utils'),
-      'store': path.resolve(__dirname, '../src/store'),
-      'router': path.resolve(__dirname, '../src/router'),
-      'mock': path.resolve(__dirname, '../src/mock'),
-      'vendor': path.resolve(__dirname, '../src/vendor'),
-      'static': path.resolve(__dirname, '../static')
    }
  },
  module: {
    rules: [
-      {
-        test: /\.(js|vue)$/,
-        loader: 'eslint-loader',
-        enforce: "pre",
-        include: [resolve('src'), resolve('test')],
-        options: {
-            formatter: require('eslint-friendly-formatter')
-        }
-      },
+      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
@@ -54,7 +49,7 @@ module.exports = {
      {
        test: /\.js$/,
        loader: 'babel-loader?cacheDirectory',
-        include: [resolve('src'), resolve('test')]
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.svg$/,
@@ -73,6 +68,14 @@ module.exports = {
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
@@ -83,10 +86,16 @@ module.exports = {
      }
    ]
  },
-  //注入全局mixin
-  // sassResources: path.join(__dirname, '../src/styles/mixin.scss'),
-  // sassLoader: {
-  //     data:  path.join(__dirname, '../src/styles/index.scss')
-  // },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
 }
-
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -1,44 +1,88 @@
-var utils = require('./utils')
-var path = require('path')
-var webpack = require('webpack')
-var config = require('../config')
-var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.base.conf')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')

-// add hot-reload related code to entry chunks
-Object.keys(baseWebpackConfig.entry).forEach(function (name) {
-  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
-})
-
-function resolveApp(relativePath) {
-  return path.resolve(relativePath);
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
 }

-module.exports = merge(baseWebpackConfig, {
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
-  // cheap-source-map is faster for development
-  devtool: '#cheap-source-map',
-  cache: true,
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: true,
+    hot: true,
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
  plugins: [
    new webpack.DefinePlugin({
-      'process.env': config.dev.env
+      'process.env': require('../config/dev.env')
    }),
-    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    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',
      template: 'index.html',
-      favicon: resolveApp('favicon.ico'),
      inject: true,
+      favicon: resolve('favicon.ico'),
+      title: 'vue-element-admin',
      path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
    }),
-    new FriendlyErrorsPlugin()
  ]
 })

+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@@ -1,21 +1,23 @@
-var path = require('path')
-var utils = require('./utils')
-var webpack = require('webpack')
-var config = require('../config')
-var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.base.conf')
-var CopyWebpackPlugin = require('copy-webpack-plugin')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
-var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+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 OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

-var env = config.build[process.env.env_config+'Env']
-
-function resolveApp(relativePath) {
-  return path.resolve(relativePath);
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
 }

-var webpackConfig = merge(baseWebpackConfig, {
+const env = require('../config/'+process.env.env_config+'.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
@@ -23,64 +25,69 @@ var webpackConfig = merge(baseWebpackConfig, {
      usePostCSS: true
    })
  },
-  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
-    publicPath: config.build.assetsPublicPath
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env
    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
      },
-      sourceMap: true,
+      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
    // extract css into its own file
    new ExtractTextPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash].css')
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // 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(),
+    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
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
-      filename: 'index.html',
+      filename: config.build.index,
      template: 'index.html',
      inject: true,
-      favicon: resolveApp('favicon.ico'),
+      favicon: resolve('favicon.ico'),
+      title: 'vue-element-admin',
+      path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
-        removeRedundantAttributes: true,
-        useShortDoctype: true,
-        removeEmptyAttributes: true,
-        removeStyleLinkTypeAttributes: true,
-        keepClosingSlash: true,
-        minifyJS: true,
-        minifyCSS: true,
-        minifyURLs: true
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
      },
-      path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),
-    // cache Module Identifiers
+    // 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: function (module) {
+      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
@@ -97,6 +104,15 @@ var webpackConfig = merge(baseWebpackConfig, {
      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
+    }),
    // split echarts into its own file
    new webpack.optimize.CommonsChunkPlugin({
      async: 'echarts',
@@ -113,29 +129,47 @@ var webpackConfig = merge(baseWebpackConfig, {
        return context && (context.indexOf('xlsx') >= 0);
      }
    }),
-    // 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
+     // split codemirror into its own file
+     new webpack.optimize.CommonsChunkPlugin({
+      async: 'codemirror',
+      minChunks(module) {
+        var context = module.context;
+        return context && (context.indexOf('codemirror') >= 0);
+      }
    }),

    // copy custom static assets
-    new CopyWebpackPlugin([{
-      from: path.resolve(__dirname, '../static'),
-      to: config.build.assetsSubDirectory,
-      ignore: ['.*']
-    }])
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
  ]
 })

+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
 if (config.build.bundleAnalyzerReport) {
-  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
 }

 module.exports = webpackConfig
-
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -1,6 +1,5 @@
 module.exports = {
-    NODE_ENV: '"development"',
-    ENV_CONFIG: '"dev"',
-    BASE_API: '"https://api-dev"',
-    APP_ORIGIN: '"https://wallstreetcn.com"'
+	NODE_ENV: '"development"',
+	ENV_CONFIG: '"dev"',
+	BASE_API: '"https://api-dev"'
 }
--- a/config/index.js
+++ b/config/index.js
@@ -1,39 +1,83 @@
+'use strict'
+// Template version: 1.2.6
 // see http://vuejs-templates.github.io/webpack for documentation.
-var path = require('path')
+
+const path = require('path')

 module.exports = {
-    build: {
-			sitEnv: require('./sit.env'),
-			prodEnv: require('./prod.env'),
-			index: path.resolve(__dirname, '../dist/index.html'),
-			assetsRoot: path.resolve(__dirname, '../dist'),
-			assetsSubDirectory: 'static',
-			assetsPublicPath: './',          //请根据自己路径配置更改
-			productionSourceMap: false,
-			// Gzip off by default as many popular static hosts such as
-			// Surge or Netlify already gzip all static assets for you.
-			// Before setting to `true`, make sure to:
-			// npm install --save-dev compression-webpack-plugin
-			productionGzip: false,
-			productionGzipExtensions: ['js', 'css'],
-			// Run the build command with an extra argument to
-			// 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
-    },
-    dev: {
-			env: require('./dev.env'),
-			port: 9527,
-			autoOpenBrowser: true,
-			assetsSubDirectory: 'static',
-			assetsPublicPath: '/',
-			proxyTable: {},
-			// 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
-    }
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 9527, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: true,
+    errorOverlay: true,
+    notifyOnErrors: false,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'eval-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,
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+
+    // you can set by youself according to actual condition
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: false,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // 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
+  }
 }
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,6 +1,5 @@
 module.exports = {
-    NODE_ENV: '"production"',
-    ENV_CONFIG: '"prod"',
-    BASE_API: '"https://api-prod"',
-    APP_ORIGIN: '"https://wallstreetcn.com"'
-};
+	NODE_ENV: '"production"',
+	ENV_CONFIG: '"prod"',
+	BASE_API: '"https://api-prod"'
+}
--- a/config/sit.env.js
+++ b/config/sit.env.js
@@ -1,6 +1,5 @@
 module.exports = {
-    NODE_ENV: '"production"',
-    ENV_CONFIG: '"sit"',
-    BASE_API: '"https://api-sit"',
-    APP_ORIGIN: '"https://wallstreetcn.com"'
-};
+	NODE_ENV: '"production"',
+	ENV_CONFIG: '"sit"',
+	BASE_API: '"https://api-sit"'
+}
--- a/package.json
+++ b/package.json
@@ -1,95 +1,92 @@
 {
  "name": "vue-element-admin",
-  "version": "3.0.0",
-  "description": "A Vue.js admin",
+  "version": "3.4.1",
+  "description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
  "author": "Pan <panfree23@gmail.com>",
  "license": "MIT",
  "private": true,
  "scripts": {
-    "dev": "node build/dev-server.js",
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
-    "build:sit-preview": "cross-env NODE_ENV=production env_config=sit npm_config_preview=true  npm_config_report=true node build/build.js",
-    "lint": "eslint --ext .js,.vue src"
+    "lint": "eslint --ext .js,.vue src",
+    "test": "npm run lint"
  },
  "dependencies": {
    "axios": "0.17.1",
    "clipboard": "1.7.1",
-    "codemirror": "5.31.0",
+    "codemirror": "5.32.0",
    "dropzone": "5.2.0",
    "echarts": "3.8.5",
-    "element-ui": "2.0.7",
+    "element-ui": "2.0.8",
    "file-saver": "1.3.3",
    "font-awesome": "4.7.0",
    "js-cookie": "2.2.0",
    "jsonlint": "1.6.2",
-    "jszip": "3.1.4",
+    "jszip": "3.1.5",
    "mockjs": "1.0.1-beta3",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "screenfull": "3.3.2",
-    "showdown": "1.8.2",
+    "showdown": "1.8.5",
    "simplemde": "1.11.2",
-    "sortablejs": "1.6.1",
-    "vue": "2.5.9",
-    "vue-count-to": "1.0.10",
+    "sortablejs": "1.7.0",
+    "vue": "2.5.10",
+    "vue-count-to": "1.0.13",
    "vue-i18n": "7.3.2",
-    "vue-multiselect": "2.0.6",
+    "vue-multiselect": "2.0.8",
    "vue-router": "3.0.1",
-    "vue-splitpane": "1.0.0",
+    "vue-splitpane": "1.0.2",
    "vuedraggable": "2.15.0",
    "vuex": "3.0.1",
    "xlsx": "^0.11.7"
  },
  "devDependencies": {
-    "autoprefixer": "7.1.6",
+    "autoprefixer": "7.2.3",
    "babel-core": "6.26.0",
-    "babel-eslint": "8.0.2",
+    "babel-eslint": "8.0.3",
+    "babel-helper-vue-jsx-merge-props": "2.0.3",
    "babel-loader": "7.1.2",
+    "babel-plugin-syntax-jsx": "6.18.0",
    "babel-plugin-transform-runtime": "6.23.0",
+    "babel-plugin-transform-vue-jsx": "3.5.0",
    "babel-preset-env": "1.6.1",
    "babel-preset-stage-2": "6.24.1",
-    "babel-register": "6.26.0",
    "chalk": "2.3.0",
-    "connect-history-api-fallback": "1.4.0",
-    "copy-webpack-plugin": "4.2.0",
+    "copy-webpack-plugin": "4.3.0",
    "cross-env": "5.1.1",
    "css-loader": "0.28.7",
-    "eslint": "4.11.0",
+    "eslint": "4.13.1",
    "eslint-friendly-formatter": "3.0.0",
-    "eslint-import-resolver-webpack": "0.8.3",
    "eslint-loader": "1.9.0",
-    "eslint-plugin-html": "3.2.2",
-    "eslint-plugin-import": "2.8.0",
-    "eventsource-polyfill": "0.9.6",
-    "express": "4.16.2",
+    "eslint-plugin-html": "4.0.1",
    "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "0.11.2",
+    "file-loader": "1.1.5",
    "friendly-errors-webpack-plugin": "1.6.1",
-    "function-bind": "1.1.0",
-    "html-webpack-plugin": "2.30.0",
-    "http-proxy-middleware": "0.17.4",
-    "node-sass": "^4.5.0",
-    "opn": "4.0.2",
+    "html-webpack-plugin": "2.30.1",
+    "node-notifier": "5.1.2",
+    "node-sass": "^4.7.2",
    "optimize-css-assets-webpack-plugin": "3.2.0",
-    "ora": "1.1.0",
-    "postcss-loader": "^2.0.8",
-    "pushstate-server": "2.1.0",
-    "rimraf": "2.6.0",
+    "ora": "1.3.0",
+    "portfinder": "1.0.13",
+    "postcss-import": "11.0.0",
+    "postcss-loader": "2.0.9",
+    "pushstate-server": "3.0.1",
+    "rimraf": "2.6.2",
    "sass-loader": "6.0.6",
    "script-loader": "0.7.2",
-    "semver": "5.3.0",
-    "style-loader": "0.19.0",
-    "svg-sprite-loader": "3.4.1",
+    "semver": "5.4.1",
+    "shelljs": "0.7.8",
+    "svg-sprite-loader": "3.5.2",
+    "uglifyjs-webpack-plugin": "1.1.3",
    "url-loader": "0.6.2",
    "vue-loader": "13.5.0",
    "vue-style-loader": "3.0.3",
-    "vue-template-compiler": "2.5.9",
-    "webpack": "3.8.1",
-    "webpack-bundle-analyzer": "2.9.0",
-    "webpack-dev-middleware": "1.12.0",
-    "webpack-hot-middleware": "2.20.0",
-    "webpack-merge": "4.1.0"
+    "vue-template-compiler": "2.5.10",
+    "webpack": "3.10.0",
+    "webpack-bundle-analyzer": "2.9.1",
+    "webpack-dev-server": "2.9.7",
+    "webpack-merge": "4.1.1"
  },
  "engines": {
    "node": ">= 4.0.0",
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,8 +9,3 @@
    name: 'APP'
  }
 </script>
-
-<style lang="scss">
-@import '~normalize.css/normalize.css'; // normalize.css 样式格式化
-@import './styles/index.scss'; // 全局自定义样式
-</style>
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -10,6 +10,8 @@
 </template>

 <script>
+import { generateTitle } from '@/utils/i18n'
+
 export default {
  created() {
    this.getBreadcrumb()
@@ -25,6 +27,7 @@ export default {
    }
  },
  methods: {
+    generateTitle,
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name)
      const first = matched[0]
@@ -32,9 +35,6 @@ export default {
        matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
      }
      this.levelList = matched
-    },
-    generateTitle(title) {
-      return this.$t('route.' + title)
    }
  }
 }
--- a/src/components/ErrLog/index.vue
+++ b/src/components/ErrLog/index.vue
@@ -1,56 +0,0 @@
-<template>
-	<div>
-		<el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
-			<el-button size="small" type="primary">
-				<svg t="1492682037685" class="bug-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863"
-				  xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
-					<path d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z"
-					  p-id="1864"></path>
-				</svg>
-			</el-button>
-		</el-badge>
-		<el-dialog title="bug日志" :visible.sync="dialogTableVisible">
-			<el-table :data="logsList">
-				<el-table-column label="message">
-					<template slot-scope="scope">
-						<div>msg:{{ scope.row.err.message }}</div>
-						<br/>
-						<div>url: {{scope.row.url}}</div>
-					</template>
-				</el-table-column>
-				<el-table-column label="stack">
-					<template slot-scope="scope">
-						{{ scope.row.err.stack}}
-					</template>
-				</el-table-column>
-
-			</el-table>
-		</el-dialog>
-	</div>
-</template>
-
-<script>
-export default {
-  name: 'errLog',
-  props: {
-    logsList: {
-      type: Array
-    }
-  },
-  data() {
-    return {
-      dialogTableVisible: false
-    }
-  }
-}
-</script>
-
-<style scoped>
-.bug-svg {
-	width: 1em;
-	height: 1em;
-	vertical-align: -0.15em;
-	fill: currentColor;
-	overflow: hidden;
-}
-</style>
--- a/src/components/ErrorLog/index.vue
+++ b/src/components/ErrorLog/index.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
+      <el-button size="small" type="danger" class="bug-btn">
+        <svg t="1492682037685" class="bug-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863"
+          xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128">
+          <path d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z"
+            p-id="1864"></path>
+        </svg>
+      </el-button>
+    </el-badge>
+
+    <el-dialog title="Error Log" :visible.sync="dialogTableVisible" width="80%">
+      <el-table :data="logsList" border>
+        <el-table-column label="Message">
+          <template slot-scope="scope">
+            <div>
+              <span class="message-title">Msg:</span>
+              <el-tag type="danger">{{ scope.row.err.message }}</el-tag>
+            </div>
+            <br/>
+            <div>
+              <span class="message-title" style="padding-right: 10px;">Info: </span>
+              <el-tag type="warning">{{scope.row.vm.$vnode.tag}} error in {{scope.row.info}}</el-tag>
+            </div>
+            <br/>
+            <div>
+              <span class="message-title" style="padding-right: 16px;">Url: </span>
+              <el-tag type="success">{{scope.row.url}}</el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="Stack">
+          <template slot-scope="scope">
+            {{ scope.row.err.stack}}
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'errorLog',
+  props: {
+    logsList: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      dialogTableVisible: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.bug-btn.el-button--small {
+  padding: 9px 10px;
+}
+.bug-svg {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+.message-title {
+  font-size: 16px;
+  color: #333;
+  font-weight: bold;
+  padding-right: 8px;
+}
+</style>
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
@@ -105,7 +105,7 @@
 <script>
    /* eslint-disable */
    import {effectRipple, data2blob} from './utils';
-    import request from 'utils/request';
+    import request from '@/utils/request';
    import langBag from './lang';
    const mimes = {
        'jpg': 'image/jpeg',
--- a/src/components/ScrollBar/index.vue
+++ b/src/components/ScrollBar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="scroll-container" ref="scrollContainer" @mousewheel="handleScroll">
+  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll" >
    <div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
      <slot></slot>
    </div>
@@ -8,6 +8,7 @@

 <script>
 const delta = 15
+
 export default {
  name: 'scrollBar',
  data() {
@@ -17,19 +18,19 @@ export default {
  },
  methods: {
    handleScroll(e) {
-      e.preventDefault()
+      const eventDelta = e.wheelDelta || -e.deltaY * 3
      const $container = this.$refs.scrollContainer
      const $containerHeight = $container.offsetHeight
      const $wrapper = this.$refs.scrollWrapper
      const $wrapperHeight = $wrapper.offsetHeight
-      if (e.wheelDelta > 0) {
-        this.top = Math.min(0, this.top + e.wheelDelta)
+      if (eventDelta > 0) {
+        this.top = Math.min(0, this.top + eventDelta)
      } else {
        if ($containerHeight - delta < $wrapperHeight) {
          if (this.top < -($wrapperHeight - $containerHeight + delta)) {
            this.top = this.top
          } else {
-            this.top = Math.max(this.top + e.wheelDelta, $containerHeight - $wrapperHeight - delta)
+            this.top = Math.max(this.top + eventDelta, $containerHeight - $wrapperHeight - delta)
          }
        } else {
          this.top = 0
--- a/src/components/ScrollPane/index.vue
+++ b/src/components/ScrollPane/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="scroll-container" ref="scrollContainer" @mousewheel="handleScroll">
+  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
    <div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
      <slot></slot>
    </div>
@@ -18,20 +18,20 @@ export default {
  },
  methods: {
    handleScroll(e) {
-      e.preventDefault()
+      const eventDelta = e.wheelDelta || -e.deltaY * 3
      const $container = this.$refs.scrollContainer
      const $containerWidth = $container.offsetWidth
      const $wrapper = this.$refs.scrollWrapper
      const $wrapperWidth = $wrapper.offsetWidth

-      if (e.wheelDelta > 0) {
-        this.left = Math.min(0, this.left + e.wheelDelta)
+      if (eventDelta > 0) {
+        this.left = Math.min(0, this.left + eventDelta)
      } else {
        if ($containerWidth - padding < $wrapperWidth) {
          if (this.left < -($wrapperWidth - $containerWidth + padding)) {
            this.left = this.left
          } else {
-            this.left = Math.max(this.left + e.wheelDelta, $containerWidth - $wrapperWidth - padding)
+            this.left = Math.max(this.left + eventDelta, $containerWidth - $wrapperWidth - padding)
          }
        } else {
          this.left = 0
@@ -64,6 +64,7 @@ export default {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
+  width: 100%;
  .scroll-wrapper {
    position: absolute;
  }
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -6,9 +6,8 @@
 </template>

 <script>
-import { getVersion } from '@/utils/index.js'

-const version = getVersion('element-ui') // element-ui version from package.json
+const version = require('element-ui/package.json').version // element-ui version from node_modules
 const ORIGINAL_THEME = '#409EFF' // default color

 export default {
--- a/src/errorLog.js
+++ b/src/errorLog.js
@@ -1,14 +1,17 @@
 import Vue from 'vue'
-import errLog from '@/store/errLog'
+import store from './store'

-// 生产环境错误日志
-if (process.env.NODE_ENV === 'production') {
-  Vue.config.errorHandler = function(err, vm) {
-    console.log(err, window.location.href)
-    errLog.pushLog({
+// you can set only in production env show the error-log
+// if (process.env.NODE_ENV === 'production') {
+Vue.config.errorHandler = function(err, vm, info, a) {
+  Vue.nextTick(() => {
+    store.dispatch('addErrorLog', {
      err,
-      url: window.location.href,
-      vm
+      vm,
+      info,
+      url: window.location.href
    })
-  }
+    console.error(err, info)
+  })
 }
+// }
--- a/src/main.js
+++ b/src/main.js
@@ -1,15 +1,23 @@
 import Vue from 'vue'
+
+import 'normalize.css/normalize.css'// A modern alternative to CSS resets
+
 import Element from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import i18n from './lang' // 国际化
+
+import '@/styles/index.scss' // global css
+
 import App from './App'
 import router from './router'
 import store from './store'
-import * as filters from './filters' // 全局filter
+
+import i18n from './lang' // Internationalization
 import './icons' // icon
 import './errorLog'// error log
-import './permission' // 权限
-import './mock' // 该项目所有请求使用mockjs模拟
+import './permission' // permission control
+import './mock' // simulation data generator
+
+import * as filters from './filters' // global filter

 Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,7 +26,7 @@ router.beforeEach((to, from, next) => {
          const roles = res.data.role
          store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
-            next({ ...to }) // hack方法 确保addRoutes已完成
+            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,replace: true so the navigation will not leave a history record
          })
        }).catch(() => {
          store.dispatch('FedLogOut').then(() => {
--- a/src/store/errLog.js
+++ b/src/store/errLog.js
@@ -1,13 +0,0 @@
-const errLog = {
-  state: {
-    errLog: []
-  },
-  pushLog(log) {
-    this.state.errLog.unshift(log)
-  },
-  clearLog() {
-    this.state.errLog = []
-  }
-}
-
-export default errLog
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,8 +1,8 @@
 const getters = {
  sidebar: state => state.app.sidebar,
  language: state => state.app.language,
-  visitedViews: state => state.app.visitedViews,
-  cachedViews: state => state.app.cachedViews,
+  visitedViews: state => state.tagsView.visitedViews,
+  cachedViews: state => state.tagsView.cachedViews,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
@@ -11,6 +11,7 @@ const getters = {
  roles: state => state.user.roles,
  setting: state => state.user.setting,
  permission_routers: state => state.permission.routers,
-  addRouters: state => state.permission.addRouters
+  addRouters: state => state.permission.addRouters,
+  errorLogs: state => state.errorLog.logs
 }
 export default getters
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import app from './modules/app'
-import user from './modules/user'
+import errorLog from './modules/errorLog'
 import permission from './modules/permission'
+import tagsView from './modules/tagsView'
+import user from './modules/user'
 import getters from './getters'

 Vue.use(Vuex)
@@ -10,8 +12,10 @@ Vue.use(Vuex)
 const store = new Vuex.Store({
  modules: {
    app,
-    user,
-    permission
+    errorLog,
+    permission,
+    tagsView,
+    user
  },
  getters
 })
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -5,9 +5,7 @@ const app = {
    sidebar: {
      opened: !+Cookies.get('sidebarStatus')
    },
-    language: Cookies.get('language') || 'zh',
-    visitedViews: [],
-    cachedViews: []
+    language: Cookies.get('language') || 'zh'
  },
  mutations: {
    TOGGLE_SIDEBAR: state => {
@@ -21,32 +19,6 @@ const app = {
    SET_LANGUAGE: (state, language) => {
      state.language = language
      Cookies.set('language', language)
-    },
-    ADD_VISITED_VIEWS: (state, view) => {
-      if (state.visitedViews.some(v => v.path === view.path)) return
-      state.visitedViews.push({
-        name: view.name,
-        path: view.path,
-        title: view.meta.title || 'no-name'
-      })
-      if (!view.meta.noCache) {
-        state.cachedViews.push(view.name)
-      }
-    },
-    DEL_VISITED_VIEWS: (state, view) => {
-      for (const [i, v] of state.visitedViews.entries()) {
-        if (v.path === view.path) {
-          state.visitedViews.splice(i, 1)
-          break
-        }
-      }
-      for (const i of state.cachedViews) {
-        if (i === view.name) {
-          const index = state.cachedViews.indexOf(i)
-          state.cachedViews.splice(index, 1)
-          break
-        }
-      }
    }
  },
  actions: {
@@ -55,15 +27,6 @@ const app = {
    },
    setLanguage({ commit }, language) {
      commit('SET_LANGUAGE', language)
-    },
-    addVisitedViews({ commit }, view) {
-      commit('ADD_VISITED_VIEWS', view)
-    },
-    delVisitedViews({ commit, state }, view) {
-      return new Promise((resolve) => {
-        commit('DEL_VISITED_VIEWS', view)
-        resolve([...state.visitedViews])
-      })
    }
  }
 }
--- a/src/store/modules/errorLog.js
+++ b/src/store/modules/errorLog.js
@@ -0,0 +1,17 @@
+const errorLog = {
+  state: {
+    logs: []
+  },
+  mutations: {
+    ADD_ERROR_LOG: (state, log) => {
+      state.logs.push(log)
+    }
+  },
+  actions: {
+    addErrorLog({ commit }, log) {
+      commit('ADD_ERROR_LOG', log)
+    }
+  }
+}
+
+export default errorLog
--- a/src/store/modules/tagsView.js
+++ b/src/store/modules/tagsView.js
@@ -0,0 +1,78 @@
+const tagsView = {
+  state: {
+    visitedViews: [],
+    cachedViews: []
+  },
+  mutations: {
+    ADD_VISITED_VIEWS: (state, view) => {
+      if (state.visitedViews.some(v => v.path === view.path)) return
+      state.visitedViews.push({
+        name: view.name,
+        path: view.path,
+        title: view.meta.title || 'no-name'
+      })
+      if (!view.meta.noCache) {
+        state.cachedViews.push(view.name)
+      }
+    },
+    DEL_VISITED_VIEWS: (state, view) => {
+      for (const [i, v] of state.visitedViews.entries()) {
+        if (v.path === view.path) {
+          state.visitedViews.splice(i, 1)
+          break
+        }
+      }
+      for (const i of state.cachedViews) {
+        if (i === view.name) {
+          const index = state.cachedViews.indexOf(i)
+          state.cachedViews.splice(index, index + 1)
+          break
+        }
+      }
+    },
+    DEL_OTHERS_VIEWS: (state, view) => {
+      for (const [i, v] of state.visitedViews.entries()) {
+        if (v.path === view.path) {
+          state.visitedViews = state.visitedViews.slice(i, i + 1)
+          break
+        }
+      }
+      for (const i of state.cachedViews) {
+        if (i === view.name) {
+          const index = state.cachedViews.indexOf(i)
+          state.cachedViews = state.cachedViews.slice(index, i + 1)
+          break
+        }
+      }
+    },
+    DEL_ALL_VIEWS: (state) => {
+      state.visitedViews = []
+      state.cachedViews = []
+    }
+  },
+  actions: {
+    addVisitedViews({ commit }, view) {
+      commit('ADD_VISITED_VIEWS', view)
+    },
+    delVisitedViews({ commit, state }, view) {
+      return new Promise((resolve) => {
+        commit('DEL_VISITED_VIEWS', view)
+        resolve([...state.visitedViews])
+      })
+    },
+    delOthersViews({ commit, state }, view) {
+      return new Promise((resolve) => {
+        commit('DEL_OTHERS_VIEWS', view)
+        resolve([...state.visitedViews])
+      })
+    },
+    delAllViews({ commit, state }) {
+      return new Promise((resolve) => {
+        commit('DEL_ALL_VIEWS')
+        resolve([...state.visitedViews])
+      })
+    }
+  }
+}
+
+export default tagsView
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -1,5 +1,9 @@
 //覆盖一些element-ui样式

+ .el-breadcrumb__inner, .el-breadcrumb__inner a{
+  font-weight: 400!important;
+}
+
 .el-upload {
   input[type="file"] {
     display: none !important;
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -98,10 +98,11 @@ div:focus{

 code {
  background: #eef1f6;
-  padding: 15px 10px;
+  padding: 15px 16px;
  margin-bottom: 20px;
  display: block;
  line-height: 36px;
+  font-size: 14px;
  a {
    color: #337ab7;
    cursor: pointer;
--- a/src/utils/i18n.js
+++ b/src/utils/i18n.js
@@ -0,0 +1,3 @@
+export function generateTitle(title) {
+  return this.$t('route.' + title) // $t :this method from vue-i18n ,inject in @/lang/index.js
+}
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -265,9 +265,3 @@ export function deepClone(source) {
  }
  return targetObj
 }
-
-// get dependencies verison from package.json
-export function getVersion(name) {
-  const p = require('../../package')
-  return p.dependencies[name]
-}
--- a/src/vendor/Export2Excel.js
+++ b/src/vendor/Export2Excel.js
@@ -1,6 +1,6 @@
 /* eslint-disable */
 require('script-loader!file-saver');
-require('script-loader!vendor/Blob');
+require('script-loader!@/vendor/Blob');
 import XLSX from 'xlsx'

 function generateArray(table) {
--- a/src/views/components-demo/dndList.vue
+++ b/src/views/components-demo/dndList.vue
@@ -14,7 +14,7 @@ import DndList from '@/components/DndList'
 import { fetchList } from '@/api/article'

 export default {
-  name: 'dnd-list-demo',
+  name: 'dndList-demo',
  components: { DndList },
  data() {
    return {
--- a/src/views/errorLog/errorTestA.vue
+++ b/src/views/errorLog/errorTestA.vue
@@ -5,3 +5,9 @@
    <!--error code-->
  </div>
 </template>
+
+<script>
+export default {
+  name: 'errorTestA'
+}
+</script>
--- a/src/views/errorLog/errorTestB.vue
+++ b/src/views/errorLog/errorTestB.vue
@@ -0,0 +1,11 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  created() {
+    this.b = b // eslint-disable-line
+  }
+}
+</script>
--- a/src/views/errorLog/index.vue
+++ b/src/views/errorLog/index.vue
@@ -1,21 +1,26 @@
 <template>
  <div class="errPage-container">
-    <err-code></err-code>
+    <errorA></errorA>
+    <errorB></errorB>

    <h3>请点击右上角bug小图表</h3>
    <code>
-      现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在Vue官网提供了一个方法来捕获处理异常
+      现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常.
+      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/error?id=%e4%bb%a3%e7%a0%81">文档介绍</a>
    </code>
-    <a href="#"><img src='http://panjiachen.github.io/images/errHandler.png'></a>
+    <a href="#">
+      <img src='https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif'>
+    </a>
  </div>
 </template>

 <script>
-import errCode from './errcode'
+import errorA from './errorTestA'
+import errorB from './errorTestB'

 export default {
  name: 'errorLog',
-  components: { errCode }
+  components: { errorA, errorB }
 }
 </script>

--- a/src/views/example/table/complexTable.vue
+++ b/src/views/example/table/complexTable.vue
@@ -17,7 +17,7 @@
      </el-select>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加</el-button>
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-download" @click="handleDownload">导出</el-button>
+      <el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" @click="handleDownload">导出</el-button>
      <el-checkbox class="filter-item" style='margin-left:15px;' @change='tableKey=tableKey+1' v-model="showAuditor">显示审核人</el-checkbox>
    </div>

@@ -196,7 +196,8 @@ export default {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
-      }
+      },
+      downloadLoading: false
    }
  },
  filters: {
@@ -330,12 +331,13 @@ export default {
      })
    },
    handleDownload() {
-      require.ensure([], () => {
-        const { export_json_to_excel } = require('vendor/Export2Excel')
+      this.downloadLoading = true
+      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['时间', '地区', '类型', '标题', '重要性']
        const filterVal = ['timestamp', 'province', 'type', 'title', 'importance']
        const data = this.formatJson(filterVal, this.list)
-        export_json_to_excel(tHeader, data, 'table数据')
+        excel.export_json_to_excel(tHeader, data, 'table数据')
+        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
--- a/src/views/example/table/dragTable.vue
+++ b/src/views/example/table/dragTable.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="app-container calendar-list-container">
-
-    <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
+    <!-- Note that row-key is necessary to get a correct row order. -->
+    <el-table :data="list" row-key="id"  v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">

      <el-table-column align="center" label="序号" width="65">
        <template slot-scope="scope">
@@ -27,9 +27,9 @@
        </template>
      </el-table-column>

-      <el-table-column width="80px" label="重要性">
+      <el-table-column width="100px" label="重要性">
        <template slot-scope="scope">
-          <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
+          <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="icon-star" :key="n"></svg-icon>
        </template>
      </el-table-column>

@@ -45,7 +45,7 @@
        </template>
      </el-table-column>

-      <el-table-column align="center" label="拖拽" width="95">
+      <el-table-column align="center" label="拖拽" width="80">
        <template slot-scope="scope">
          <svg-icon class='drag-handler' icon-class="drag"></svg-icon>
        </template>
@@ -53,7 +53,7 @@

    </el-table>

-    <div class='show-d'>默认顺序 &nbsp; {{ olderList}}</div>
+    <div class='show-d'>默认顺序 &nbsp; {{ oldList}}</div>
    <div class='show-d'>拖拽后顺序{{newList}}</div>

  </div>
@@ -75,7 +75,7 @@ export default {
        limit: 10
      },
      sortable: null,
-      olderList: [],
+      oldList: [],
      newList: []
    }
  },
@@ -99,8 +99,8 @@ export default {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
-        this.olderList = this.list.map(v => v.id)
-        this.newList = this.olderList.slice()
+        this.oldList = this.list.map(v => v.id)
+        this.newList = this.oldList.slice()
        this.$nextTick(() => {
          this.setSort()
        })
@@ -109,7 +109,12 @@ export default {
    setSort() {
      const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
+        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        onEnd: evt => {
+          const targetRow = this.list.splice(evt.oldIndex, 1)[0]
+          this.list.splice(evt.newIndex, 0, targetRow)
+
+          // for show the changes, you can delete in you code
          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
          this.newList.splice(evt.newIndex, 0, tempIndex)
        }
@@ -119,10 +124,21 @@ export default {
 }
 </script>

+<style>
+.sortable-ghost{
+  opacity: .8;
+  color: #fff!important;
+  background: #42b983!important;
+}
+</style>
+
 <style scoped>
+.icon-star{
+  margin-right:2px;
+}
 .drag-handler{
-  width: 30px;
-  height: 30px;
+  width: 20px;
+  height: 20px;
  cursor: pointer;
 }
 .show-d{
--- a/src/views/example/table/index.vue
+++ b/src/views/example/table/index.vue
@@ -11,7 +11,7 @@ export default {
  name: 'TableMain',
  computed: {
    cachedViews() {
-      return this.$store.state.app.cachedViews
+      return this.$store.state.tagsView.cachedViews
    }
  }
 }
--- a/src/views/example/table/inlineEditTable.vue
+++ b/src/views/example/table/inlineEditTable.vue
@@ -35,14 +35,18 @@

      <el-table-column min-width="300px" label="标题">
        <template slot-scope="scope">
-          <el-input v-show="scope.row.edit" size="small" v-model="scope.row.title"></el-input>
-          <span v-show="!scope.row.edit">{{ scope.row.title }}</span>
+          <template v-if="scope.row.edit">
+            <el-input class="edit-input" size="small" v-model="scope.row.title"></el-input>
+            <el-button class='cancel-btn' size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button>
+          </template>
+          <span v-else>{{ scope.row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="编辑" width="120">
        <template slot-scope="scope">
-          <el-button :type="scope.row.edit?'success':'primary'" @click='scope.row.edit=!scope.row.edit' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
+          <el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">完成</el-button>
+          <el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">编辑</el-button>
        </template>
      </el-table-column>

@@ -84,12 +88,40 @@ export default {
      fetchList(this.listQuery).then(response => {
        const items = response.data.items
        this.list = items.map(v => {
-          this.$set(v, 'edit', false)
+          this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
+          v.originalTitle = v.title //  will be used when user click the cancel botton
          return v
        })
        this.listLoading = false
      })
+    },
+    cancelEdit(row) {
+      row.title = row.originalTitle
+      row.edit = false
+      this.$message({
+        message: 'The title has been restored to the original value',
+        type: 'warning'
+      })
+    },
+    confirmEdit(row) {
+      row.edit = false
+      row.originalTitle = row.title
+      this.$message({
+        message: 'The title has been edited',
+        type: 'success'
+      })
    }
  }
 }
 </script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 13px;
+}
+</style>
--- a/src/views/excel/exportExcel.vue
+++ b/src/views/excel/exportExcel.vue
@@ -35,7 +35,7 @@

 <script>
 import { fetchList } from '@/api/article'
-import { parseTime } from 'utils'
+import { parseTime } from '@/utils'

 export default {
  name: 'exportExcel',
@@ -60,13 +60,12 @@ export default {
    },
    handleDownload() {
      this.downloadLoading = true
-      require.ensure([], () => {
-        const { export_json_to_excel } = require('vendor/Export2Excel')
+      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        const list = this.list
        const data = this.formatJson(filterVal, list)
-        export_json_to_excel(tHeader, data, this.filename)
+        excel.export_json_to_excel(tHeader, data, this.filename)
        this.downloadLoading = false
      })
    },
--- a/src/views/excel/selectExcel.vue
+++ b/src/views/excel/selectExcel.vue
@@ -66,16 +66,15 @@ export default {
    handleDownload() {
      if (this.multipleSelection.length) {
        this.downloadLoading = true
-        require.ensure([], () => {
-          const { export_json_to_excel } = require('vendor/Export2Excel')
-          const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
-          const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
-          const list = this.multipleSelection
-          const data = this.formatJson(filterVal, list)
-          export_json_to_excel(tHeader, data, this.filename)
-          this.$refs.multipleTable.clearSelection()
-          this.downloadLoading = false
-        })
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
+        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
+        const list = this.multipleSelection
+        const data = this.formatJson(filterVal, list)
+        excel.export_json_to_excel(tHeader, data, this.filename)
+        this.$refs.multipleTable.clearSelection()
+        this.downloadLoading = false
+      })
      } else {
        this.$message({
          message: '请至少选择一条记录',
--- a/src/views/excel/uploadExcel.vue
+++ b/src/views/excel/uploadExcel.vue
@@ -9,7 +9,7 @@
 </template>

 <script>
-import UploadExcelComponent from 'components/UploadExcel/index.vue'
+import UploadExcelComponent from '@/components/UploadExcel/index.vue'

 export default {
  name: 'uploadExcel',
--- a/src/views/layout/Layout.vue
+++ b/src/views/layout/Layout.vue
@@ -10,7 +10,7 @@
 </template>

 <script>
-import { Navbar, Sidebar, AppMain, TagsView } from 'views/layout/components'
+import { Navbar, Sidebar, AppMain, TagsView } from './components'

 export default {
  name: 'layout',
--- a/src/views/layout/components/AppMain.vue
+++ b/src/views/layout/components/AppMain.vue
@@ -13,7 +13,8 @@ export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
-      return this.$store.state.app.cachedViews
+      // console.log(this.$store.state.tagsView.cachedViews)
+      return this.$store.state.tagsView.cachedViews
    }
    // key() {
    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -5,8 +5,7 @@
    <breadcrumb class="breadcrumb-container"></breadcrumb>

    <div class="right-menu">
-
-      <error-log v-if="log.length>0" class="errLog-container right-menu-item" :logsList="log"></error-log>
+      <error-log v-if="errorLogs.length>0" class="errLog-container right-menu-item" :logsList="errorLogs"></error-log>

      <el-tooltip effect="dark" content="全屏" placement="bottom">
        <screenfull class="screenfull right-menu-item"></screenfull>
@@ -57,8 +56,7 @@ import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
 import ThemePicker from '@/components/ThemePicker'
 import Screenfull from '@/components/Screenfull'
-import ErrorLog from '@/components/ErrLog'
-import errLogStore from 'store/errLog'
+import ErrorLog from '@/components/ErrorLog'

 export default {
  components: {
@@ -68,17 +66,13 @@ export default {
    ErrorLog,
    Screenfull
  },
-  data() {
-    return {
-      log: errLogStore.state.errLog
-    }
-  },
  computed: {
    ...mapGetters([
      'sidebar',
      'name',
      'avatar',
-      'language'
+      'language',
+      'errorLogs'
    ])
  },
  methods: {
@@ -167,6 +161,3 @@ export default {
  }
 }
 </style>
-
-
-
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/src/views/layout/components/Sidebar/SidebarItem.vue
@@ -1,21 +1,21 @@
 <template>
  <div class="menu-wrapper">
-    <template v-for="item in routes">
+    <template v-for="item in routes" v-if="!item.hidden&&item.children">

-      <router-link v-if="!item.hidden&&item.children&&item.children.length===1" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
+      <router-link v-if="item.children.length===1 && !item.children[0].children" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
        <el-menu-item :index="item.path+'/'+item.children[0].path" class='submenu-title-noDropdown'>
          <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
          <span v-if="item.children[0].meta&&item.children[0].meta.title">{{generateTitle(item.children[0].meta.title)}}</span>
        </el-menu-item>
      </router-link>

-      <el-submenu v-if="!item.hidden&&item.children&&item.children.length>1" :index="item.name||item.path" :key="item.name">
+      <el-submenu v-else :index="item.name||item.path" :key="item.name">
        <template slot="title">
          <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
          <span v-if="item.meta&&item.meta.title">{{generateTitle(item.meta.title)}}</span>
        </template>

-        <template v-if="!child.hidden" v-for="child in item.children">
+        <template v-for="child in item.children" v-if="!child.hidden">
          <sidebar-item class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>

          <router-link v-else :to="item.path+'/'+child.path" :key="child.name">
@@ -32,6 +32,8 @@
 </template>

 <script>
+import { generateTitle } from '@/utils/i18n'
+
 export default {
  name: 'SidebarItem',
  props: {
@@ -40,9 +42,7 @@ export default {
    }
  },
  methods: {
-    generateTitle(title) {
-      return this.$t('route.' + title)
-    }
+    generateTitle
  }
 }
 </script>
--- a/src/views/layout/components/TagsView.vue
+++ b/src/views/layout/components/TagsView.vue
@@ -1,45 +1,65 @@
 <template>
-  <scroll-pane class='tags-view-container' ref='scrollPane'>
-    <router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path":key="tag.path">
-      {{$t('route.'+tag.title)}}
-      <span class='el-icon-close' @click='closeViewTags(tag,$event)'></span>
-    </router-link>
-  </scroll-pane>
+  <div class="tags-view-container">
+    <scroll-pane class='tags-view-wrapper' ref='scrollPane'>
+      <router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path" @contextmenu.prevent.native="openMenu(tag,$event)">
+        {{generateTitle(tag.title)}}
+        <span class='el-icon-close' @click.prevent.stop='closeSelectedTag(tag)'></span>
+      </router-link>
+    </scroll-pane>
+    <ul class='contextmenu' v-show="visible" :style="{left:left+'px',top:top+'px'}">
+      <li @click="closeSelectedTag(selectedTag)">Close</li>
+      <li @click="closeOthersTags">Close Others</li>
+      <li @click="closeAllTags">Close All</li>
+    </ul>
+  </div>
 </template>

 <script>
 import ScrollPane from '@/components/ScrollPane'
+import { generateTitle } from '@/utils/i18n'

 export default {
  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {}
+    }
+  },
  computed: {
    visitedViews() {
-      return this.$store.state.app.visitedViews
+      return this.$store.state.tagsView.visitedViews
+    }
+  },
+  watch: {
+    $route() {
+      this.addViewTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        window.addEventListener('click', this.closeMenu)
+      } else {
+        window.removeEventListener('click', this.closeMenu)
+      }
    }
  },
  mounted() {
    this.addViewTags()
  },
  methods: {
-    closeViewTags(view, $event) {
-      this.$store.dispatch('delVisitedViews', view).then((views) => {
-        if (this.isActive(view)) {
-          const latestView = views.slice(-1)[0]
-          if (latestView) {
-            this.$router.push(latestView.path)
-          } else {
-            this.$router.push('/')
-          }
-        }
-      })
-      $event.preventDefault()
-    },
+    generateTitle, // generateTitle by vue-i18n
    generateRoute() {
      if (this.$route.name) {
        return this.$route
      }
      return false
    },
+    isActive(route) {
+      return route.path === this.$route.path || route.name === this.$route.name
+    },
    addViewTags() {
      const route = this.generateRoute()
      if (!route) {
@@ -47,9 +67,6 @@ export default {
      }
      this.$store.dispatch('addVisitedViews', route)
    },
-    isActive(route) {
-      return route.path === this.$route.path || route.name === this.$route.name
-    },
    moveToCurrentTag() {
      const tags = this.$refs.tag
      this.$nextTick(() => {
@@ -60,13 +77,37 @@ export default {
          }
        }
      })
-    }
-
-  },
-  watch: {
-    $route() {
-      this.addViewTags()
-      this.moveToCurrentTag()
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('delVisitedViews', view).then((views) => {
+        if (this.isActive(view)) {
+          const latestView = views.slice(-1)[0]
+          if (latestView) {
+            this.$router.push(latestView.path)
+          } else {
+            this.$router.push('/')
+          }
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag.path)
+      this.$store.dispatch('delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags() {
+      this.$store.dispatch('delAllViews')
+      this.$router.push('/')
+    },
+    openMenu(tag, e) {
+      this.visible = true
+      this.selectedTag = tag
+      this.left = e.clientX
+      this.top = e.clientY
+    },
+    closeMenu() {
+      this.visible = false
    }
  }
 }
@@ -74,38 +115,61 @@ export default {

 <style rel="stylesheet/scss" lang="scss" scoped>
 .tags-view-container {
-  background: #fff;
-  height: 34px;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
-  .tags-view-item {
-    display: inline-block;
-    position: relative;
-    height: 26px;
-    line-height: 26px;
-    border: 1px solid #d8dce5;
-    color: #495060;
+  .tags-view-wrapper {
    background: #fff;
-    padding: 0 8px;
-    font-size: 12px;
-    margin-left: 5px;
-    margin-top: 4px;
-    &:first-of-type {
-      margin-left: 15px;
+    height: 34px;
+    border-bottom: 1px solid #d8dce5;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+    .tags-view-item {
+      display: inline-block;
+      position: relative;
+      height: 26px;
+      line-height: 26px;
+      border: 1px solid #d8dce5;
+      color: #495060;
+      background: #fff;
+      padding: 0 8px;
+      font-size: 12px;
+      margin-left: 5px;
+      margin-top: 4px;
+      &:first-of-type {
+        margin-left: 15px;
+      }
+      &.active {
+        background-color: #42b983;
+        color: #fff;
+        border-color: #42b983;
+        &::before {
+          content: '';
+          background: #fff;
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          position: relative;
+          margin-right: 2px;
+        }
+      }
    }
-    &.active {
-      background-color: #42b983;
-      color: #fff;
-      border-color: #42b983;
-      &::before {
-        content: '';
-        background: #fff;
-        display: inline-block;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        position: relative;
-        margin-right: 2px;
+  }
+  .contextmenu {
+    margin: 0;
+    background: #fff;
+    z-index: 2;
+    position: absolute;
+    list-style-type: none;
+    padding: 5px 0;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #333;
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+    li {
+      margin: 0;
+      padding: 7px 16px;
+      cursor: pointer;
+      &:hover {
+        background: #eee;
      }
    }
  }
@@ -113,7 +177,8 @@ export default {
 </style>

 <style rel="stylesheet/scss" lang="scss">
-.tags-view-container {
+//reset element css of el-icon-close
+.tags-view-wrapper {
  .tags-view-item {
    .el-icon-close {
      width: 16px;
--- a/src/views/zip/index.vue
+++ b/src/views/zip/index.vue
@@ -59,13 +59,12 @@ export default {
    },
    handleDownload() {
      this.downloadLoading = true
-      require.ensure([], () => {
-        const { export_txt_to_zip } = require('vendor/Export2Zip')
+      import('@/vendor/Export2Zip').then(zip => {
        const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        const list = this.list
        const data = this.formatJson(filterVal, list)
-        export_txt_to_zip(tHeader, data, this.filename, this.filename)
+        zip.export_txt_to_zip(tHeader, data, this.filename, this.filename)
        this.downloadLoading = false
      })
    },
Author	SHA1	Message	Date
Pan	093475ee50	[release] 3.4.1	2017-12-22 11:10:46 +08:00
Pan	cb3578e5c3	perf[drag-table]:refine the effect && fixed row-key bug	2017-12-22 11:09:54 +08:00
tlx6550	fe25c4d96b	fix[tags-view]: fixed bug in DEL_OTHERS_VIEWS (#368 )	2017-12-22 10:29:47 +08:00
Pan	7fef8568c2	perf: use import replace require.ensure	2017-12-21 13:25:29 +08:00
Pan	0dfa56c73e	perf: element-ui css	2017-12-18 18:47:06 +08:00
Pan	642d48e372	fix :fixed typo	2017-12-18 10:25:53 +08:00
Pan	021c147b31	perf:code	2017-12-18 10:19:35 +08:00
Pan	04d9b849dd	rm eventsource-polyfill	2017-12-15 14:25:36 +08:00
Pan	2e74f0d782	[release]: 3.4.0	2017-12-15 14:09:51 +08:00
花裤衩	dc162093cc	refactor[core]: use webpack-dev-server now (#355 ) * bump deps: update vue-splitpane version * refactor[chore]: use webpack-dev-serve build * perf:settings * doc: uodate readme	2017-12-15 14:07:55 +08:00
Pan	8fd786c4ed	perf[tags-view]: when closeOthersTags moveToCurrentTag	2017-12-14 11:01:07 +08:00
Pan	54e7ce2b76	bump deps: update some deps version	2017-12-14 10:53:57 +08:00
Pan	f5563b4eed	[release] 3.3.0	2017-12-13 18:35:38 +08:00
Pan	0c80fba84c	doc: update readme	2017-12-13 18:35:07 +08:00
Pan	4d3bbae183	perf[tags-view]:refine the style && format code	2017-12-13 18:33:12 +08:00
leij1ang	b6d97f1806	feat[tags-view]: tags-view add contextmenu (#343 ) * add the menu by right-clicking the tags * bug fixed * refine	2017-12-13 17:43:03 +08:00
Pan	a68413cb8f	refactor[errorLog]: save the logs in vuex	2017-12-13 13:52:14 +08:00
Pan	f9aaaa9091	perf[errorLog]:optimized error-log	2017-12-12 18:14:31 +08:00
Pan	85492f148f	fix[scrollPane&&scrollBar]:fixed scroll bug in Firefox	2017-12-12 13:28:33 +08:00
Pan	b7ca786751	perf[chore]:set travis notifications:false	2017-12-11 14:20:23 +08:00
花裤衩	c32bd73b42	Update README.md	2017-12-11 14:06:14 +08:00
Pan	3aacd3cccd	add[chore]:add travis	2017-12-11 13:59:49 +08:00
Pan	e7f626f015	[release] 3.2.0	2017-12-08 18:20:15 +08:00
Pan	b53d0945ab	fix(dndList): fixed the name same as router	2017-12-08 18:09:15 +08:00
Pan	ca75f7bcbc	perf(tagsView):split to single modules	2017-12-08 16:17:40 +08:00
lvsmart	b7939165d1	get real version from node_modules	2017-12-08 11:49:34 +08:00
Pan	ebc2ac08b7	add(inlineEditable): add the calcel btn to restore the title	2017-12-08 11:07:20 +08:00
Pan	a9d2978c31	perf[permission]: set replace: true so the navigation will not leave a history record	2017-12-07 17:33:30 +08:00
Pan	a4597887ac	style:refine css	2017-12-07 16:03:07 +08:00
Pan	44b180a7b3	[release] 3.1.1	2017-12-06 14:19:06 +08:00
Pan	acebaeae0c	perf(i18n): add generateTitle to utils	2017-12-06 14:18:28 +08:00
Pan	d09923ff4f	fix[sidebar]:fixed when sidebar item only has one children but nested #327	2017-12-05 18:42:15 +08:00
Pan	fc1a13d10b	[release] 3.1.0	2017-12-05 11:41:57 +08:00