官网 :https://youzan.github.io/vant/#/zh-CN/home
官网的快速上手:https://youzan.github.io/vant/#/zh-CN/quickstart
如何使用
1.安装
通过 npm 安装
npm i vant -S
通过yarn安装
yarn add vant
2.引入组件
方式一. 自动按需引入组件 (推荐)
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
#安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意:webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
方式二. 手动按需引入组件
在不使用插件的情况下,可以手动引入需要的组件
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
方式三. 导入所有组件
Vant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
配置按需引入后,将不允许直接导入所有组件
3.代码演示
怎么使用一个button按钮
引入
import Vue from 'vue';
import { Button } from 'vant';
Vue.use(Button);
使用
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
效果如下
注意:只要使用了组件一定要记得引入,
项目发布到线上之后要检查各个组件css问题!