官网：https://youzan.github.io/vant/#/zh-CN/
GitHub：https://github.com/youzan/vant
安装使用
Vant是有赞前端团队基于有赞统一的规范实现的Vue组件库，提供了一整套UI基础组件和业务组件。
特性：
- 50+ 个经过有赞线上业务检验的组件
- 单元测试覆盖率超过 90%
- 完善的中英文文档和示例
- 支持 babel-plugin-import
- 支持 TypeScript
- 支持 SSR
1、创建VUE项目之后进入项目目录运行安装命令
npm i vant -S
2、安装 babel-plugin-import 插件，babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
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
- 页面切换动画+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
<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
// 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下的文件结构是这样的：
// 利用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的状态监听也不再是难题。
// 使用方法
computed: {
...mapState({
loading: state => state['@@loading'].effects['test/onePlusAction']
})
}
// 其中 test对应的是vuex中的模块名，onePlusAction对应模块内的actions
具体效果：
列表页（vo-pages的使用）
列表页这里，使用了自己写的组件vo-pages
实现效果：
生产环境优化
上线前，得优化一下资源了，该项目做了如下几步操作
- 通用库改用CDN
- 关闭sourcemap防止源码泄露
- 丑化html/css/js
- 生成gzip
- 移除掉debugger/console
- 利用webpack-bundle-analyzer做资源分析，提供进一步优化的数据分析 想对性能、资源了解更多的，推荐Vue SPA 项目webpack打包优化指南这篇文章。
