項目初衷
開發一個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複制代碼
具體效果：
清單頁(vo-pages的使用)
清單頁這裡，使用了本人自己寫的元件vo-pages，詳細使用可檢視一款易用、高可定制的vue翻頁元件
實作效果：
生産環境優化
上線前，得優化一下資源了，該項目做了如下幾步操作
- 通用庫改用CDN
- 關閉sourcemap防止源碼洩露
- 醜化html/css/js
- 生成gzip
- 移除掉debugger/console
- 利用webpack-bundle-analyzer做資源分析，提供進一步優化的資料分析 想對性能、資源了解更多的，推薦Vue SPA 項目webpack打包優化指南這篇文章。
更多
花了不少時間開發了這個項目，希望能提高您的H5開發效率。也歡迎大家跟我一起交流學習。