官方文档:Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.
vue2对应vant2,vue3对应vant3/vant4
1.安装
官网的快速上手里都有介绍。
# Vue 3 项目,安装最新版 Vant:
npm i vant -S
# Vue 2 项目,安装 Vant 2:
npm i vant@latest-v2 -S
2.引入
自动按需引入:
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。
npm i babel-plugin-import -D
这是脚手架里常用的配置,还有一种低版本的方式,不建议用,所以没写。
可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
以上配置任选一种配置好后,在main.js里引入组件,然后就可以在页面里使用van-button组件。
import Vue from 'vue'
import { Button } from 'vant'
Vue.use(Button)
但在main.js里引入,以后用的组件很多,看起来很乱,所以在utils目录底下新建一个vant-ui.js文件
import Vue from 'vue'
import { Button } from 'vant'
Vue.use(Button)
在main.js里引入即可
import '@/utils/vant-ui'
3.适配
因为做的是h5项目,所以要适配不同大小的屏幕,在vant文档的进阶用法里使用Viewport 布局。
安装postcss-px-to-viewport
npm install postcss-px-to-viewport@1.1.1 --save-dev
yarn add -D postcss-px-to-viewport
根目录下,创建postcss.config.js
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 375,
},
},
};
配置好后,在项目里写px单位,浏览器里查看,会自动转为vw。