学习笔记--Vant组件库

一、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>