基於vue+vant搭建H5通用架子

專案初衷

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

掃碼預覽：

專案原始碼在文章結尾處，記得查收哦~

主要功能

常用目錄別名

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作全域性引入。

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

// vuex中state： { direction： ‘forward’ // 頁面切換方向}，mutations： { // 更新頁面切換方向 updateDirection （state， direction） { state。direction = direction }}，// App。vue複製程式碼

頁面標題

在vue-router頁面配置中新增meta的title資訊，配合vue-router的beforeEach註冊一個前置守衛使用者獲取到頁面配置的title

// get-page-title。jsimport defaultSettings from ‘@/settings’const title = defaultSettings。title || ‘H5Vue’export default function getPageTitle （pageTitle） { if （pageTitle） { return `${pageTitle} - ${title}` } return `${title}`}// permission。jsrouter。beforeEach（（to， from， next） => { // set page title document。title = getPageTitle（to。meta。title）}複製程式碼

自動註冊

先來了解一下require。context（）：

你可以透過 require。context（）函式來建立自己的 context。可以給這個函式傳入三個引數：一個要搜尋的目錄，一個標記表示是否還搜尋其子目錄，以及一個匹配檔案的正則表示式。webpack 會在構建中解析程式碼中的 require。context（）。

上面的是官網原話，可能你跟我一樣沒太看懂，說白了，他可以用來匯入模組。

來看一下如何使用，我的router下的檔案結構是這樣的：

// 利用require。context（）自動引入article。js和user。jsconst 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複製程式碼

具體效果：