官網(wǎng)：https://youzan.github.io/vant/#/zh-CN/
GitHub：https://github.com/youzan/vant
安裝使用
Vant是有贊前端團(tuán)隊(duì)基于有贊統(tǒng)一的規(guī)范實(shí)現(xiàn)的Vue組件庫失球，提供了一整套UI基礎(chǔ)組件和業(yè)務(wù)組件饼酿。
特性：
- 50+ 個(gè)經(jīng)過有贊線上業(yè)務(wù)檢驗(yàn)的組件
- 單元測(cè)試覆蓋率超過 90%
- 完善的中英文文檔和示例
- 支持 babel-plugin-import
- 支持 TypeScript
- 支持 SSR
1、創(chuàng)建VUE項(xiàng)目之后進(jìn)入項(xiàng)目目錄運(yùn)行安裝命令
npm i vant -S
2幌氮、安裝 babel-plugin-import 插件，babel-plugin-import 是一款 babel 插件胁澳，它會(huì)在編譯過程中將 import 的寫法自動(dòng)轉(zhuǎn)換為按需引入的方式
npm i babel-plugin-import -D
3该互、在.babelrc文件中配置plugins（插件）
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import", [{ "libraryName": "vant", "style": true }]]
],
4、按需要引入vant組件韭畸，比如我們要在HelloWord.vue組件中使用 Loading 組件宇智，我們可以先 在組件中引入
<script>
import { Loading } from 'vant'
export default {
components: {
[Loading.name]: Loading
}
}
</script>
然后在頁面中加入組件代碼
<template>
<div>
<van-loading color="black" />
<van-loading color="white" />
<van-loading type="spinner" color="black" />
<van-loading type="spinner" color="white" />
</div>
</template>
案例
主要功能
- 常用目錄別名
- Vant/Rem適配
- scss支持、_mixin.scss陆盘、_variables.scss
- 頁面切換動(dòng)畫+keepAlive
- 頁面標(biāo)題
- 自動(dòng)注冊(cè)：自動(dòng)注冊(cè)路由表/自動(dòng)注冊(cè)Vuex/svg圖標(biāo)引入
- mock server
- axios封裝普筹、api管理
- 用戶鑒權(quán)
- vuex-loading
- vo-pages/dayjs/vconsole
- 生產(chǎn)環(huán)境優(yōu)化
常用目錄別名
Vant/Rem適配
按照
Vant官網(wǎng)推薦自動(dòng)按需引入組件，同樣隘马，Vant官網(wǎng)中也有對(duì)Rem適配的推薦配置太防，按照官網(wǎng)說明的使用。需要注意的是postcss的配置中酸员，autoprefixer下的browsers需要替換成overrideBrowserslist蜒车，否則會(huì)有報(bào)錯(cuò)信息。具體如圖
scss支持幔嗦、_mixin.scss酿愧、_variables.scss
選擇
scss作為css預(yù)處理，并對(duì)mixin邀泉、variables嬉挡、common.scss作全局引入。
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: !!IS_PRODUCTION,
// 開啟 CSS source maps?
sourceMap: false,
// css預(yù)設(shè)器配置項(xiàng)
// 啟用 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";' // 全局引入
}
}
}
頁面切換動(dòng)畫+keepAlive
利用
vuex存取/更新頁面切換方向汇恤，配合vue的transition做頁面切換動(dòng)畫庞钢，router設(shè)置keepAlive判斷頁面是否需要緩沖。
// 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>
頁面標(biāo)題
在
vue-router頁面配置中添加meta的title信息因谎，配合vue-router的beforeEach注冊(cè)一個(gè)前置守衛(wèi)用戶獲取到頁面配置的title
// 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)
}
自動(dòng)注冊(cè)
先來了解一下require.context():
你可以通過
require.context()函數(shù)來創(chuàng)建自己的 context基括。
可以給這個(gè)函數(shù)傳入三個(gè)參數(shù)：一個(gè)要搜索的目錄，一個(gè)標(biāo)記表示是否還搜索其子目錄财岔， 以及一個(gè)匹配文件的正則表達(dá)式风皿。
webpack 會(huì)在構(gòu)建中解析代碼中的require.context()河爹。
- 上面的是官網(wǎng)原話桐款，可能你跟我一樣沒太看懂，說白了鲁僚，他可以用來導(dǎo)入模塊。
- 來看一下如何使用冰沙，我的router下的文件結(jié)構(gòu)是這樣的：
// 利用require.context()自動(dòng)引入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 兩種規(guī)范
*/
routes = routes.concat(routerModule.default || routerModule)
})
- 需要額外注意的是拓挥，404頁面需要在自動(dòng)引入后向路由數(shù)組concat上去，否則會(huì)提前匹配到404頁面侥啤。
- 對(duì)于vuex也同樣引入当叭，記得把引入的vuex按照文件名注冊(cè)為對(duì)應(yīng)的模塊中。
mock server
Mock server部分可直接參看vue-element-admin的mock方案
axios封裝
axios部分盖灸，配置了baseUrl、超時(shí)時(shí)間赁炎，利用攔截器對(duì)header添加了用戶的Token，方便下一步的用戶鑒權(quán)讥裤，并對(duì)錯(cuò)誤做了Toast提示姻报。具體錯(cuò)誤的code需要視各業(yè)務(wù)而定，本項(xiàng)目只做為示例參考吴旋。
用戶鑒權(quán)
在
vue-router的beforeEach中，添加用戶鑒權(quán)功能荧关。當(dāng)用戶登錄后使用cookie持續(xù)化保存用戶token褂傀，并賦值到vuex加勤，后續(xù)可利用token獲取用戶信息同波。具體代碼如下圖：
vuex-loading
在
vuex3.1.0中對(duì)vuex.subscribeAction做了改動(dòng)未檩，使其擁有了before/after鉤子函數(shù)粟焊。
// subscribeAction官網(wǎng)示例
store.subscribeAction({
before: (action, state) => {
console.log(`before action ${action.type}`)
},
after: (action, state) => {
console.log(`after action ${action.type}`)
}
})
有了它，配合vuex的插件功能悲雳，實(shí)現(xiàn)對(duì)應(yīng)action的狀態(tài)監(jiān)聽也不再是難題。
// 使用方法
computed: {
...mapState({
loading: state => state['@@loading'].effects['test/onePlusAction']
})
}
// 其中 test對(duì)應(yīng)的是vuex中的模塊名香追，onePlusAction對(duì)應(yīng)模塊內(nèi)的actions
具體效果：
列表頁（vo-pages的使用）
列表頁這里透典，使用了自己寫的組件vo-pages
實(shí)現(xiàn)效果：
生產(chǎn)環(huán)境優(yōu)化
上線前，得優(yōu)化一下資源了税弃，該項(xiàng)目做了如下幾步操作
- 通用庫改用CDN
- 關(guān)閉sourcemap防止源碼泄露
- 丑化html/css/js
- 生成gzip
- 移除掉debugger/console
- 利用webpack-bundle-analyzer做資源分析凑队，提供進(jìn)一步優(yōu)化的數(shù)據(jù)分析 想對(duì)性能、資源了解更多的顽决，推薦Vue SPA 項(xiàng)目webpack打包優(yōu)化指南這篇文章。
