vant组件库入门

目录

1.vant组件库-介绍

1.1 vant组件库安装

通过 npm 安装

2.组件用法

2.1全部引用

1.下载vant组件库到当前项目中

 2.导入所有组件, 在main.js中 

 2.2手动按需引入

 1.引入

2 注册

2.3自动按需引入 

1.安装插件

2.在babel配置文件里 (babel.config.js)

3.全局注册 - 会自动按需引入

3.基础组件

3.1.Button 按钮

1.引入

2.代码演示 按钮类型

朴素按钮

细边框

禁用状态

图标按钮

按钮尺寸

自定义颜色

---

1.vant组件库-介绍

• Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。

1.1 vant组件库安装

通过 npm 安装

在现有项目中使用 Vant 时，可以通过 进行安装：npm

# Vue 3 项目，安装最新版 Vant
npm i vant

# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

当然，你也可以通过 或 进行安装：yarnpnpm

# 通过 yarn 安装
yarn add vant

# 通过 pnpm 安装
pnpm add vant

2.组件用法

2.1全部引用

1.下载vant组件库到当前项目中

yarn add vant -D

 2.导入所有组件, 在main.js中 

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

 2.2手动按需引入

 1.引入

// 方式2: 手动 按需引入
// import Button from 'vant/lib/button'; // button组件
// import 'vant/lib/button/style'; // button样式