merge

.travis.yml

@@ -1,5 +1,5 @@
 language: node_js
-node_js: stable
+node_js: 10
 script: npm run test
 notifications:
   email: false

README.md

@@ -14,10 +14,10 @@ English | [简体中文](./README-zh.md)
 
 ```bash
 # clone the project
-git clone https://github.com/PanJiaChen/vue-element-admin.git
+git clone https://github.com/PanJiaChen/vue-admin-template.git
 
 # enter the project directory
-cd vue-element-admin
+cd vue-admin-template
 
 # install dependency
 npm install
@@ -26,7 +26,7 @@ npm install
 npm run dev
 ```
 
-This will automatically open http://localhost:9527
+This will automatically open http://localhost:9528
 
 ## Build
 

mock/mock-server.js

@@ -48,6 +48,7 @@ module.exports = app => {
     ignoreInitial: true
   }).on('all', (event, path) => {
     if (event === 'change' || event === 'add') {
+      try {
         // remove mock routes stack
         app._router.stack.splice(mockStartIndex, mockRoutesLength)
 
@@ -59,6 +60,9 @@ module.exports = app => {
         mockStartIndex = mockRoutes.mockStartIndex
 
         console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed  ${path}`))
+      } catch (error) {
+        console.log(chalk.redBright(error))
+      }
     }
   })
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-admin-template",
-  "version": "4.1.0",
+  "version": "4.2.1",
   "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
   "author": "Pan <panfree23@gmail.com>",
   "license": "MIT",
@@ -35,6 +35,7 @@
     "@vue/cli-plugin-unit-jest": "3.6.3",
     "@vue/cli-service": "3.6.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",
@@ -60,7 +61,6 @@
   },
   "browserslist": [
     "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
+    "last 2 versions"
   ]
 }

src/components/SvgIcon/index.vue

@@ -1,10 +1,14 @@
 <template>
-  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
     <use :xlink:href="iconName" />
   </svg>
 </template>
 
 <script>
+// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
+import { isExternal } from '@/utils/validate'
+
 export default {
   name: 'SvgIcon',
   props: {
@@ -18,6 +22,9 @@ export default {
     }
   },
   computed: {
+    isExternal() {
+      return isExternal(this.iconClass)
+    },
     iconName() {
       return `#icon-${this.iconClass}`
     },
@@ -27,6 +34,12 @@ export default {
       } else {
         return 'svg-icon'
       }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      }
     }
   }
 }
@@ -40,4 +53,10 @@ export default {
   fill: currentColor;
   overflow: hidden;
 }
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover!important;
+  display: inline-block;
+}
 </style>

src/layout/components/AppMain.vue

@@ -11,7 +11,7 @@ export default {
   name: 'AppMain',
   computed: {
     key() {
-      return this.$route.fullPath
+      return this.$route.path
     }
   }
 }
@@ -29,3 +29,12 @@ export default {
   padding-top: 50px;
 }
 </style>
+
+<style lang="scss">
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+  .fixed-header {
+    padding-right: 15px;
+  }
+}
+</style>

src/layout/index.vue

@@ -47,7 +47,7 @@ export default {
   },
   methods: {
     handleClickOutside() {
-      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
     }
   }
 }

src/main.js

@@ -22,8 +22,18 @@ Vue.use(VueAnalytics, {
   router
 })
 
+/**
+ * If you don't want to use mock-server
+ * you want to use MockJs for mock api
+ * you can execute: mockXHR()
+ *
+ * Currently MockJs will be used in the production environment,
+ * please remove it before going online! ! !
+ */
 import { mockXHR } from '../mock'
-mockXHR()
+if (process.env.NODE_ENV === 'production') {
+  mockXHR()
+}
 
 // set ElementUI lang to EN
 Vue.use(ElementUI, { locale })

src/styles/sidebar.scss

@@ -95,10 +95,6 @@
       margin-left: 54px;
     }
 
-    .svg-icon {
-      margin-right: 0px;
-    }
-
     .submenu-title-noDropdown {
       padding: 0 !important;
       position: relative;

src/utils/request.js

@@ -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
     }

vue.config.js

@@ -7,6 +7,9 @@ function resolve(dir) {
 }
 
 const name = defaultSettings.title || 'vue Admin Template' // 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 = 9528 // dev port
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
@@ -34,7 +37,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]: ''