vant组件库的使用 - - - vue2篇&小程序篇

vue2 篇官方文档

安装 vant 组件库

npm install vant

安装好后

组件引入方法

一、全局引入（引入所有组件会增加代码包体积，官方不推荐）

在 main.js 文件中添加上

import Vant from "vant"
import 'vant/lib/index.css';
Vue.use(Vant)

在其他 vue 文件可以直接使用

<van-button type="default>默认按钮</van-button>

二、单个文件引入

直接在 vue 文件里添加

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

在 components 注册一下 Button 组件

然后可以直接使用

<Button type="default">默认按钮</Button>

三、局部组件引入

在 main.js 中添加

import { Button } from 'vant';
import "vant/lib/button/style";
Vue.use(Button);

在其他 vue 文件可以直接使用

<van-button type="default">默认按钮</van-button>

四、自动按需引入插件（官方推荐）

参考官方文档 引入组件

小程序篇官方文档