1.安装
在项目中使用Vant时,可以通过npm进行安装
vue2需指定版本,vue3下载最新版即可。
# vue2项目
npm i vant@latest-v2 -S
也可以使用图形化工具vue ui 安装
2.引入组件
引入组件分为按需引入和一次性导入所有组件
按需引入分为自动按需引入和手动按需引入
自动按需引入
1.安装插件
a11babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。
# 安装插件
npm i babel-plugin-import -D
2.添加配置
在vant官网说明的是在.babelrc中添加配置
.babelrc现已更名为bable.config.js
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
可以在代码中直接引入组件
插件会自动帮我们引入对应的css样式
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';
手动按需引入
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
一次性导入所有组件
但是一次性引入所有组件会增加代码包体积,因此不推荐。
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
Tips: 配置按需引入后,将不允许直接导入所有组件。
按照上述要求即可使用vant组件啦。