https://github.com/winjs-dev/winjs-plugin-vant
A Vant plugin adapted for WinJS, which supports automatic on-demand import of the Vant component library for both Vue 2 and Vue 3.
https://github.com/winjs-dev/winjs-plugin-vant
plugin vant vue winjs
Last synced: 8 months ago
JSON representation
A Vant plugin adapted for WinJS, which supports automatic on-demand import of the Vant component library for both Vue 2 and Vue 3.
- Host: GitHub
- URL: https://github.com/winjs-dev/winjs-plugin-vant
- Owner: winjs-dev
- License: mit
- Created: 2025-08-13T11:56:15.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-14T06:59:13.000Z (10 months ago)
- Last Synced: 2025-09-18T05:31:50.726Z (9 months ago)
- Topics: plugin, vant, vue, winjs
- Language: TypeScript
- Homepage: https://winjs-dev.github.io/winjs-docs/plugins/uiframework#vant
- Size: 395 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# winjs-plugin-vant
适配 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 框架完美集成，配置简单
- 🎨 **样式优化**: 自动处理样式引入，避免样式冲突
## 安装
```bash
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 项目
## 基础用法
### 1. 在 `.winrc.ts` 中配置插件
```typescript
import { defineConfig } from 'win';
export default defineConfig({
plugins: ['@winner-fed/plugin-vant'],
vant: {
// 配置选项
}
});
```
### 2. 安装 Vant 依赖
```bash
# Vue 3 项目
npm install vant@4
# Vue 2 项目
npm install vant@2
```
### 3. 在代码中使用
#### Vue 3 项目 (Vant 4.x)
```vue
按钮
import { showToast } from 'vant';
// 函数调用
showToast('提示内容');
```
#### Vue 2 项目 (Vant 2.x)
```vue
按钮
export default {
methods: {
showToast() {
// 通过 this 调用
this.$toast('提示内容');
}
}
}
```
## 配置选项
### legacyFunction (Vue 2 项目专用)
针对 Vue 2 项目，配置需要全局引入的函数组件：
```typescript
export default defineConfig({
plugins: ['@winner-fed/plugin-vant'],
vant: {
legacyFunction: ['Dialog', 'Toast', 'Notify', 'ImagePreview']
}
});
```
#### 支持的函数组件
- `Dialog` - 弹出框
- `Toast` - 轻提示
- `Notify` - 消息通知
- `ImagePreview` - 图片预览
配置后，这些组件将：
1. 自动全局引入样式
2. 支持 `this.$dialog`、`this.$toast` 等方式调用
3. 支持在模板中使用 ``、`` 等标签
## 使用示例
### Vue 3 完整示例
```vue
点击按钮
import { showToast, showDialog } from 'vant';
const handleClick = () => {
showToast('按钮被点击了');
};
const handleDialog = () => {
showDialog({
title: '标题',
message: '弹窗内容'
});
};
```
### Vue 2 完整示例
```vue
点击按钮
弹窗内容
export default {
data() {
return {
showDialog: false
};
},
methods: {
handleClick() {
this.$toast('按钮被点击了');
},
handleDialog() {
this.$dialog.alert({
title: '标题',
message: '弹窗内容'
});
}
}
}
```
## 工作原理
### Vue 3 项目
插件使用 `@vant/auto-import-resolver` 自动解析器，实现：
- 自动识别 `van-` 前缀的组件
- 按需引入对应的组件和样式
- 支持 Tree Shaking，减少打包体积
### Vue 2 项目
由于 Vue 2 和 Vant 2.x 的特殊性，插件提供了定制的解析器：
- 自动处理 `van-` 前缀组件的按需引入
- 特殊处理函数组件（Toast、Dialog 等）
- 生成运行时文件处理全局引入
## 注意事项
1. **版本匹配**: 确保使用正确的 Vant 版本
- Vue 2 项目使用 Vant 2.x
- Vue 3 项目使用 Vant 4.x
2. **函数组件**: Vue 2 项目中的函数组件需要通过 `legacyFunction` 配置
3. **样式处理**: 插件会自动处理样式引入，无需手动引入 CSS
4. **按需引入**: 未使用的组件不会被打包，自动实现 Tree Shaking
## 常见问题
### Q: 为什么 Vue 2 项目需要 legacyFunction 配置？
A: Vue 2 的 Vant 2.x 中，Toast、Dialog 等函数组件需要特殊处理才能正确引入样式和支持全局调用。
### Q: 可以同时使用标签和函数调用吗？
A: 可以。配置了 `legacyFunction` 后，既可以使用 `` 标签，也可以使用 `this.$dialog()` 函数调用。
### Q: 如何确认插件是否正常工作？
A: 可以查看生成的 `auto-imports.d.ts` 和 `components.d.ts` 文件，确认类型声明是否正确生成。
## 许可证
[MIT](./LICENSE).