refactor

To fixed https://github.com/PanJiaChen/vue-element-admin/issues/2586

.github/FUNDING.yml

@@ -0,0 +1,4 @@
+# These are supported funding model platforms
+
+patreon: panjiachen
+custom: https://panjiachen.github.io/vue-element-admin-site/donate

.github/ISSUE_TEMPLATE/question.md

@@ -12,3 +12,24 @@ about: Asking questions about use
     Before asking a question, please make sure that you have tried your best to solve this problem.
     If it's a code-related issue, please don't just take screenshots. Please provide an online demo to save each other's time.
 -->
+
+#### Steps to reproduce（问题复现步骤）
+<!--
+1. [xxx]
+2. [xxx]
+3. [xxxx]
+-->
+
+#### Screenshot or Gif（截图或动态图）
+
+
+#### Link to minimal reproduction（最小可在线还原demo）
+
+<!--
+Please only use Codepen, JSFiddle, CodeSandbox or a github repo
+-->
+
+#### Other relevant information（格外信息）
+- Your OS:
+- Node.js version:
+- vue-element-admin version:

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
 
 # 启动服务

jsconfig.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-element-admin",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",
   "author": "Pan <panfree23@gmail.com>",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "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",
@@ -74,10 +74,11 @@
     "@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-eslint": "^3.9.1",
     "@vue/cli-plugin-unit-jest": "3.5.3",
     "@vue/cli-service": "3.5.3",
     "@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",

src/components/ImageCropper/index.vue

@@ -839,16 +839,20 @@ export default {
           that.$emit('crop-upload-fail', err, field, ki)
         }
       })
+    },
+    closeHandler(e) {
+      if (this.value && (e.key == 'Escape' || e.keyCode == 27)) {
+        this.off()
+      }
     }
   },
   created() {
     // 绑定按键esc隐藏此插件事件
-    document.addEventListener('keyup', (e) => {
+    document.addEventListener('keyup', this.closeHandler)
-      if (this.value && (e.key == 'Escape' || e.keyCode == 27)) {
+  },
-        this.off()
+  destroyed() {
-      }
+    document.removeEventListener('keyup', this.closeHandler)
-    })
+  },
-  }
 }
 </script>
 

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/Tinymce/dynamicLoadScript.js

@@ -1,3 +1,11 @@
+let callbacks = []
+
+function loadedTinymce() {
+  // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
+  // check is successfully downloaded script
+  return window.tinymce
+}
+
 const dynamicLoadScript = (src, callback) => {
   const existingScript = document.getElementById(src)
   const cb = callback || function() {}
@@ -7,32 +15,44 @@ const dynamicLoadScript = (src, callback) => {
     script.src = src // src url for the third-party library being loaded.
     script.id = src
     document.body.appendChild(script)
-
+    callbacks.push(cb)
     const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd
-    onEnd(script, cb)
+    onEnd(script)
   }
 
-  if (existingScript && cb) cb(null, existingScript)
+  if (existingScript && cb) {
+    if (loadedTinymce()) {
+      cb(null, existingScript)
+    } else {
+      callbacks.push(cb)
+    }
+  }
 
-  function stdOnEnd(script, cb) {
+  function stdOnEnd(script) {
     script.onload = function() {
       // this.onload = null here is necessary
       // because even IE9 works not like others
       this.onerror = this.onload = null
+      for (const cb of callbacks) {
         cb(null, script)
       }
+      callbacks = null
+    }
     script.onerror = function() {
       this.onerror = this.onload = null
       cb(new Error('Failed to load ' + src), script)
     }
   }
 
-  function ieOnEnd(script, cb) {
+  function ieOnEnd(script) {
     script.onreadystatechange = function() {
       if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
       this.onreadystatechange = null
+      for (const cb of callbacks) {
         cb(null, script) // there is no way to catch loading errors in IE8
       }
+      callbacks = null
+    }
   }
 }
 

src/components/Tinymce/index.vue

@@ -64,7 +64,9 @@ export default {
       fullscreen: false,
       languageTypeList: {
         'en': 'en',
-        'zh': 'zh_CN'
+        'zh': 'zh_CN',
+        'es': 'es_MX',
+        'ja': 'ja'
       }
     }
   },
@@ -114,6 +116,7 @@ export default {
       const _this = this
       window.tinymce.init({
         selector: `#${this.tinymceId}`,
+        language: this.languageTypeList['en'],
         height: this.height,
         body_class: 'panel-body ',
         object_resizing: false,

src/layout/components/AppMain.vue

@@ -16,7 +16,7 @@ export default {
       return this.$store.state.tagsView.cachedViews
     },
     key() {
-      return this.$route.fullPath
+      return this.$route.path
     }
   }
 }

src/utils/clipboard.js

@@ -1,36 +1,47 @@
 import Vue from 'vue'
 import Clipboard from 'clipboard'
 
-function clipboardSuccess() {
+const VueClipboardConfig = {
+  autoSetContainer: false,
+  appendToBody: true // This fixes IE, see #50
+}
+
+function clipboardSuccess(successText) {
   Vue.prototype.$message({
-    message: 'Copy successfully',
+    message: successText || 'Copy successfully',
     type: 'success',
     duration: 1500
   })
 }
 
-function clipboardError() {
+function clipboardError(errorText) {
   Vue.prototype.$message({
-    message: 'Copy failed',
+    message: errorText || 'Copy failed',
     type: 'error'
   })
 }
 
-export default function handleClipboard(text, event) {
+export default function handleClipboard({ text, container, successText, errorText } = {}) {
-  const clipboard = new Clipboard(event.target, {
+  return new Promise(function(resolve, reject) {
-    text: () => text
+    var fakeElement = document.createElement('button')
+    var clipboard = new Clipboard(fakeElement, {
+      text: function() { return text },
+      action: function() { return 'copy' },
+      container: typeof container === 'object' ? container : document.body
     })
-  clipboard.on('success', () => {
+
-    clipboardSuccess()
+    clipboard.on('success', function(e) {
-    clipboard.off('error')
-    clipboard.off('success')
       clipboard.destroy()
+      clipboardSuccess(successText)
+      resolve(e)
     })
-  clipboard.on('error', () => {
+    clipboard.on('error', function(e) {
-    clipboardError()
-    clipboard.off('error')
-    clipboard.off('success')
       clipboard.destroy()
+      clipboardError(errorText)
+      reject(e)
+    })
+    if (VueClipboardConfig.appendToBody) document.body.appendChild(fakeElement)
+    fakeElement.click()
+    if (VueClipboardConfig.appendToBody) document.body.removeChild(fakeElement)
   })
-  clipboard.onClick(event)
 }

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
 })
 
@@ -48,7 +48,7 @@ service.interceptors.response.use(
     // if the custom code is not 20000, it is judged as an error.
     if (res.code !== 20000) {
       Message({
-        message: res.message || 'error',
+        message: res.message || 'Error',
         type: 'error',
         duration: 5 * 1000
       })
@@ -66,7 +66,7 @@ service.interceptors.response.use(
           })
         })
       }
-      return Promise.reject(res.message || 'error')
+      return Promise.reject(new Error(res.message || 'Error'))
     } else {
       return res
     }

src/views/clipboard/index.vue

@@ -1,15 +1,20 @@
 <template>
   <div class="app-container">
+
+    <aside>
+      <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/feature/component/clipboard.html">Documentation</a>
+    </aside>
+
     <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)">
           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>
@@ -33,8 +38,11 @@ export default {
     }
   },
   methods: {
-    handleCopy(text, event) {
+    handleCopy(text) {
-      clip(text, event)
+      // return a promise
+      clip({ text: text }).then(() => {
+        console.log('success')
+      })
     },
     clipboardSuccess() {
       this.$message({

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/BarChart.vue

@@ -5,11 +5,12 @@
 <script>
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
-import { debounce } from '@/utils'
+import resize from './mixins/resize'
 
 const animationDuration = 6000
 
 export default {
+  mixins: [resize],
   props: {
     className: {
       type: String,
@@ -33,18 +34,11 @@ export default {
     this.$nextTick(() => {
       this.initChart()
     })
-    this.__resizeHandler = debounce(() => {
-      if (this.chart) {
-        this.chart.resize()
-      }
-    }, 100)
-    window.addEventListener('resize', this.__resizeHandler)
   },
   beforeDestroy() {
     if (!this.chart) {
       return
     }
-    window.removeEventListener('resize', this.__resizeHandler)
     this.chart.dispose()
     this.chart = null
   },

src/views/dashboard/admin/components/LineChart.vue

@@ -5,9 +5,10 @@
 <script>
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
-import { debounce } from '@/utils'
+import resize from './mixins/resize'
 
 export default {
+  mixins: [resize],
   props: {
     className: {
       type: String,
@@ -32,8 +33,7 @@ export default {
   },
   data() {
     return {
-      chart: null,
+      chart: null
-      sidebarElm: null
     }
   },
   watch: {
@@ -48,38 +48,18 @@ export default {
     this.$nextTick(() => {
       this.initChart()
     })
-
-    if (this.autoResize) {
-      this.__resizeHandler = debounce(() => {
-        if (this.chart) {
-          this.chart.resize()
-        }
-      }, 100)
-      window.addEventListener('resize', this.__resizeHandler)
-    }
-
-    // 监听侧边栏的变化
-    this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-    this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
   },
   beforeDestroy() {
     if (!this.chart) {
       return
     }
-    if (this.autoResize) {
-      window.removeEventListener('resize', this.__resizeHandler)
-    }
-
-    this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)
-
     this.chart.dispose()
     this.chart = null
   },
   methods: {
-    sidebarResizeHandler(e) {
+    initChart() {
-      if (e.propertyName === 'width') {
+      this.chart = echarts.init(this.$el, 'macarons')
-        this.__resizeHandler()
+      this.setOptions(this.chartData)
-      }
     },
     setOptions({ expectedData, actualData } = {}) {
       this.chart.setOption({
@@ -149,10 +129,6 @@ export default {
           animationEasing: 'quadraticOut'
         }]
       })
-    },
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.chartData)
     }
   }
 }

src/views/dashboard/admin/components/PieChart.vue

@@ -5,9 +5,10 @@
 <script>
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
-import { debounce } from '@/utils'
+import resize from './mixins/resize'
 
 export default {
+  mixins: [resize],
   props: {
     className: {
       type: String,
@@ -31,18 +32,11 @@ export default {
     this.$nextTick(() => {
       this.initChart()
     })
-    this.__resizeHandler = debounce(() => {
-      if (this.chart) {
-        this.chart.resize()
-      }
-    }, 100)
-    window.addEventListener('resize', this.__resizeHandler)
   },
   beforeDestroy() {
     if (!this.chart) {
       return
     }
-    window.removeEventListener('resize', this.__resizeHandler)
     this.chart.dispose()
     this.chart = null
   },

src/views/dashboard/admin/components/RaddarChart.vue

@@ -5,11 +5,12 @@
 <script>
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
-import { debounce } from '@/utils'
+import resize from './mixins/resize'
 
 const animationDuration = 3000
 
 export default {
+  mixins: [resize],
   props: {
     className: {
       type: String,
@@ -33,18 +34,11 @@ export default {
     this.$nextTick(() => {
       this.initChart()
     })
-    this.__resizeHandler = debounce(() => {
-      if (this.chart) {
-        this.chart.resize()
-      }
-    }, 100)
-    window.addEventListener('resize', this.__resizeHandler)
   },
   beforeDestroy() {
     if (!this.chart) {
       return
     }
-    window.removeEventListener('resize', this.__resizeHandler)
     this.chart.dispose()
     this.chart = null
   },

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

@@ -0,0 +1,55 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  beforeDestroy() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  // to fixed bug when cached by keep-alive
+  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
+  activated() {
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  deactivated() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_initResizeEvent() {
+      window.addEventListener('resize', this.$_resizeHandler)
+    },
+    $_destroyResizeEvent() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+    },
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    $_initSidebarResizeEvent() {
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    $_destroySidebarResizeEvent() {
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    }
+  }
+}

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>
@@ -49,7 +49,7 @@
                       :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                       :low-threshold="1"
                       :high-threshold="3"
-                      style="margin-top:8px;"
+                      style="display:inline-block"
                     />
                   </el-form-item>
                 </el-col>

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/icons/index.vue

@@ -6,7 +6,7 @@
     </aside>
     <el-tabs type="border-card">
       <el-tab-pane label="Icons">
-        <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
+        <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item))">
           <el-tooltip placement="top">
             <div slot="content">
               {{ generateIconCode(item) }}
@@ -19,7 +19,7 @@
         </div>
       </el-tab-pane>
       <el-tab-pane label="Element-UI Icons">
-        <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
+        <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item))">
           <el-tooltip placement="top">
             <div slot="content">
               {{ generateElementIconCode(item) }}
@@ -55,8 +55,8 @@ export default {
     generateElementIconCode(symbol) {
       return `<i class="el-icon-${symbol}" />`
     },
-    handleClipboard(text, event) {
+    handleClipboard(text) {
-      clipboard(text, event)
+      clipboard({ text: text })
     }
   }
 }

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

@@ -30,6 +30,18 @@ export default {
       createdTimes: 0
     }
   },
+  watch: {
+    activeName(val) {
+      this.$router.push(`${this.$route.path}?tab=${val}`)
+    }
+  },
+  created() {
+    // init the default selected tab
+    const tab = this.$route.query.tab
+    if (tab) {
+      this.activeName = tab
+    }
+  },
   methods: {
     showCreatedTimes() {
       this.createdTimes = this.createdTimes + 1

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 = {
@@ -37,7 +40,7 @@ module.exports = {
       // change xxx-api/login => mock/login
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:${port}/mock`,
+        target: `http://127.0.0.1:${port}/mock`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''