bump

https://github.com/PanJiaChen/vue-element-admin/issues/2608

README.es.md

@@ -49,6 +49,7 @@ Vue Element Admin es una solución práctica basada en la nueva plataforma de de
 - Plantilla base recomendada para usar: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
 - Aplicación de Escritorio: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 - Plantilla de Typescript: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Créditos: [@Armour](https://github.com/Armour))
+- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
 
 **Después de la versión `v4.1.0+`, la rama por defecto master no tendrá soporte para i18n. Por favor use [i18n](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), los cambios serán incluidos en la rama master**
 

README.ja.md

@@ -45,6 +45,7 @@
 - おすすめシンプルテンプレート: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
 - デスクトップバージョン: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 - Typescriptバージョン: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))
+- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
 
 **After the `v4.1.0+` version, the default master branch will not support i18n. Please use [i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), it will keep up with the master update**
 

README.md

@@ -49,6 +49,7 @@ It is a magical vue admin based on the newest development stack of vue, built-in
 - Base template recommends using: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
 - Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 - Typescript: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))
+- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
 
 **After the `v4.1.0+` version, the default master branch will not support i18n. Please use [i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), it will keep up with the master update**
 

README.zh-CN.md

@@ -49,6 +49,7 @@
 - 基础模板建议使用: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
 - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 - Typescript 版: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))
+- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
 
 **`v4.1.0+`版本之后默认 master 分支将不支持国际化，有需要的请使用[i18n](https://github.com/PanJiaChen/vue-element-admin/tree/i18n)分支，它会和 master 保持同步更新**
 
@@ -164,7 +165,7 @@ cd vue-element-admin
 # 安装依赖
 npm install
 
-# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
+# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
 npm install --registry=https://registry.npm.taobao.org
 
 # 启动服务

build/index.js

@@ -1,4 +1,4 @@
-const { run } = require('runjs')
+const { sh } = require('tasksfile')
 const chalk = require('chalk')
 const config = require('../vue.config.js')
 const rawArgv = process.argv.slice(2)
@@ -7,7 +7,7 @@ const args = rawArgv.join(' ')
 if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
   const report = rawArgv.includes('--report')
 
-  run(`vue-cli-service build ${args}`)
+  sh(`vue-cli-service build ${args}`)
 
   const port = 9526
   const publicPath = config.publicPath
@@ -31,5 +31,5 @@ if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
 
   })
 } else {
-  run(`vue-cli-service build ${args}`)
+  sh(`vue-cli-service build ${args}`)
 }

jsconfig.json

@@ -0,0 +1,9 @@
+{ 
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+        "@/*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

package.json

@@ -43,63 +43,63 @@
     "url": "https://github.com/PanJiaChen/vue-element-admin/issues"
   },
   "dependencies": {
-    "axios": "0.18.0",
+    "axios": "0.18.1",
     "clipboard": "2.0.4",
-    "codemirror": "5.45.0",
-    "driver.js": "0.9.5",
+    "codemirror": "5.49.0",
+    "driver.js": "0.9.7",
     "dropzone": "5.5.1",
-    "echarts": "4.2.1",
-    "element-ui": "2.7.0",
-    "file-saver": "2.0.1",
-    "fuse.js": "3.4.4",
-    "js-cookie": "2.2.0",
+    "echarts": "4.3.0",
+    "element-ui": "2.12.0",
+    "file-saver": "2.0.2",
+    "fuse.js": "3.4.5",
+    "js-cookie": "2.2.1",
     "jsonlint": "1.6.3",
-    "jszip": "3.2.1",
+    "jszip": "3.2.2",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
-    "screenfull": "4.2.0",
+    "screenfull": "5.0.0",
     "showdown": "1.9.0",
-    "sortablejs": "1.8.4",
-    "tui-editor": "1.3.3",
+    "sortablejs": "1.10.1",
+    "tui-editor": "1.4.7",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
-    "vue-router": "3.0.2",
+    "vue-router": "3.1.3",
     "vue-splitpane": "1.0.4",
-    "vuedraggable": "2.20.0",
-    "vuex": "3.1.0",
-    "xlsx": "0.14.1"
+    "vuedraggable": "2.23.2",
+    "vuex": "3.1.1",
+    "xlsx": "0.15.1"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",
     "@babel/register": "7.0.0",
-    "@vue/cli-plugin-babel": "3.5.3",
-    "@vue/cli-plugin-eslint": "3.5.1",
-    "@vue/cli-plugin-unit-jest": "3.5.3",
-    "@vue/cli-service": "3.5.3",
+    "@vue/cli-plugin-babel": "3.11.0",
+    "@vue/cli-plugin-eslint": "3.11.0",
+    "@vue/cli-plugin-unit-jest": "3.11.0",
+    "@vue/cli-service": "3.11.0",
     "@vue/test-utils": "1.0.0-beta.29",
     "autoprefixer": "^9.5.1",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "10.0.1",
-    "babel-jest": "23.6.0",
+    "babel-eslint": "10.0.3",
+    "babel-jest": "24.9.0",
     "chalk": "2.4.2",
-    "chokidar": "2.1.5",
-    "connect": "3.6.6",
-    "eslint": "5.15.3",
-    "eslint-plugin-vue": "5.2.2",
+    "chokidar": "3.1.1",
+    "connect": "3.7.0",
+    "eslint": "6.5.1",
+    "eslint-plugin-vue": "5.2.3",
     "html-webpack-plugin": "3.2.0",
-    "husky": "1.3.1",
-    "lint-staged": "8.1.5",
+    "husky": "3.0.8",
+    "lint-staged": "9.4.2",
     "mockjs": "1.0.1-beta3",
     "node-sass": "^4.9.0",
-    "plop": "2.3.0",
-    "runjs": "^4.3.2",
+    "plop": "2.4.0",
+    "tasksfile": "5.1.0",
     "sass-loader": "^7.1.0",
-    "script-ext-html-webpack-plugin": "2.1.3",
+    "script-ext-html-webpack-plugin": "2.1.4",
     "script-loader": "0.7.2",
     "serve-static": "^1.13.2",
-    "svg-sprite-loader": "4.1.3",
-    "svgo": "1.2.0",
+    "svg-sprite-loader": "4.1.6",
+    "svgo": "1.3.0",
     "vue-template-compiler": "2.6.10"
   },
   "engines": {

src/components/MDinput/index.vue

@@ -9,7 +9,7 @@
         :placeholder="fillPlaceHolder"
         :readonly="readonly"
         :disabled="disabled"
-        :autoComplete="autoComplete"
+        :autocomplete="autoComplete"
         :required="required"
         type="email"
         class="material-input"
@@ -24,7 +24,7 @@
         :placeholder="fillPlaceHolder"
         :readonly="readonly"
         :disabled="disabled"
-        :autoComplete="autoComplete"
+        :autocomplete="autoComplete"
         :required="required"
         type="url"
         class="material-input"
@@ -40,7 +40,7 @@
         :step="step"
         :readonly="readonly"
         :disabled="disabled"
-        :autoComplete="autoComplete"
+        :autocomplete="autoComplete"
         :max="max"
         :min="min"
         :minlength="minlength"
@@ -59,7 +59,7 @@
         :placeholder="fillPlaceHolder"
         :readonly="readonly"
         :disabled="disabled"
-        :autoComplete="autoComplete"
+        :autocomplete="autoComplete"
         :max="max"
         :min="min"
         :required="required"
@@ -76,7 +76,7 @@
         :placeholder="fillPlaceHolder"
         :readonly="readonly"
         :disabled="disabled"
-        :autoComplete="autoComplete"
+        :autocomplete="autoComplete"
         :required="required"
         type="tel"
         class="material-input"
@@ -91,7 +91,7 @@
         :placeholder="fillPlaceHolder"
         :readonly="readonly"
         :disabled="disabled"
-        :autoComplete="autoComplete"
+        :autocomplete="autoComplete"
         :minlength="minlength"
         :maxlength="maxlength"
         :required="required"

src/components/PanThumb/index.vue

@@ -5,7 +5,8 @@
         <slot />
       </div>
     </div>
-    <img :src="image" class="pan-thumb">
+    <!-- eslint-disable-next-line -->
+    <div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
   </div>
 </template>
 
@@ -52,7 +53,8 @@ export default {
 .pan-thumb {
   width: 100%;
   height: 100%;
-  background-size: 100%;
+  background-position: center center;
+  background-size: cover;
   border-radius: 50%;
   overflow: hidden;
   position: absolute;
@@ -60,7 +62,7 @@ export default {
   transition: all 0.3s ease-in-out;
 }
 
-.pan-thumb:after {
+/* .pan-thumb:after {
   content: '';
   width: 8px;
   height: 8px;
@@ -71,7 +73,7 @@ export default {
   margin: -4px 0 0 -4px;
   background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
   box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
-}
+} */
 
 .pan-info {
   position: absolute;

src/components/Screenfull/index.vue

@@ -22,7 +22,7 @@ export default {
   },
   methods: {
     click() {
-      if (!screenfull.enabled) {
+      if (!screenfull.isEnabled) {
         this.$message({
           message: 'you browser can not work',
           type: 'warning'
@@ -35,12 +35,12 @@ export default {
       this.isFullscreen = screenfull.isFullscreen
     },
     init() {
-      if (screenfull.enabled) {
+      if (screenfull.isEnabled) {
         screenfull.on('change', this.change)
       }
     },
     destroy() {
-      if (screenfull.enabled) {
+      if (screenfull.isEnabled) {
         screenfull.off('change', this.change)
       }
     }

src/filters/index.js

@@ -45,7 +45,7 @@ export function numberFormatter(num, digits) {
   ]
   for (let i = 0; i < si.length; i++) {
     if (num >= si[i].value) {
-      return (num / si[i].value + 0.1).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
+      return (num / si[i].value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
     }
   }
   return num.toString()

src/layout/components/TagsView/index.vue

@@ -155,7 +155,7 @@ export default {
     toLastView(visitedViews, view) {
       const latestView = visitedViews.slice(-1)[0]
       if (latestView) {
-        this.$router.push(latestView)
+        this.$router.push(latestView.fullPath)
       } else {
         // now the default is to redirect to the home page if there is no tags-view,
         // you can adjust it according to your needs.

src/store/modules/settings.js

@@ -13,7 +13,8 @@ const state = {
 
 const mutations = {
   CHANGE_SETTING: (state, { key, value }) => {
-    if (state.hasOwnProperty(key)) {
+    // https://eslint.org/docs/rules/no-prototype-builtins
+    if (Object.prototype.hasOwnProperty.call(state, key)) {
       state[key] = value
     }
   }

src/store/modules/tagsView.js

@@ -28,13 +28,8 @@ const mutations = {
     }
   },
   DEL_CACHED_VIEW: (state, view) => {
-    for (const i of state.cachedViews) {
-      if (i === view.name) {
-        const index = state.cachedViews.indexOf(i)
-        state.cachedViews.splice(index, 1)
-        break
-      }
-    }
+    const index = state.cachedViews.indexOf(view.name)
+    index > -1 && state.cachedViews.splice(index, 1)
   },
 
   DEL_OTHERS_VISITED_VIEWS: (state, view) => {
@@ -43,12 +38,12 @@ const mutations = {
     })
   },
   DEL_OTHERS_CACHED_VIEWS: (state, view) => {
-    for (const i of state.cachedViews) {
-      if (i === view.name) {
-        const index = state.cachedViews.indexOf(i)
-        state.cachedViews = state.cachedViews.slice(index, index + 1)
-        break
-      }
+    const index = state.cachedViews.indexOf(view.name)
+    if (index > -1) {
+      state.cachedViews = state.cachedViews.slice(index, index + 1)
+    } else {
+      // if index = -1, there is no cached tags
+      state.cachedViews = []
     }
   },
 

src/store/modules/user.js

@@ -73,13 +73,18 @@ const actions = {
   },
 
   // user logout
-  logout({ commit, state }) {
+  logout({ commit, state, dispatch }) {
     return new Promise((resolve, reject) => {
       logout(state.token).then(() => {
         commit('SET_TOKEN', '')
         commit('SET_ROLES', [])
         removeToken()
         resetRouter()
+
+        // reset visited views and cached views
+        // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
+        dispatch('tagsView/delAllViews', null, { root: true })
+
         resolve()
       }).catch(error => {
         reject(error)
@@ -99,6 +104,7 @@ const actions = {
 
   // dynamically modify permissions
   changeRoles({ commit, dispatch }, role) {
+    // eslint-disable-next-line
     return new Promise(async resolve => {
       const token = role + '-token'
 

src/utils/clipboard.js

@@ -22,14 +22,10 @@ export default function handleClipboard(text, event) {
   })
   clipboard.on('success', () => {
     clipboardSuccess()
-    clipboard.off('error')
-    clipboard.off('success')
     clipboard.destroy()
   })
   clipboard.on('error', () => {
     clipboardError()
-    clipboard.off('error')
-    clipboard.off('success')
     clipboard.destroy()
   })
   clipboard.onClick(event)

src/utils/index.js

@@ -6,7 +6,7 @@
  * Parse the time to string
  * @param {(Object|string|number)} time
  * @param {string} cFormat
- * @returns {string}
+ * @returns {string | null}
  */
 export function parseTime(time, cFormat) {
   if (arguments.length === 0) {
@@ -34,14 +34,11 @@ export function parseTime(time, cFormat) {
     s: date.getSeconds(),
     a: date.getDay()
   }
-  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
-    let value = formatObj[key]
+  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
+    const value = formatObj[key]
     // Note: getDay() returns 0 on Sunday
     if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
-    if (result.length > 0 && value < 10) {
-      value = '0' + value
-    }
-    return value || 0
+    return value.toString().padStart(2, '0')
   })
   return time_str
 }

src/utils/request.js

@@ -6,7 +6,7 @@ import { getToken } from '@/utils/auth'
 // create an axios instance
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
-  withCredentials: true, // send cookies when cross-domain requests
+  // withCredentials: true, // send cookies when cross-domain requests
   timeout: 5000 // request timeout
 })
 

src/vendor/Export2Excel.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-require('script-loader!file-saver');
+import { saveAs } from 'file-saver'
 import XLSX from 'xlsx'
 
 function generateArray(table) {
@@ -151,14 +151,14 @@ export function export_json_to_excel({
   filename,
   merges = [],
   autoWidth = true,
-  bookType=  'xlsx'
+  bookType = 'xlsx'
 } = {}) {
   /* original data */
   filename = filename || 'excel-list'
   data = [...data]
   data.unshift(header);
 
-  for (let i = multiHeader.length-1; i > -1; i--) {
+  for (let i = multiHeader.length - 1; i > -1; i--) {
     data.unshift(multiHeader[i])
   }
 

src/vendor/Export2Zip.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-require('script-loader!file-saver');
+import { saveAs } from 'file-saver'
 import JSZip from 'jszip'
 
 export function export_txt_to_zip(th, jsonData, txtName, zipName) {

src/views/clipboard/index.vue

@@ -3,13 +3,13 @@
     <el-tabs v-model="activeName">
       <el-tab-pane label="use clipboard  directly" name="directly">
         <el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
-        <el-button type="primary" icon="document" @click="handleCopy(inputData,$event)">
+        <el-button type="primary" icon="el-icon-document" @click="handleCopy(inputData,$event)">
           copy
         </el-button>
       </el-tab-pane>
       <el-tab-pane label="use clipboard by v-directive" name="v-directive">
         <el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
-        <el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="document">
+        <el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="el-icon-document">
           copy
         </el-button>
       </el-tab-pane>

src/views/components-demo/avatar-upload.vue

@@ -7,7 +7,7 @@
 
     <pan-thumb :image="image" />
 
-    <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
+    <el-button type="primary" icon="el-icon-upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
       Change Avatar
     </el-button>
 

src/views/components-demo/mixin.vue

@@ -49,7 +49,7 @@
           <div style="height:100px;">
             <el-form :model="demo" :rules="demoRules">
               <el-form-item prop="title">
-                <md-input v-model="demo.title" icon="search" name="title" placeholder="输入标题">
+                <md-input v-model="demo.title" icon="el-icon-search" name="title" placeholder="输入标题">
                   标题
                 </md-input>
               </el-form-item>

src/views/dashboard/admin/components/mixins/resize.js

@@ -3,10 +3,16 @@ import { debounce } from '@/utils'
 export default {
   data() {
     return {
-      $_sidebarElm: null
+      $_sidebarElm: null,
+      $_resizeHandler: null
     }
   },
   mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
     this.$_initResizeEvent()
     this.$_initSidebarResizeEvent()
   },
@@ -27,13 +33,6 @@ export default {
   methods: {
     // use $_ for mixins properties
     // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
-    $_resizeHandler() {
-      return debounce(() => {
-        if (this.chart) {
-          this.chart.resize()
-        }
-      }, 100)()
-    },
     $_initResizeEvent() {
       window.addEventListener('resize', this.$_resizeHandler)
     },

src/views/error-page/401.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="errPage-container">
-    <el-button icon="arrow-left" class="pan-back-btn" @click="back">
+    <el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
       返回
     </el-button>
     <el-row>

src/views/example/components/ArticleDetail.vue

@@ -7,7 +7,7 @@
         <PlatformDropdown v-model="postForm.platforms" />
         <SourceUrlDropdown v-model="postForm.source_uri" />
         <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
-          Publush
+          Publish
         </el-button>
         <el-button v-loading="loading" type="warning" @click="draftForm">
           Draft
@@ -36,7 +36,7 @@
                 </el-col>
 
                 <el-col :span="10">
-                  <el-form-item label-width="120px" label="Publush Time:" class="postInfo-container-item">
+                  <el-form-item label-width="120px" label="Publish Time:" class="postInfo-container-item">
                     <el-date-picker v-model="displayTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Select date and time" />
                   </el-form-item>
                 </el-col>
@@ -170,8 +170,6 @@ export default {
     if (this.isEdit) {
       const id = this.$route.params && this.$route.params.id
       this.fetchData(id)
-    } else {
-      this.postForm = Object.assign({}, defaultForm)
     }
 
     // Why need to make a copy of this.$route here?

src/views/example/create.vue

@@ -6,7 +6,7 @@
 import ArticleDetail from './components/ArticleDetail'
 
 export default {
-  name: 'CreateForm',
+  name: 'CreateArticle',
   components: { ArticleDetail }
 }
 </script>

src/views/excel/export-excel.vue

@@ -5,7 +5,7 @@
       <FilenameOption v-model="filename" />
       <AutoWidthOption v-model="autoWidth" />
       <BookTypeOption v-model="bookType" />
-      <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">
+      <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
         Export Excel
       </el-button>
       <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">

src/views/excel/merge-header.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
 
-    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">Export</el-button>
+    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="el-icon-document" @click="handleDownload">Export</el-button>
 
     <el-table
       ref="multipleTable"

src/views/excel/select-excel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:350px;" prefix-icon="el-icon-document" />
-    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">
+    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="el-icon-document" @click="handleDownload">
       Export Selected Items
     </el-button>
     <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">

src/views/login/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="login-container">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
 
       <div class="title-container">
         <h3 class="title">Login Form</h3>
@@ -17,7 +17,7 @@
           name="username"
           type="text"
           tabindex="1"
-          auto-complete="on"
+          autocomplete="on"
         />
       </el-form-item>
 
@@ -34,7 +34,7 @@
             placeholder="Password"
             name="password"
             tabindex="2"
-            auto-complete="on"
+            autocomplete="on"
             @keyup.native="checkCapslock"
             @blur="capsTooltip = false"
             @keyup.enter.native="handleLogin"

src/views/permission/role.vue

@@ -228,7 +228,7 @@ export default {
         dangerouslyUseHTMLString: true,
         message: `
             <div>Role Key: ${key}</div>
-            <div>Role Nmae: ${name}</div>
+            <div>Role Name: ${name}</div>
             <div>Description: ${description}</div>
           `,
         type: 'success'

src/views/tab/index.vue

@@ -36,7 +36,7 @@ export default {
     }
   },
   created() {
-    // init the default  selected tab
+    // init the default selected tab
     const tab = this.$route.query.tab
     if (tab) {
       this.activeName = tab

src/views/table/complex-table.vue

@@ -35,7 +35,7 @@
       style="width: 100%;"
       @sort-change="sortChange"
     >
-      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
+      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
         </template>
@@ -375,6 +375,14 @@ export default {
           return v[j]
         }
       }))
+    },
+    getSortClass: function(key) {
+      const sort = this.listQuery.sort
+      return sort === `+${key}`
+        ? 'ascending'
+        : sort === `-${key}`
+          ? 'descending'
+          : ''
     }
   }
 }

src/views/zip/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <el-input v-model="filename" placeholder="Please enter the file name (default file)" style="width:300px;" prefix-icon="el-icon-document" />
-    <el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="document" @click="handleDownload">
+    <el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="el-icon-document" @click="handleDownload">
       Export Zip
     </el-button>
     <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>

vue.config.js

@@ -7,10 +7,13 @@ function resolve(dir) {
 }
 
 const name = defaultSettings.title || 'vue Element Admin' // page title
+
 // If your port is set to 80,
 // use administrator privileges to execute the command line.
 // For example, Mac: sudo npm run
-const port = 9527 // dev port
+// You can change the port by the following method:
+// port = 9527 npm run dev OR npm run dev --port = 9527
+const port = process.env.port || process.env.npm_config_port || 9527 // dev port
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {