基於vue+vant搭建移動端通用架子

時間 2019-11-05

標籤基於 vue+vant vue vant 搭建移動通用架子欄目無線简体版

原文原文鏈接

項目初衷

開發一個H5的通用架子，讓前端同窗開箱即用，迅速投入戰鬥。css

截止到2019-10-29 10:25，已經被fork了34次，若是您在使用過程當中還但願能給我提issue,或者直接加我微信13216698987 ❤️ ❤️ ❤️html

掃碼預覽：

項目源碼在文章結尾處，記得查收哦~

主要功能

經常使用目錄別名
Vant/Rem適配
scss支持、_mixin.scss、_variables.scss
頁面切換動畫+keepAlive
頁面標題
自動註冊：自動註冊路由表/自動註冊Vuex/svg圖標引入
mock server
axios封裝、api管理
用戶鑑權
vuex-loading
vo-pages/dayjs/vconsole
生產環境優化

經常使用目錄別名

Vant/Rem適配

按照Vant官網推薦自動按需引入組件，一樣，Vant官網中也有對Rem適配的推薦配置，按照官網說明的使用。須要注意的是postcss的配置中，autoprefixer下的browsers須要替換成overrideBrowserslist，不然會有報錯信息。具體如圖
前端

scss支持、_mixin.scss、_variables.scss

選擇scss做爲css預處理，並對mixin、variables、common.scss做全局引入。vue

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判斷頁面是否須要緩衝。webpack

// 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註冊一個前置守衛用戶獲取到頁面配置的titleios

// 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():git

你能夠經過 require.context() 函數來建立本身的 context。github

能夠給這個函數傳入三個參數：一個要搜索的目錄，一個標記表示是否還搜索其子目錄，以及一個匹配文件的正則表達式。web

webpack 會在構建中解析代碼中的 require.context() 。正則表達式

上面的是官網原話，可能你跟我同樣沒太看懂，說白了，他能夠用來導入模塊。

來看一下如何使用，個人router下的文件結構是這樣的：

// 利用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的mock方案

axios封裝

axios部分，配置了baseUrl、超時時間，利用攔截器對header添加了用戶的Token，方便下一步的用戶鑑權，並對錯誤作了Toast提示。具體錯誤的code須要視各業務而定，本項目只作爲示例參考。

用戶鑑權

在vue-router的beforeEach中，添加用戶鑑權功能。當用戶登陸後使用cookie持續化保存用戶token，並賦值到vuex，後續可利用token獲取用戶信息。具體代碼以下圖：

vuex-loading

在vuex3.1.0中對vuex.subscribeAction作了改動，使其擁有了before/after鉤子函數。

// subscribeAction官網示例
store.subscribeAction({
  before: (action, state) => {
    console.log(`before action ${action.type}`)
  },
  after: (action, state) => {
    console.log(`after action ${action.type}`)
  }
})
複製代碼

有了它，配合vuex的插件功能，實現對應action的狀態監聽也再也不是難題。

點擊查看具體實現代碼

參照自vue 在移動端體驗上的優化解決方案

// 使用方法
computed: {
  ...mapState({
    loading: state => state['@@loading'].effects['test/onePlusAction']
  })
}
// 其中 test對應的是vuex中的模塊名，onePlusAction對應模塊內的actions
複製代碼

具體效果：