一、vant组件库-介绍
什么是Vant组件库
目标:
Vant是一个轻量,可靠的移动端Vue组件库
Vant组件库 官网地址:Vant 3 - Lightweight Mobile UI Components built on Vue
二、全部引入
目标:
引入组件库,使用组件
方法:
查看官网快速上手Vant 3 - Lightweight Mobile UI Components built on Vue,根据提示一步步使用
1.首先需要下载包
根据自己的需求选择版本
选择自己安装的方法
安装完成后在js中全局导入组件
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
随后使用自己想使用的组件,这里用最简单的button按钮
<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
三、自动按需引入--推荐
手动按需引入需要安装插件
# 安装插件
npm i babel-plugin-import -D
会自动按需引入
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';
四、手动按需引入
1.引入组件
1.引入组件
// 方式2: 手动 按需引入
// import Button from 'vant/lib/button'; // button组件
// import 'vant/lib/button/style'; // button样式
2.注册组件
// components: { // 手动注册组件名
// // VanButton: Button
// // 等价的
// [Button.name]: Button
// }
3.使用组件
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>