'svgIcon组件/鉴权功能/动态设置页面标题/资源优化'

Ljhhhhhh · Oct 15, 2019 · 9d89d33 · 9d89d33
1 parent cce97e3
commit 9d89d33
Show file tree

Hide file tree

Showing 30 changed files with 731 additions and 52 deletions.
diff --git a/.env.development b/.env.development
@@ -0,0 +1,4 @@
+VUE_CLI_BABEL_TRANSPILE_MODULES = true
+NODE_ENV = 'development'
+BASE_URL = '/'
+VUE_APP_BASE_API = ''
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.19.0",
     "core-js": "2.6.5",
+    "js-cookie": "^2.2.1",
     "lib-flexible": "^0.3.2",
     "vant": "^2.2.5",
     "vue": "^2.6.10",
@@ -28,12 +29,18 @@
     "body-parser": "^1.19.0",
     "chalk": "^2.4.2",
     "chokidar": "^3.2.1",
+    "compression-webpack-plugin": "^3.0.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
     "mockjs": "^1.0.1-beta3",
     "postcss-pxtorem": "^4.0.1",
     "sass": "^1.18.0",
     "sass-loader": "^7.1.0",
-    "vue-template-compiler": "^2.6.10"
+    "script-ext-html-webpack-plugin": "^2.1.4",
+    "svg-sprite-loader": "^4.1.6",
+    "svgo": "^1.3.0",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "vue-template-compiler": "^2.6.10",
+    "webpack-bundle-analyzer": "^3.5.2"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,14 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <% if (process.env.NODE_ENV === 'production') { %> <% for(var css of
+      htmlWebpackPlugin.options.cdn.css) { %>
+      <link href="<%=css%>" rel="preload" as="style" />
+      <link rel="stylesheet" href="<%=css%>" as="style" />
+      <% } %> <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
+      <link href="<%=js%>" rel="preload" as="script" />
+      <script src="<%=js%>"></script>
+      <% } %> <% } %>
     <title>vue-cli-h5</title>
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="app">
     <transition :name="transitionName">
+
       <keep-alive v-if="$route.meta.keepAlive">
         <router-view class="router"></router-view>
       </keep-alive>

diff --git a/src/components/SvgIcon.vue b/src/components/SvgIcon.vue
@@ -0,0 +1,62 @@
+<template>
+  <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: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isExternal () {
+      return isExternal(this.iconClass)
+    },
+    iconName () {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass () {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    },
+    styleExternalIcon () {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover!important;
+  display: inline-block;
+}
+</style>
diff --git a/src/icons/index.js b/src/icons/index.js
@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon'// svg component
+
+// register globally
+Vue.component('svg-icon', SvgIcon)
+
+const req = require.context('./svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+requireAll(req)
diff --git a/src/icons/svg/dashboard.svg b/src/icons/svg/dashboard.svg
diff --git a/src/icons/svg/example.svg b/src/icons/svg/example.svg
diff --git a/src/icons/svg/eye-open.svg b/src/icons/svg/eye-open.svg
diff --git a/src/icons/svg/eye.svg b/src/icons/svg/eye.svg
diff --git a/src/icons/svg/form.svg b/src/icons/svg/form.svg
diff --git a/src/icons/svg/link.svg b/src/icons/svg/link.svg
diff --git a/src/icons/svg/nested.svg b/src/icons/svg/nested.svg
diff --git a/src/icons/svg/password.svg b/src/icons/svg/password.svg
diff --git a/src/icons/svg/table.svg b/src/icons/svg/table.svg
diff --git a/src/icons/svg/tree.svg b/src/icons/svg/tree.svg
diff --git a/src/icons/svg/user.svg b/src/icons/svg/user.svg
diff --git a/src/icons/svgo.yml b/src/icons/svgo.yml
@@ -0,0 +1,22 @@
+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+
+  # - name
+  #
+  # or:
+  # - name: false
+  # - name: true
+  #
+  # or:
+  # - name:
+  #     param1: 1
+  #     param2: 2
+
+- removeAttrs:
+    attrs:
+      - 'fill'
+      - 'fill-rule'
diff --git a/src/main.js b/src/main.js
@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import 'lib-flexible'
 import App from './App.vue'
-import router from './router'
-import store from './store'
+import router from '@/router'
+import store from '@/store'
+import 'utils/permission'
+import '@/icons' // icon
 import { mockXHR } from '../mock'
 import '@/style/common.scss'
 

diff --git a/src/router/index.js b/src/router/index.js
@@ -9,7 +9,10 @@ let routes = [
   {
     path: '/',
     name: 'home',
-    component: Home
+    component: Home,
+    meta: {
+      keepAlive: true
+    }
   }
 ]
 

diff --git a/src/settings.js b/src/settings.js
@@ -0,0 +1,16 @@
+module.exports = {
+
+  title: 'h5Vue-cli',
+
+  /**
+   * @type {boolean} true | false
+   * @description Whether fix the header
+   */
+  fixedHeader: false,
+
+  /**
+   * @type {boolean} true | false
+   * @description Whether show the logo in sidebar
+   */
+  sidebarLogo: false
+}
diff --git a/src/store/index.js b/src/store/index.js
@@ -26,6 +26,10 @@ export default new Vuex.Store({
     loading (state) {
       return state.loading
     }
+    // vuex 全局getters引入局部
+    // token () {
+    //   return store.getters['user/token']
+    // }
   },
   mutations: {
     setMsg (state, msg) {

diff --git a/src/store/modules/user.js b/src/store/modules/user.js
@@ -1,12 +1,13 @@
 import { login } from 'api/user'
 import { Toast } from 'vant'
+import { getToken, setToken } from '@/utils/auth'
 
 const LOGIN = 'LOGIN'// 获取用户信息
 
 export default {
   namespaced: true,
   state: {
-    token: localStorage.getItem('token') || '',
+    token: getToken() || '',
     user: JSON.parse(localStorage.getItem('userDate')) || {}
   },
   mutations: {
@@ -15,7 +16,8 @@ export default {
       let userDate = data.data
       state.token = userDate.token
       state.user = userDate
-      localStorage.setItem('token', userDate.token)
+      setToken(userDate.token)
+      // localStorage.setItem('token', userDate.token)
       localStorage.setItem('userDate', JSON.stringify(userDate))
     }
 

diff --git a/src/utils/auth.js b/src/utils/auth.js
@@ -0,0 +1,15 @@
+import Cookies from 'js-cookie'
+
+const TokenKey = 'h5-vue-cli_token'
+
+export function getToken () {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken (token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken () {
+  return Cookies.remove(TokenKey)
+}
diff --git a/src/utils/get-page-title.js b/src/utils/get-page-title.js
@@ -0,0 +1,10 @@
+import defaultSettings from '@/settings'
+
+const title = defaultSettings.title || 'Vue Admin Template'
+
+export default function getPageTitle (pageTitle) {
+  if (pageTitle) {
+    return `${pageTitle} - ${title}`
+  }
+  return `${title}`
+}