vant组件库：轻量级移动端Vue组件解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/washyoursleep/article/details/118489610

vant是一个专注于移动端的Vue组件库，提供超过60个高性能组件，体积小巧，支持Vue 2和Vue 3。通过快速开始链接可以一键引入所有组件，或者选择手动或自动按需引入，减少项目体积。使用babel-plugin-import插件可实现自动按需加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vant 组件库
介绍：vant是一个轻量、可靠的移动端 Vue 组件库, 开箱即用。
特点：

提供 60 多个高质量组件，覆盖移动端各类场景
性能极佳，组件平均体积不到 1kb
完善的中英文文档和示例
支持 Vue 2 & Vue 3
支持按需引入和主题定制
1.1全部导入
目的：看官方文档，下载，引入vant组件库
全部引入, 快速开始:https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart
1.全部引入, 快速开始: https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart
2.下载Vant组件库到当前项目中
3.在main.js中全局导入所有组件,
4.使用按钮组件 – 作为示范的例子
1.2手动按需引入
目的：只引入使用的组件

// import Button from 'vant/lib/button'; // button组件
// import 'vant/lib/button/style'; // button样式

1.3 自动按需引入
目的：按需加载组件
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。
1.3.1 安装插件
yarn add babel-plugin-import -D
1.3.2babel配置文件

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

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

// 方式1: 全局 - 自动按需引入vant组件
// (1): 下载 babel-plugin-import
// (2): babel.config.js - 添加官网说的配置 (一定要重启服务器)
// (3): main.js 按需引入某个组件, Vue.use全局注册 - 某个.vue文件中直接使用vant组件
import { Button } from 'vant';
Vue.use(Button) // Button组件全局注册, 真正注册的组件名VanButton