代码整理

README.md

@@ -1,27 +1,194 @@
-- [x] 自动注册路由表
-- [x] 自动注册Vuex
-- [x] 鉴权处理、登录拦截
-- [x] 页面切换动画
-- [x] 常用目录别名
-- [x] Vant
-- [x] Rem适配
-- [x] 全局scss
-- [x] 页面Title
-- [x] axios封装
-- [x] mock-server
-- [x] SVG图标组件
-- [x] 通用登录页面
-- [x] 通用列表页（集成vo-pages）
-- [x] V-console
-- [x] Dayjs?
-- [x] 跨域处理
-- [x] 404页面
-- [x] Lazyload
-- [x] 登录登出/用户信息
-### 线上环境优化
-
-- [x] CDN引入
-- [x] 资源压缩
-- [x] console.log去除
-- [x] gzip
-- [x] 关闭 sourcemap
+# 基于vue+vant搭建H5通用架子
+
+### 项目初衷
+作为前端开发工程师，日常开发中遇到H5的开发我们需要做不少的准备工作，例如Vant按需引入、Rem适配、注册vuex/vue-router、封装axios、svg图标的处理等等，开发中难免遇到后端同学接口不及时，又要去配置自己的mock server，配置完mock server又要花时间写上拉加载，下拉刷新等功能，后期又需要处理CDN、sourcemap、性能分析等等。这些工作繁琐费时，那不如来开发一个H5的通用架子吧，希望能让前端同学能快速搭建完业务所需的H5架子。
+
+### 主要功能
+1. 常用目录别名
+2. Vant/Rem适配
+3. scss支持、_mixin.scss、_variables.scss
+4. 页面切换动画+keepAlive
+5. 页面标题
+6. 自动注册：自动注册路由表/自动注册Vuex/svg图标引入
+7. mock server
+8. axios封装、api管理
+9. 用户鉴权
+10. vuex-loading
+11. vo-pages/dayjs/vconsole
+12. 生产环境优化
+
+### 常用目录别名
+![alias配置](http://img.cixi518.com/alias.png)
+### Vant/Rem适配
+按照Vant官网推荐自动按需引入组件，同样，Vant官网中也有对Rem适配的推荐配置，按照官网说明的使用。需要注意的是postcss的配置中，autoprefixer下的`browsers`需要替换成`overrideBrowserslist`，否则会有报错信息。具体如图<br>
+![postcss配置](http://img.cixi518.com/postcss.png)
+### scss支持、_mixin.scss、_variables.scss
+选择scss作为css预处理，并对mixin、variables、common.scss作全局引入。
+```js
+css: {
+    // 是否使用css分离插件 ExtractTextPlugin
+    extract: !!IS_PRODUCTION,
+    // 开启 CSS source maps?
+    sourceMap: false,
+    // css预设器配置项
+    // 启用 CSS modules for all css / pre-processor files.
+    modules: false,
+    loaderOptions: {
+      sass: {
+        data: '@import "style/_mixin.scss";@import "style/_variables.scss";@import "style/common.scss";' // 全局引入
+      }
+    }
+  }
+```
+### 页面切换动画+keepAlive
+利用vuex存取/更新页面切换方向，配合vue的transition做页面切换动画，router设置keepAlive判断页面是否需要缓冲。
+```js
+// vuex中
+state: {
+  direction: 'forward' // 页面切换方向
+},
+mutations: {
+  // 更新页面切换方向
+  updateDirection (state, direction) {
+    state.direction = direction
+  }
+},
+// App.vue
+<template>
+  <div id="app">
+    <transition :name="transitionName">
+      <keep-alive v-if="$route.meta.keepAlive">
+        <router-view class="router"></router-view>
+      </keep-alive>
+      <router-view class="router" v-else></router-view>
+    </transition>
+  </div>
+</template>
+```
+### 页面标题
+在vue-router页面配置中添加meta的title信息，配合`vue-router`的`beforeEach`注册一个前置守卫用户获取到页面配置的title
+```js
+// get-page-title.js
+import defaultSettings from '@/settings'
+
+const title = defaultSettings.title || 'H5Vue'
+
+export default function getPageTitle (pageTitle) {
+  if (pageTitle) {
+    return `${pageTitle} - ${title}`
+  }
+  return `${title}`
+}
+// permission.js
+router.beforeEach((to, from, next) => {
+  // set page title
+  document.title = getPageTitle(to.meta.title)
+}
+```
+### 自动注册
+
+先来了解一下`require.context()`:
+
+> 你可以通过 `require.context()` 函数来创建自己的 context。
+>
+> 可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式。
+>
+> webpack 会在构建中解析代码中的 `require.context()` 。
+
+上面的是官网原话，可能你跟我一样没太看懂，说白了，他可以用来导入模块。
+
+来看一下如何使用，我的router下的文件结构是这样的：<br>
+
+![router-tree](http://img.cixi518.com/router-tree.png)<br>
+```js
+// 利用require.context()自动引入article.js和user.js
+const routerContext = require.context('./', true, /\.js$/)
+routerContext.keys().forEach(route => {
+  // 如果是根目录的 index.js 、不处理
+  if (route.startsWith('./index')) {
+    return
+  }
+  const routerModule = routerContext(route)
+  /**
+   * 兼容 import export 和 require module.export 两种规范
+   */
+  routes = routes.concat(routerModule.default || routerModule)
+})
+```
+需要额外注意的是，404页面需要在自动引入后向路由数组concat上去，否则会提前匹配到404页面。
+
+对于vuex也同样引入，记得把引入的vuex按照文件名注册为对应的模块中。
+
+### mock server
+
+Mock server部分可直接参看[vue-element-admin](https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/mock-api.html)的mock方案
+
+### axios封装
+
+axios部分，配置了baseUrl、超时时间，利用拦截器对header添加了用户的Token，方便下一步的用户鉴权，并对错误做了Toast提示。具体错误的code需要视各业务而定，本项目只做为示例参考。
+
+### 用户鉴权
+在`vue-router`的`beforeEach`中，添加用户鉴权功能。当用户登录后使用cookie持续化保存用户token，并赋值到vuex，后续可利用token获取用户信息。具体代码如下图：
+![permission](http://img.cixi518.com/permission.png)
+### vuex-loading
+在vuex3.1.0中对[vuex.subscribeAction](https://vuex.vuejs.org/zh/api/#subscribe)做了改动，使其拥有了before/after钩子函数。
+```js
+// subscribeAction官网示例
+store.subscribeAction({
+  before: (action, state) => {
+    console.log(`before action ${action.type}`)
+  },
+  after: (action, state) => {
+    console.log(`after action ${action.type}`)
+  }
+})
+```
+有了它，配合`vuex`的[插件](https://vuex.vuejs.org/zh/guide/plugins.html)功能，实现对应action的状态监听也不再是难题。
+
+[点击查看具体实现代码](https://github.com/Ljhhhhhh/h5vue/blob/master/src/utils/vuex-loading.js)
+
+> 参照自[vue 在移动端体验上的优化解决方案](https://juejin.im/post/5cdd2457f265da034e7eb2f9#heading-2)
+
+```vue
+// 使用方法
+computed: {
+  ...mapState({
+    loading: state => state['@@loading'].effects['test/onePlusAction']
+  })
+}
+// 其中 test对应的是vuex中的模块名，onePlusAction对应模块内的actions
+```
+具体效果：<br>![loading](http://img.cixi518.com/loading.gif)
+### 列表页（vo-pages的使用）
+
+列表页这里，使用了本人自己写的组件`vo-pages`，详细使用可查看[一款易用、高可定制的vue翻页组件](https://juejin.im/post/5d81da4551882556ba55e50e)
+
+实现效果：<br>
+![vo-pages](http://img.cixi518.com/Kapture%202019-10-27%20at%2013.36.21.gif)
+
+### 生产环境优化
+上线前，得优化一下资源了，该项目做了如下几步操作
+1. 通用库改用CDN
+2. 关闭sourcemap防止源码泄露
+3. 丑化html/css/js
+4. 生成gzip 
+5. 移除掉debugger/console
+6. 利用webpack-bundle-analyzer做资源分析，提供进一步优化的数据分析
+想对性能、资源了解更多的，推荐[Vue SPA 项目webpack打包优化指南](https://juejin.im/post/5bd2b60e6fb9a05d27794c5e)这篇文章。
+
+### 更多
+花了不少时间开发了这个项目，希望能提高您的H5开发效率。也欢迎大家跟我一起交流学习。
+
+### 相关链接
+* [源码地址](https://github.com/Ljhhhhhh/h5vue)
+* [在线预览](http://h5vue.cixi518.com)
+
+### 文章参考
+* [基于vue-cli3.0构建功能完善的移动端架子](https://juejin.im/post/5cbf32bc6fb9a03236393379)
+* [Vue SPA 项目webpack打包优化指南](https://juejin.im/post/5bd2b60e6fb9a05d27794c5e)
+* [vue 在移动端体验上的优化解决方案](https://juejin.im/post/5cdd2457f265da034e7eb2f9)
+* [vue-element-admin](https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/)
+* [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
+* [一款易用、高可定制的vue翻页组件](https://juejin.im/post/5d81da4551882556ba55e50e)
+
+

src/router/article.js

@@ -4,7 +4,7 @@ export default [
     name: 'article',
     component: () => import(/* webpackChunkName: "article" */ 'views/Article.vue'),
     meta: {
-      // auth: true,
+      auth: true,
       title: '文章',
       keepAlive: true
     }

src/router/index.js

@@ -41,7 +41,7 @@ routerContext.keys().forEach(route => {
 
 routes = routes.concat({
   path: '*',
-  redirect: '/home'
+  redirect: '/404'
 })
 
 const createRouter = () => new Router({

src/settings.js

@@ -1,6 +1,6 @@
 module.exports = {
 
-  title: 'h5Vue-cli',
+  title: 'H5Vue',
 
   /**
    * @type {boolean} true | false

src/store/index.js

@@ -1,8 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import createLoadingPlugin from 'utils/vuex-loading'
-// import test from './modules/test'
-// import user from './modules/user'
 
 Vue.use(Vuex)
 
@@ -13,20 +11,12 @@ files.keys().forEach(key => {
   modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
 })
 
-// const store = new Vuex.Store({
-//   modules
-// })
-
 export default new Vuex.Store({
   plugins: [createLoadingPlugin()],
   state: {
-    // loading: false,
-    direction: 'forward'
+    direction: 'forward' // 页面切换方向
   },
   getters: {
-    // loading (state) {
-    //   return state.loading
-    // },
     userData (state, getters) {
       return state.user.user
       // return getters['user/user']
@@ -37,9 +27,7 @@ export default new Vuex.Store({
     // }
   },
   mutations: {
-    // setLoading (state, val) {
-    //   state.loading = val
-    // },
+    // 更新页面切换方向
     updateDirection (state, direction) {
       state.direction = direction
     }
@@ -49,9 +37,3 @@ export default new Vuex.Store({
   },
   modules
 })
-
-/*
-this.$store.registerModule('d',{
-
-})
-*/

src/store/modules/test.js

@@ -2,7 +2,7 @@ const state = {
   number: 1
 }
 const actions = {
-  onePlusAction: ({ commit }, { val }) => {
+  onePlusAsync: ({ commit }, { val }) => {
     // commit('setLoading', true, { root: true }) // 调用全局vuex的setLoading方法
     // 需要使用promise用来配合loading
     return new Promise((resolve, reject) => {

src/utils/get-page-title.js

@@ -1,6 +1,6 @@
 import defaultSettings from '@/settings'
 
-const title = defaultSettings.title || 'Vue Admin Template'
+const title = defaultSettings.title || 'H5Vue'
 
 export default function getPageTitle (pageTitle) {
   if (pageTitle) {

src/utils/permission.js

@@ -1,65 +1,48 @@
 import router from '@/router'
 import store from '@/store'
 import { Notify } from 'vant'
-// import NProgress from 'nprogress' // progress bar
-// import 'nprogress/nprogress.css' // progress bar style
 import { getToken } from '@/utils/auth' // get token from cookie
 import getPageTitle from '@/utils/get-page-title'
 
-// NProgress.configure({ showSpinner: false }) // NProgress Configuration
-
-const whiteList = ['/login', '/register'] // no redirect whitelist
+const whiteList = ['/login', '/register'] // 白名单列表
 
 router.beforeEach(async (to, from, next) => {
-  // start progress bar
-  // NProgress.start()
-
-  // set page title
+  // 设置页面标题
   document.title = getPageTitle(to.meta.title)
 
   // determine whether the user has logged in
   const hasToken = getToken()
 
   if (hasToken) {
     if (to.path === '/login') {
-      // if is logged in, redirect to the home page
+      // 已经登录，跳转到首页
       next({ path: '/' })
-      // NProgress.done()
     } else {
+      // 获取用户信息
       const hasGetUserInfo = store.getters.userData && store.getters.userData.name
       if (hasGetUserInfo) {
         next()
       } else {
         try {
           // get user info
           await store.dispatch('user/getInfo')
-
           next()
         } catch (error) {
-          // remove token and go to login page to re-login
-          // await store.dispatch('user/resetToken')
+          // 清除用户信息，退出登录，跳转登录页
           store.commit('user/LOGOUT')
           Notify.error(error || 'Has Error')
           next(`/login?redirect=${to.path}`)
-          // NProgress.done()
         }
       }
     }
   } else {
     /* has no token */
-
     if (whiteList.indexOf(to.path) !== -1) {
-      // in the free login whitelist, go directly
+      // 白名单中，无需验证
       next()
     } else {
       // other pages that do not have permission to access are redirected to the login page.
       next(`/login?redirect=${to.path}`)
-      // NProgress.done()
     }
   }
 })
-
-// router.afterEach(() => {
-//   // finish progress bar
-//   NProgress.done()
-// })