Vant 在 Vite 项目中如何用 vant/auto-import-resolver 配置按需引入组件与样式【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant在基于 Vite 的 Vue 3 项目中使用 Vant 时常规写法需要手动import { Button } from vant并引入vant/lib/index.css全量样式。如果你希望 JS 和 CSS 都按实际使用的组件来打包可以用 Vant 官方基于unplugin-vue-components提供的解析器vant/auto-import-resolver让模板中用到的组件和函数 API如showToast被自动导入并自动引入对应组件的 CSS 样式。本文按 快速上手 文档中的步骤完成安装、配置和使用。前提条件一个已有的 Vite Vue 3 项目。Vant 通过npm i vant安装的是最新版Vant 4Vue 2 项目应安装vantlatest-v2不在本文范围内。文档说明Vant 默认支持 Tree Shaking不配置任何插件时即可移除不需要的 JS 代码但 CSS 无法通过 Tree Shaking 优化。按需引入的价值主要体现在减少 CSS 体积文档同时提示这种方式使用起来会更繁琐一些如果业务对 CSS 体积要求不是特别极致更推荐简便的常规用法。1. 安装 Vant 与插件在项目中先安装 Vant 本体再安装按需引入所需的两个插件和解析器安装为开发依赖# Vue 3 项目安装最新版 Vant npm i vant # 安装按需引入所需的插件也可以换用 yarn add / pnpm add / bun add npm i vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D2. 在 vite.config.js 中配置插件按 快速上手 文档Vite 项目在vite.config.js中同时配置AutoImport和Components两个插件并都传入VantResolver()作为解析器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()], }), ], };两个插件分工不同unplugin-vue-componentsComponents负责解析模板并自动注册对应组件vant/auto-import-resolver负责自动引入组件对应的样式unplugin-auto-importAutoImport负责自动导入 Vant 的函数 API 及其样式。3. 使用组件和函数 API配置完成后不需要再手动写import模板中直接使用组件标签unplugin-vue-components会解析模板并自动注册template van-button typeprimary / /template脚本中直接调用函数 APIunplugin-auto-import会自动导入对应的 Vant API 以及样式以下showToast用法来自文档示例script showToast(No need to import showToast); /script验证方式就是这两处能否不手动import直接工作组件正常渲染且带样式、showToast正常弹出说明自动导入链路已生效。可配置的选项VantResolver()支持传入选项完整说明见 READMEimportStyleType:booleanDefault:true是否自动引用组件对应的样式。设为false可禁用样式引用Components({ resolvers: [ VantResolver({ // 禁用样式引用 importStyle: false, }), ], });moduleType:esm | cjsDefault:esm设置引用的模块类型Components({ resolvers: [ VantResolver({ module: cjs, }), ], });ssrDefault:undefined此选项已废弃请使用module选项来设置模块类型。excludeType:string[]Default:[]设置不自动引入的组件或 API。组件名用于Components场景API 名用于AutoImport场景Components({ resolvers: [ VantResolver({ exclude: [Button], }), ], });AutoImport({ resolvers: [ VantResolver({ exclude: [showToast], }), ], });使用限制与问题反馈文档给出的使用提示避免同时使用「全量引入」和「按需引入」两种方式否则会导致代码重复、样式错乱等问题。如果遇到组件不能导入的问题由于unplugin-vue-components并不是 Vant 官方维护的插件文档建议到unplugin/unplugin-vue-components仓库反馈如果是样式不生效的问题可以在 Vant 仓库下反馈。另外快速上手 文档还说明从 Vant 4.0 版本开始不再支持babel-plugin-import从旧版本迁移过来的项目需要删除babel.config.js中针对 vant 的import插件配置改为本文的按需引入方式。【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考