携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情
关于Vant
Vant 轻量、支持 TypeScript，Vue 2、Vue 3 和微信小程序都可以使用 Vant 组件库进行开发（其中 Vant 3 适用于 Vue3的开发）
组件库很全面，除了一些基础组件之外，还有业务组件，主要以商城类的应用场景为主
官方文档：Vant3 中文文档
安装
npm i vant // Vue 3 项目(Vant 3)
npm i vant@latest-v2 // Vue 2 项目(Vant 2)
yarn add vant // yarn 安装
引入
分为两种引入方式
- 组件按需引入
- 引入所有组件
1. 按需引入：
vite、webpack 或 vue-cli 的项目中使用 Vant 时，分别有不同的插件配置方法。引入后在每个页面引入需要的组件即可。
2. 全局引入：
在 main.js 文件中，引入vant及其 css，并.use(vant)
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import vant from 'vant';
import 'vant/lib/index.css';
createApp(App).use(router).use(vant).mount('#app')
3. script setup 语法糖写法： 如果是Vue3项目，使用这种方式较为方便，不需要进行组件注册
注：在 JSX 和 TSX 中可以直接使用组件，不需要注册
使用
以按钮的实现为例，组件语法以van-为前缀，根据官方案例直接使用即可。
其它使用
- 获取组件实例
在组件挂载之后可以获取到组建的实例，即放在 mounted 生命周期钩子中：
<van-form ref="form">
// 表单项
</van-form>
mounted() {
this.$refs.form;
}
- 浏览器配适
包括 Viewport 布局、Rem 布局适配、 桌面端适配、 底部安全区适配等，按需下载插件并配置即可。
因为 Vant 的组件库默认只适配了移动端设备，而桌面端没有监听鼠标的事件，所以如果需要桌面段的配置，还需要再安装并引入模块，将mouse 事件转换成对应的 touch 事件
npm i @vant/touch-emulator -S
import '@vant/touch-emulator';
