适配 WinJS 的 Vant 插件,支持 Vue 2 和 Vue 3 的 Vant 组件库自动按需引入。
- 🚀 自动按需引入: 自动导入 Vant 组件和对应样式
- 🎯 版本兼容: 同时支持 Vant 2.x (Vue 2) 和 Vant 4.x (Vue 3)
- 🔧 函数组件支持: 针对 Vue 2 提供特殊的函数组件处理 (Toast、Dialog、Notify、ImagePreview)
- 📦 无缝集成: 与 WinJS 框架完美集成,配置简单
- 🎨 样式优化: 自动处理样式引入,避免样式冲突
npm install @winner-fed/plugin-vant -D # 或者 yarn add @winner-fed/plugin-vant # 或者 pnpm add @winner-fed/plugin-vant
- Vant 2.x: 适用于 Vue 2 项目
- Vant 4.x: 适用于 Vue 3 项目
import { defineConfig } from 'win'; export default defineConfig({ plugins: ['@winner-fed/plugin-vant'], vant: { // 配置选项 } });
# Vue 3 项目 npm install vant@4 # Vue 2 项目 npm install vant@2
<template> <div> <van-button type="primary">按钮</van-button> <van-cell title="单元格" value="内容" /> </div> </template> <script setup> import { showToast } from 'vant'; // 函数调用 showToast('提示内容'); </script>
<template> <div> <van-button type="primary">按钮</van-button> <van-cell title="单元格" value="内容" /> </div> </template> <script> export default { methods: { showToast() { // 通过 this 调用 this.$toast('提示内容'); } } } </script>
针对 Vue 2 项目,配置需要全局引入的函数组件:
export default defineConfig({ plugins: ['@winner-fed/plugin-vant'], vant: { legacyFunction: ['Dialog', 'Toast', 'Notify', 'ImagePreview'] } });
Dialog- 弹出框Toast- 轻提示Notify- 消息通知ImagePreview- 图片预览
配置后,这些组件将:
- 自动全局引入样式
- 支持
this.$dialog、this.$toast等方式调用 - 支持在模板中使用
<van-dialog>、<van-toast>等标签
<template> <div class="demo"> <van-button type="primary" @click="handleClick"> 点击按钮 </van-button> <van-cell-group> <van-cell title="单元格" value="内容" /> <van-cell title="单元格" value="内容" is-link /> </van-cell-group> </div> </template> <script setup> import { showToast, showDialog } from 'vant'; const handleClick = () => { showToast('按钮被点击了'); }; const handleDialog = () => { showDialog({ title: '标题', message: '弹窗内容' }); }; </script>
<template> <div class="demo"> <van-button type="primary" @click="handleClick"> 点击按钮 </van-button> <van-cell-group> <van-cell title="单元格" value="内容" /> <van-cell title="单元格" value="内容" is-link /> </van-cell-group> <!-- 函数组件也可以作为标签使用 --> <van-dialog v-model="showDialog" title="标题"> 弹窗内容 </van-dialog> </div> </template> <script> export default { data() { return { showDialog: false }; }, methods: { handleClick() { this.$toast('按钮被点击了'); }, handleDialog() { this.$dialog.alert({ title: '标题', message: '弹窗内容' }); } } } </script>
插件使用 @vant/auto-import-resolver 自动解析器,实现:
- 自动识别
van-前缀的组件 - 按需引入对应的组件和样式
- 支持 Tree Shaking,减少打包体积
由于 Vue 2 和 Vant 2.x 的特殊性,插件提供了定制的解析器:
- 自动处理
van-前缀组件的按需引入 - 特殊处理函数组件(Toast、Dialog 等)
- 生成运行时文件处理全局引入
-
版本匹配: 确保使用正确的 Vant 版本
- Vue 2 项目使用 Vant 2.x
- Vue 3 项目使用 Vant 4.x
-
函数组件: Vue 2 项目中的函数组件需要通过
legacyFunction配置 -
样式处理: 插件会自动处理样式引入,无需手动引入 CSS
-
按需引入: 未使用的组件不会被打包,自动实现 Tree Shaking
A: Vue 2 的 Vant 2.x 中,Toast、Dialog 等函数组件需要特殊处理才能正确引入样式和支持全局调用。
A: 可以。配置了 legacyFunction 后,既可以使用 <van-dialog> 标签,也可以使用 this.$dialog() 函数调用。
A: 可以查看生成的 auto-imports.d.ts 和 components.d.ts 文件,确认类型声明是否正确生成。
MIT.