Vant 移动端 Vue 组件库全面解析特性、版本矩阵与快速上手实战指南【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vantVant 是一个轻量、可定制的移动端 Vue 组件库自 2017 年开源以来持续演进目前官方仓库同时维护 Vue 2、Vue 3 与微信小程序三个版本线。本文以当前仓库Vant 4.x的官方介绍文档为主体结合 packages/vant 下的源码、配置与测试系统梳理 Vant 的核心特性、版本维护状态、安装引入方式与生态体系帮助你在实际项目中快速选型、正确引入并充分发挥其工程化能力。Vant 是什么Vant 定位于移动端 Web 应用的 UI 组件库其核心设计目标有三个关键词轻量组件体积小、无外部依赖、可定制主题变量体系 深色模式与工程化友好Tree Shaking、按需引入、SSR、无障碍支持。从仓库结构看Vant 采用 monorepo 组织方式见 pnpm-workspace.yaml核心组件代码位于 packages/vant/src当前该目录下共有105 个组件模块覆盖基础组件Button、Cell、Icon、表单组件Field、Picker、Calendar、反馈组件Dialog、Toast、ActionSheet、展示组件Swipe、Skeleton、Watermark、导航组件Tabbar、NavBar、IndexBar、业务组件AddressEdit、SubmitBar、Coupon以及组合式 APIuseClickAway、useCountDown 等等多个维度可覆盖移动端主流业务场景。官方目前提供三个版本线Vue 3 版本即本文档所在的 Vant 4.x当前仓库版本为 4.10.0见 package.jsonVue 2 版本Vant 2适用于仍运行 Vue 2 的存量项目微信小程序版本vant-weapp适用于小程序开发场景另有社区团队维护的 React 移植版本 react-vant。核心特性深度解析官方首页文档列出了一系列特性下面结合仓库源码逐一印证其底层实现便于你理解这些能力标签背后的工程保障。轻量与零外部依赖Vant 宣称组件平均体积小于 1KBmingzip且不依赖三方 npm 包。从 packages/vant/package.json 的依赖声明可以看到vant 包仅依赖三个内部/轻量包vant/popperjsPopper.js 的 Vant 维护版仅用于 Popover 等浮层组件vant/useVant 自研组合式函数库vue/sharedVue 内部共享工具。对外部生态的依赖被压缩到极致这是组件库体积可控的基础。同时 package.json 中声明了unpkg与jsdelivr字段指向lib/vant.min.js即开箱即用的全量压缩构建产物。80 高质量组件前文已述当前 packages/vant/src 下有 105 个组件目录。每个组件模块的目录结构高度统一以 packages/vant/src/button 为例包含Button.tsx组件实现TSX 写法index.ts导出入口types.ts类型定义index.less组件样式README.md/README.zh-CN.md组件文档demo/与test/组件示例与测试用例。这种组件即目录的规范结构详见 vant-cli 目录规范文档保证了 80 组件在开发与维护上的高度一致性。完整类型定义与 90% 测试覆盖率组件使用 TypeScript 编写每个组件在 index.ts 中不仅导出组件本身还会导出buttonProps与ButtonProps等类型并在模块内通过declare module vue扩展GlobalComponents接口声明VanButton等全局组件类型使模板中的类型提示开箱即用declare module vue { export interface GlobalComponents { VanButton: typeof Button; } }测试方面仓库为绝大多数组件维护了 test/ 目录含.ts单测与.snap快照并提供了test:coverage脚本见 package.json用于产出覆盖率报告。700 主题变量与可定制性内置 700 个主题变量的实现在样式层。对 packages/vant/src/style 下的 Less 源码统计仓库中共定义了800 个--van-*CSS 自定义属性集中在 css-variables.less。所有组件样式均通过var(--van-xxx)引用这些变量因此开发者只需覆盖 CSS 变量即可完成全局主题定制无需修改源码。此外站点配置 packages/vant/vant.config.mjs 中声明了深色模式类名van-theme-dark与浅色模式类名van-theme-light配合内置样式即可实现深色模式切换。Tree Shaking 与按需引入Vant 默认支持 Tree Shaking。在 packages/vant/package.json 中通过sideEffects字段精准声明副作用文件范围仅样式文件使打包器能够安全地摇树移除未使用的 JS 代码。组件注册机制也为此做了适配组件通过 with-install.ts 中的withInstall函数包装为其挂载install方法向 Vue app 注册组件名与其驼峰别名export function withInstallT extends Component(options: T) { (options as Recordstring, unknown).install (app: App) { const { name } options; if (name) { app.component(name, options); app.component(camelize(-${name}), options); } }; return options as WithInstallT; }国际化30 语言包国际化能力由 packages/vant/src/locale 提供其 lang/ 目录下当前包含39 个语言包文件zh-CN、en-US、ja-JP、ko-KR、fr-FR、de-DE 等。核心实现 locale/index.ts 使用 Vue 的refreactive维护当前语言与消息表并提供Locale.use()切换语言、Locale.add()增量补充文案的 APIexport const Locale { messages(): Message { return messages[lang.value]; }, use(newLang: string, newMessages?: Message) { lang.value newLang; this.add({ [newLang]: newMessages }); }, add(newMessages: Message {}) { deepAssign(messages, newMessages); }, };其他工程能力SSR 支持组件遵循 Vue 3 渲染规范不依赖浏览器全局状态无障碍访问持续改进中脚手架支持对 Rsbuild 提供第一优先级支持其构建配置见 packages/vant/vant.config.mjstagPrefix: van-定义了组件标签前缀。版本矩阵与维护状态官方首页明确给出了各版本线的框架、发布时间与维护状态当前仓库及文档面向Vant 4Vue 3名称框架发布时间维护状态Vant 4Vue 32022.12长期支持Vant 3Vue 32020.12终止支持不再接受 PRVant 2Vue 22019.06终止支持不再接受 PRVant 1Vue 22018.03终止支持不再接受 PR提示如果你正在使用 Vue 2应浏览 Vant 2 文档并使用vantlatest-v2安装Vant 3 已终止支持新项目请直接使用 Vant 4。浏览器支持范围Vant 2现代浏览器以及 Android 4.0、iOS 8.0Vant 3/4现代浏览器以及 Chrome 51、iOS 10.0与 Vue 3 一致。快速上手安装与脚手架官方首页将安装与基本使用指引指向快速上手章节以下是其核心内容与源码佐证的完整梳理。在现有项目中安装Vue 3 项目安装最新版 VantVue 2 项目安装 Vant 2# Vue 3 项目安装最新版 Vant npm i vant # Vue 2 项目安装 Vant 2 npm i vantlatest-v2也支持 yarn、pnpm 与 bun# 通过 yarn 安装 yarn add vant # 通过 pnpm 安装 pnpm add vant # 通过 Bun 安装 bun add vantVant 4 的peerDependencies声明为vue: ^3.0.0见 package.json安装时请确保项目 Vue 版本满足要求。新建项目推荐 Rsbuild / Vite / Nuxt如果是新项目官方推荐使用Rsbuild基于 Rspack 的构建工具由 Vant 作者开发对 Vant 提供第一优先级支持、Vite或Nuxt框架npm create rsbuildlatest此外vant-demo 示例合集提供了基于 Rsbuild、Vite、Nuxt 3 的完整工程可以直接克隆拷贝代码使用。通过 CDN 快速体验如果只需要开发一个简单的 HTML 页面可以直接在 HTML 中引入 CDN 链接通过全局变量vant访问所有组件!-- 引入样式文件 -- link relstylesheet hrefhttps://fastly.jsdelivr.net/npm/vant4/lib/index.css / !-- 引入 Vue 和 Vant 的 JS 文件 -- script srchttps://fastly.jsdelivr.net/npm/vue3/script script srchttps://fastly.jsdelivr.net/npm/vant4/lib/vant.min.js/script script // 在 #app 标签下渲染一个按钮组件 const app Vue.createApp({ template: van-button按钮/van-button, }); app.use(vant); // 通过 CDN 引入时不会自动注册 Lazyload 组件 // 可以通过下面的方式手动注册 app.use(vant.Lazyload); // 调用工具函数弹出一个 Toast vant.showToast(提示); app.mount(#app); /script几点使用提示免费 CDNjsdelivr、cdnjs、unpkg一般用于制作原型或个人小型项目不推荐在企业生产环境中使用免费 CDN企业开发者建议通过 npm 引入并交由构建工具打包或将对应文件下载后托管在自己的服务器或 CDN 上CDN 方式对应的是lib/vant.min.js全量构建产物见 package.json 中unpkg/jsdelivr字段。组件引入的两种方式方式一常规用法全量引入import { createApp } from vue; // 1. 引入你需要的组件 import { Button } from vant; // 2. 引入组件样式 import vant/lib/index.css; const app createApp(); // 3. 注册你需要的组件 app.use(Button);Vant 支持多种组件注册方式除了全局注册也可以局部注册详见进阶用法中的组件注册章节。组件注册的底层实现即前文介绍的withInstallwith-install.ts它会同时注册van-button与VanButton两种形式方便模板与 JSX 使用。提示Vant 默认支持 Tree Shaking无需配置任何插件即可移除未使用的 JS 代码但 CSS 样式无法通过 Tree Shaking 优化若需按需引入 CSS 样式请使用方法二。方式二按需引入组件与样式在基于 Rsbuild、Vite、webpack 或 vue-cli 的项目中可以使用unplugin-vue-components自动引入组件并配合 Vant 官方提供的解析器vant/auto-import-resolver源码位于 packages/vant-auto-import-resolver自动引入对应组件样式。1. 安装插件# 通过 npm 安装 npm i vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # 通过 yarn 安装 yarn add vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # 通过 pnpm 安装 pnpm add vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # 通过 bun 安装 bun add vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D2. 配置插件Rsbuild 项目在rsbuild.config.js中配置import { defineConfig } from rsbuild/core; import { pluginVue } from rsbuild/plugin-vue; import AutoImport from unplugin-auto-import/rspack; import Components from unplugin-vue-components/rspack; import { VantResolver } from vant/auto-import-resolver; export default defineConfig({ plugins: [pluginVue()], tools: { rspack: { plugins: [ AutoImport({ resolvers: [VantResolver()], }), Components({ resolvers: [VantResolver()], }), ], }, }, });Vite 项目在vite.config.js中配置import vue from vitejs/plugin-vue; import AutoImport from unplugin-auto-import/vite; import Components from unplugin-vue-components/vite; import { VantResolver } from vant/auto-import-resolver; export default { plugins: [ vue(), AutoImport({ resolvers: [VantResolver()], }), Components({ resolvers: [VantResolver()], }), ], };vue-cli 项目在vue.config.js中配置const { VantResolver } require(vant/auto-import-resolver); const AutoImport require(unplugin-auto-import/webpack); const Components require(unplugin-vue-components/webpack); module.exports { configureWebpack: { plugins: [ // 当 unplugin-vue-components 版本小于 0.26.0 时使用以下写法 AutoImport({ resolvers: [VantResolver()] }), Components({ resolvers: [VantResolver()] }), // 当 unplugin-vue-components 版本大于等于 0.26.0 时使用以下写法 AutoImport.default({ resolvers: [VantResolver()], }), Components.default({ resolvers: [VantResolver()] }), ], }, };webpack 项目在webpack.config.js中配置const { VantResolver } require(vant/auto-import-resolver); const AutoImport require(unplugin-auto-import/webpack); const Components require(unplugin-vue-components/webpack); module.exports { plugins: [ // 当 unplugin-vue-components 版本小于 0.26.0 时使用以下写法 AutoImport({ resolvers: [VantResolver()] }), Components({ resolvers: [VantResolver()] }), // 当 unplugin-vue-components 版本大于等于 0.26.0 时使用以下写法 AutoImport.default({ resolvers: [VantResolver()], }), Components.default({ resolvers: [VantResolver()] }), ], };3. 使用组件与 API配置完成后即可直接在模板中使用组件unplugin-vue-components会解析模板并自动注册组件vant/auto-import-resolver会自动引入对应样式template van-button typeprimary / /templateunplugin-auto-import会自动导入对应的 Vant API如showToast及其样式script showToast(No need to import showToast); /script使用提示避免混用不要同时使用「全量引入」和「按需引入」两种方式否则会导致代码重复、样式错乱插件归属unplugin-vue-components并非 Vant 官方维护的插件组件导入相关问题请到其仓库反馈样式相关问题可在 Vant 仓库反馈版本适配当unplugin-vue-components版本 0.26.0 时对于 webpack、vue-cli 和 rspack需要使用ComponentsPlugin.default进行注册解析器配置vant/auto-import-resolver提供了一些配置项可阅读其 README 了解详情。在 Nuxt 3 中使用Nuxt 3 场景推荐使用 vant/nuxt 模块可自动引入组件并按需引入样式包括函数组件。npm i vant/nuxt -D在nuxt.config.js中增加模块export default defineNuxtConfig({ modules: [vant/nuxt], });之后即可在模板中直接使用且支持懒加载前缀template van-button typeprimary clickshowToast(toast)button/van-button VanButton typesuccess clickshowNotify(notify)button/VanButton LazyVanButton typedefaultlazy button/LazyVanButton /template迁移提示移除 babel-plugin-import从 Vant 4.0 开始官方不再支持babel-plugin-import需要移除项目中的该插件只需删除babel.config.js中的相关配置module.exports { plugins: [ - [import, { - libraryName: vant, - libraryDirectory: es, - style: true - }, vant] ] };移除后有两大收益不再强依赖 babel项目可以使用 esbuild、swc 等更高效的编译工具大幅提升编译效率不再受babel-plugin-import的 import 写法限制可以从 vant 中导入组件以外的内容例如 Vant 4 新增的showToast、showDialog等函数式 APIimport { showToast, showDialog } from vant;官方生态与社区生态官方团队维护的项目由 Vant 官方团队维护的项目中以下包已包含在当前仓库的 packages 目录中可直接查看源码项目描述仓库路径vant-cli开箱即用的组件库搭建工具packages/vant-clivant-iconsVant 图标库packages/vant-iconsvant-touch-emulator在桌面端使用 Vant 的辅助库packages/vant-touch-emulatorvant-useVant 组合式函数库useClickAway、useCountDown 等packages/vant-usevant-area-data省市区数据包packages/vant-area-datavant-auto-import-resolver按需引入样式的解析器packages/vant-auto-import-resolvervant-compat兼容包toast、dialog 等函数式组件兼容packages/vant-compatvant-popperjs基于 Popper.js 的 Vant 维护版packages/vant-popperjs此外官方还维护了 vant-weapp微信小程序版、vant-demo官方示例合集与 vant-nuxtNuxt 模块等项目。社区维护的项目社区生态同样活跃包括参照 Vant 打造的 React 移动端组件库 react-vant、vant-theme 在线主题预览工具、基于 Vant Weapp 的多端组件库、基于 Vant 的移动端项目模板vue3-h5-template、vue3-vant-mobile、nuxt-vant-mobile 等、vant-playground 系列在线体验工具以及 Raycast 中搜索 Vant 文档的扩展等可按需选用。贡献与开源协议Vant 及其小程序版本由多位核心贡献者长期维护同时通过 Open Collective 接受社区贡献者的广泛参与。参与方式包括提交代码阅读贡献指南后提交 PR反馈问题使用中发现问题可提交 Issue关注讨论通过 Discussions 讨论区参与设计讨论。本项目基于MIT 协议开源见仓库根目录 LICENSE可自由使用与参与开源。如果你需要获取完整源码与最新文档可通过git clone本仓库后在 packages/vant 下运行pnpm install与pnpm dev启动本地开发与文档站点。【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Vant 移动端 Vue 组件库全面解析：特性、版本矩阵与快速上手实战指南
Vant 移动端 Vue 组件库全面解析特性、版本矩阵与快速上手实战指南【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vantVant 是一个轻量、可定制的移动端 Vue 组件库自 2017 年开源以来持续演进目前官方仓库同时维护 Vue 2、Vue 3 与微信小程序三个版本线。本文以当前仓库Vant 4.x的官方介绍文档为主体结合 packages/vant 下的源码、配置与测试系统梳理 Vant 的核心特性、版本维护状态、安装引入方式与生态体系帮助你在实际项目中快速选型、正确引入并充分发挥其工程化能力。Vant 是什么Vant 定位于移动端 Web 应用的 UI 组件库其核心设计目标有三个关键词轻量组件体积小、无外部依赖、可定制主题变量体系 深色模式与工程化友好Tree Shaking、按需引入、SSR、无障碍支持。从仓库结构看Vant 采用 monorepo 组织方式见 pnpm-workspace.yaml核心组件代码位于 packages/vant/src当前该目录下共有105 个组件模块覆盖基础组件Button、Cell、Icon、表单组件Field、Picker、Calendar、反馈组件Dialog、Toast、ActionSheet、展示组件Swipe、Skeleton、Watermark、导航组件Tabbar、NavBar、IndexBar、业务组件AddressEdit、SubmitBar、Coupon以及组合式 APIuseClickAway、useCountDown 等等多个维度可覆盖移动端主流业务场景。官方目前提供三个版本线Vue 3 版本即本文档所在的 Vant 4.x当前仓库版本为 4.10.0见 package.jsonVue 2 版本Vant 2适用于仍运行 Vue 2 的存量项目微信小程序版本vant-weapp适用于小程序开发场景另有社区团队维护的 React 移植版本 react-vant。核心特性深度解析官方首页文档列出了一系列特性下面结合仓库源码逐一印证其底层实现便于你理解这些能力标签背后的工程保障。轻量与零外部依赖Vant 宣称组件平均体积小于 1KBmingzip且不依赖三方 npm 包。从 packages/vant/package.json 的依赖声明可以看到vant 包仅依赖三个内部/轻量包vant/popperjsPopper.js 的 Vant 维护版仅用于 Popover 等浮层组件vant/useVant 自研组合式函数库vue/sharedVue 内部共享工具。对外部生态的依赖被压缩到极致这是组件库体积可控的基础。同时 package.json 中声明了unpkg与jsdelivr字段指向lib/vant.min.js即开箱即用的全量压缩构建产物。80 高质量组件前文已述当前 packages/vant/src 下有 105 个组件目录。每个组件模块的目录结构高度统一以 packages/vant/src/button 为例包含Button.tsx组件实现TSX 写法index.ts导出入口types.ts类型定义index.less组件样式README.md/README.zh-CN.md组件文档demo/与test/组件示例与测试用例。这种组件即目录的规范结构详见 vant-cli 目录规范文档保证了 80 组件在开发与维护上的高度一致性。完整类型定义与 90% 测试覆盖率组件使用 TypeScript 编写每个组件在 index.ts 中不仅导出组件本身还会导出buttonProps与ButtonProps等类型并在模块内通过declare module vue扩展GlobalComponents接口声明VanButton等全局组件类型使模板中的类型提示开箱即用declare module vue { export interface GlobalComponents { VanButton: typeof Button; } }测试方面仓库为绝大多数组件维护了 test/ 目录含.ts单测与.snap快照并提供了test:coverage脚本见 package.json用于产出覆盖率报告。700 主题变量与可定制性内置 700 个主题变量的实现在样式层。对 packages/vant/src/style 下的 Less 源码统计仓库中共定义了800 个--van-*CSS 自定义属性集中在 css-variables.less。所有组件样式均通过var(--van-xxx)引用这些变量因此开发者只需覆盖 CSS 变量即可完成全局主题定制无需修改源码。此外站点配置 packages/vant/vant.config.mjs 中声明了深色模式类名van-theme-dark与浅色模式类名van-theme-light配合内置样式即可实现深色模式切换。Tree Shaking 与按需引入Vant 默认支持 Tree Shaking。在 packages/vant/package.json 中通过sideEffects字段精准声明副作用文件范围仅样式文件使打包器能够安全地摇树移除未使用的 JS 代码。组件注册机制也为此做了适配组件通过 with-install.ts 中的withInstall函数包装为其挂载install方法向 Vue app 注册组件名与其驼峰别名export function withInstallT extends Component(options: T) { (options as Recordstring, unknown).install (app: App) { const { name } options; if (name) { app.component(name, options); app.component(camelize(-${name}), options); } }; return options as WithInstallT; }国际化30 语言包国际化能力由 packages/vant/src/locale 提供其 lang/ 目录下当前包含39 个语言包文件zh-CN、en-US、ja-JP、ko-KR、fr-FR、de-DE 等。核心实现 locale/index.ts 使用 Vue 的refreactive维护当前语言与消息表并提供Locale.use()切换语言、Locale.add()增量补充文案的 APIexport const Locale { messages(): Message { return messages[lang.value]; }, use(newLang: string, newMessages?: Message) { lang.value newLang; this.add({ [newLang]: newMessages }); }, add(newMessages: Message {}) { deepAssign(messages, newMessages); }, };其他工程能力SSR 支持组件遵循 Vue 3 渲染规范不依赖浏览器全局状态无障碍访问持续改进中脚手架支持对 Rsbuild 提供第一优先级支持其构建配置见 packages/vant/vant.config.mjstagPrefix: van-定义了组件标签前缀。版本矩阵与维护状态官方首页明确给出了各版本线的框架、发布时间与维护状态当前仓库及文档面向Vant 4Vue 3名称框架发布时间维护状态Vant 4Vue 32022.12长期支持Vant 3Vue 32020.12终止支持不再接受 PRVant 2Vue 22019.06终止支持不再接受 PRVant 1Vue 22018.03终止支持不再接受 PR提示如果你正在使用 Vue 2应浏览 Vant 2 文档并使用vantlatest-v2安装Vant 3 已终止支持新项目请直接使用 Vant 4。浏览器支持范围Vant 2现代浏览器以及 Android 4.0、iOS 8.0Vant 3/4现代浏览器以及 Chrome 51、iOS 10.0与 Vue 3 一致。快速上手安装与脚手架官方首页将安装与基本使用指引指向快速上手章节以下是其核心内容与源码佐证的完整梳理。在现有项目中安装Vue 3 项目安装最新版 VantVue 2 项目安装 Vant 2# Vue 3 项目安装最新版 Vant npm i vant # Vue 2 项目安装 Vant 2 npm i vantlatest-v2也支持 yarn、pnpm 与 bun# 通过 yarn 安装 yarn add vant # 通过 pnpm 安装 pnpm add vant # 通过 Bun 安装 bun add vantVant 4 的peerDependencies声明为vue: ^3.0.0见 package.json安装时请确保项目 Vue 版本满足要求。新建项目推荐 Rsbuild / Vite / Nuxt如果是新项目官方推荐使用Rsbuild基于 Rspack 的构建工具由 Vant 作者开发对 Vant 提供第一优先级支持、Vite或Nuxt框架npm create rsbuildlatest此外vant-demo 示例合集提供了基于 Rsbuild、Vite、Nuxt 3 的完整工程可以直接克隆拷贝代码使用。通过 CDN 快速体验如果只需要开发一个简单的 HTML 页面可以直接在 HTML 中引入 CDN 链接通过全局变量vant访问所有组件!-- 引入样式文件 -- link relstylesheet hrefhttps://fastly.jsdelivr.net/npm/vant4/lib/index.css / !-- 引入 Vue 和 Vant 的 JS 文件 -- script srchttps://fastly.jsdelivr.net/npm/vue3/script script srchttps://fastly.jsdelivr.net/npm/vant4/lib/vant.min.js/script script // 在 #app 标签下渲染一个按钮组件 const app Vue.createApp({ template: van-button按钮/van-button, }); app.use(vant); // 通过 CDN 引入时不会自动注册 Lazyload 组件 // 可以通过下面的方式手动注册 app.use(vant.Lazyload); // 调用工具函数弹出一个 Toast vant.showToast(提示); app.mount(#app); /script几点使用提示免费 CDNjsdelivr、cdnjs、unpkg一般用于制作原型或个人小型项目不推荐在企业生产环境中使用免费 CDN企业开发者建议通过 npm 引入并交由构建工具打包或将对应文件下载后托管在自己的服务器或 CDN 上CDN 方式对应的是lib/vant.min.js全量构建产物见 package.json 中unpkg/jsdelivr字段。组件引入的两种方式方式一常规用法全量引入import { createApp } from vue; // 1. 引入你需要的组件 import { Button } from vant; // 2. 引入组件样式 import vant/lib/index.css; const app createApp(); // 3. 注册你需要的组件 app.use(Button);Vant 支持多种组件注册方式除了全局注册也可以局部注册详见进阶用法中的组件注册章节。组件注册的底层实现即前文介绍的withInstallwith-install.ts它会同时注册van-button与VanButton两种形式方便模板与 JSX 使用。提示Vant 默认支持 Tree Shaking无需配置任何插件即可移除未使用的 JS 代码但 CSS 样式无法通过 Tree Shaking 优化若需按需引入 CSS 样式请使用方法二。方式二按需引入组件与样式在基于 Rsbuild、Vite、webpack 或 vue-cli 的项目中可以使用unplugin-vue-components自动引入组件并配合 Vant 官方提供的解析器vant/auto-import-resolver源码位于 packages/vant-auto-import-resolver自动引入对应组件样式。1. 安装插件# 通过 npm 安装 npm i vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # 通过 yarn 安装 yarn add vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # 通过 pnpm 安装 pnpm add vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D # 通过 bun 安装 bun add vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D2. 配置插件Rsbuild 项目在rsbuild.config.js中配置import { defineConfig } from rsbuild/core; import { pluginVue } from rsbuild/plugin-vue; import AutoImport from unplugin-auto-import/rspack; import Components from unplugin-vue-components/rspack; import { VantResolver } from vant/auto-import-resolver; export default defineConfig({ plugins: [pluginVue()], tools: { rspack: { plugins: [ AutoImport({ resolvers: [VantResolver()], }), Components({ resolvers: [VantResolver()], }), ], }, }, });Vite 项目在vite.config.js中配置import vue from vitejs/plugin-vue; import AutoImport from unplugin-auto-import/vite; import Components from unplugin-vue-components/vite; import { VantResolver } from vant/auto-import-resolver; export default { plugins: [ vue(), AutoImport({ resolvers: [VantResolver()], }), Components({ resolvers: [VantResolver()], }), ], };vue-cli 项目在vue.config.js中配置const { VantResolver } require(vant/auto-import-resolver); const AutoImport require(unplugin-auto-import/webpack); const Components require(unplugin-vue-components/webpack); module.exports { configureWebpack: { plugins: [ // 当 unplugin-vue-components 版本小于 0.26.0 时使用以下写法 AutoImport({ resolvers: [VantResolver()] }), Components({ resolvers: [VantResolver()] }), // 当 unplugin-vue-components 版本大于等于 0.26.0 时使用以下写法 AutoImport.default({ resolvers: [VantResolver()], }), Components.default({ resolvers: [VantResolver()] }), ], }, };webpack 项目在webpack.config.js中配置const { VantResolver } require(vant/auto-import-resolver); const AutoImport require(unplugin-auto-import/webpack); const Components require(unplugin-vue-components/webpack); module.exports { plugins: [ // 当 unplugin-vue-components 版本小于 0.26.0 时使用以下写法 AutoImport({ resolvers: [VantResolver()] }), Components({ resolvers: [VantResolver()] }), // 当 unplugin-vue-components 版本大于等于 0.26.0 时使用以下写法 AutoImport.default({ resolvers: [VantResolver()], }), Components.default({ resolvers: [VantResolver()] }), ], };3. 使用组件与 API配置完成后即可直接在模板中使用组件unplugin-vue-components会解析模板并自动注册组件vant/auto-import-resolver会自动引入对应样式template van-button typeprimary / /templateunplugin-auto-import会自动导入对应的 Vant API如showToast及其样式script showToast(No need to import showToast); /script使用提示避免混用不要同时使用「全量引入」和「按需引入」两种方式否则会导致代码重复、样式错乱插件归属unplugin-vue-components并非 Vant 官方维护的插件组件导入相关问题请到其仓库反馈样式相关问题可在 Vant 仓库反馈版本适配当unplugin-vue-components版本 0.26.0 时对于 webpack、vue-cli 和 rspack需要使用ComponentsPlugin.default进行注册解析器配置vant/auto-import-resolver提供了一些配置项可阅读其 README 了解详情。在 Nuxt 3 中使用Nuxt 3 场景推荐使用 vant/nuxt 模块可自动引入组件并按需引入样式包括函数组件。npm i vant/nuxt -D在nuxt.config.js中增加模块export default defineNuxtConfig({ modules: [vant/nuxt], });之后即可在模板中直接使用且支持懒加载前缀template van-button typeprimary clickshowToast(toast)button/van-button VanButton typesuccess clickshowNotify(notify)button/VanButton LazyVanButton typedefaultlazy button/LazyVanButton /template迁移提示移除 babel-plugin-import从 Vant 4.0 开始官方不再支持babel-plugin-import需要移除项目中的该插件只需删除babel.config.js中的相关配置module.exports { plugins: [ - [import, { - libraryName: vant, - libraryDirectory: es, - style: true - }, vant] ] };移除后有两大收益不再强依赖 babel项目可以使用 esbuild、swc 等更高效的编译工具大幅提升编译效率不再受babel-plugin-import的 import 写法限制可以从 vant 中导入组件以外的内容例如 Vant 4 新增的showToast、showDialog等函数式 APIimport { showToast, showDialog } from vant;官方生态与社区生态官方团队维护的项目由 Vant 官方团队维护的项目中以下包已包含在当前仓库的 packages 目录中可直接查看源码项目描述仓库路径vant-cli开箱即用的组件库搭建工具packages/vant-clivant-iconsVant 图标库packages/vant-iconsvant-touch-emulator在桌面端使用 Vant 的辅助库packages/vant-touch-emulatorvant-useVant 组合式函数库useClickAway、useCountDown 等packages/vant-usevant-area-data省市区数据包packages/vant-area-datavant-auto-import-resolver按需引入样式的解析器packages/vant-auto-import-resolvervant-compat兼容包toast、dialog 等函数式组件兼容packages/vant-compatvant-popperjs基于 Popper.js 的 Vant 维护版packages/vant-popperjs此外官方还维护了 vant-weapp微信小程序版、vant-demo官方示例合集与 vant-nuxtNuxt 模块等项目。社区维护的项目社区生态同样活跃包括参照 Vant 打造的 React 移动端组件库 react-vant、vant-theme 在线主题预览工具、基于 Vant Weapp 的多端组件库、基于 Vant 的移动端项目模板vue3-h5-template、vue3-vant-mobile、nuxt-vant-mobile 等、vant-playground 系列在线体验工具以及 Raycast 中搜索 Vant 文档的扩展等可按需选用。贡献与开源协议Vant 及其小程序版本由多位核心贡献者长期维护同时通过 Open Collective 接受社区贡献者的广泛参与。参与方式包括提交代码阅读贡献指南后提交 PR反馈问题使用中发现问题可提交 Issue关注讨论通过 Discussions 讨论区参与设计讨论。本项目基于MIT 协议开源见仓库根目录 LICENSE可自由使用与参与开源。如果你需要获取完整源码与最新文档可通过git clone本仓库后在 packages/vant 下运行pnpm install与pnpm dev启动本地开发与文档站点。【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考