{"id":31970668,"url":"https://github.com/winjs-dev/winjs-plugin-vant","last_synced_at":"2025-10-14T19:18:12.462Z","repository":{"id":309726722,"uuid":"1037321959","full_name":"winjs-dev/winjs-plugin-vant","owner":"winjs-dev","description":"A Vant plugin adapted for WinJS, which supports automatic on-demand import of the Vant component library for both Vue 2 and Vue 3.","archived":false,"fork":false,"pushed_at":"2025-08-14T06:59:13.000Z","size":404,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-18T05:31:50.726Z","etag":null,"topics":["plugin","vant","vue","winjs"],"latest_commit_sha":null,"homepage":"https://winjs-dev.github.io/winjs-docs/plugins/uiframework#vant","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/winjs-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-13T11:56:15.000Z","updated_at":"2025-08-14T06:59:14.000Z","dependencies_parsed_at":"2025-08-13T14:23:45.138Z","dependency_job_id":"1739057d-0a7c-424c-a6f6-ef5bcb9d2ca0","html_url":"https://github.com/winjs-dev/winjs-plugin-vant","commit_stats":null,"previous_names":["winjs-dev/winjs-plugin-vant"],"tags_count":1,"template":false,"template_full_name":"winjs-dev/winjs-plugin-template","purl":"pkg:github/winjs-dev/winjs-plugin-vant","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-vant","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-vant/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-vant/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-vant/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/winjs-dev","download_url":"https://codeload.github.com/winjs-dev/winjs-plugin-vant/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-vant/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279020655,"owners_count":26086895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["plugin","vant","vue","winjs"],"created_at":"2025-10-14T19:18:07.553Z","updated_at":"2025-10-14T19:18:12.455Z","avatar_url":"https://github.com/winjs-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# winjs-plugin-vant\n\n适配 WinJS 的 Vant 插件，支持 Vue 2 和 Vue 3 的 Vant 组件库自动按需引入。\n\n\u003cp\u003e\n  \u003ca href=\"https://npmjs.com/package/@winner-fed/plugin-vant\"\u003e\n   \u003cimg src=\"https://img.shields.io/npm/v/@winner-fed/plugin-vant?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"npm version\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"license\" /\u003e\n  \u003ca href=\"https://npmcharts.com/compare/@winner-fed/plugin-vant?minimal=true\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@winner-fed/plugin-vant.svg?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"downloads\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n## 功能特性\n\n- 🚀 **自动按需引入**: 自动导入 Vant 组件和对应样式\n- 🎯 **版本兼容**: 同时支持 Vant 2.x (Vue 2) 和 Vant 4.x (Vue 3)\n- 🔧 **函数组件支持**: 针对 Vue 2 提供特殊的函数组件处理 (Toast、Dialog、Notify、ImagePreview)\n- 📦 **无缝集成**: 与 WinJS 框架完美集成，配置简单\n- 🎨 **样式优化**: 自动处理样式引入，避免样式冲突\n\n## 安装\n\n```bash\nnpm install @winner-fed/plugin-vant -D\n# 或者\nyarn add @winner-fed/plugin-vant\n# 或者\npnpm add @winner-fed/plugin-vant\n```\n\n## 支持的版本\n\n- **Vant 2.x**: 适用于 Vue 2 项目\n- **Vant 4.x**: 适用于 Vue 3 项目\n\n## 基础用法\n\n### 1. 在 `.winrc.ts` 中配置插件\n\n```typescript\nimport { defineConfig } from 'win';\n\nexport default defineConfig({\n  plugins: ['@winner-fed/plugin-vant'],\n  vant: {\n    // 配置选项\n  }\n});\n```\n\n### 2. 安装 Vant 依赖\n\n```bash\n# Vue 3 项目\nnpm install vant@4\n\n# Vue 2 项目  \nnpm install vant@2\n```\n\n### 3. 在代码中使用\n\n#### Vue 3 项目 (Vant 4.x)\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cvan-button type=\"primary\"\u003e按钮\u003c/van-button\u003e\n    \u003cvan-cell title=\"单元格\" value=\"内容\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { showToast } from 'vant';\n\n// 函数调用\nshowToast('提示内容');\n\u003c/script\u003e\n```\n\n#### Vue 2 项目 (Vant 2.x)\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cvan-button type=\"primary\"\u003e按钮\u003c/van-button\u003e\n    \u003cvan-cell title=\"单元格\" value=\"内容\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  methods: {\n    showToast() {\n      // 通过 this 调用\n      this.$toast('提示内容');\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n## 配置选项\n\n### legacyFunction (Vue 2 项目专用)\n\n针对 Vue 2 项目，配置需要全局引入的函数组件：\n\n```typescript\nexport default defineConfig({\n  plugins: ['@winner-fed/plugin-vant'],\n  vant: {\n    legacyFunction: ['Dialog', 'Toast', 'Notify', 'ImagePreview']\n  }\n});\n```\n\n#### 支持的函数组件\n\n- `Dialog` - 弹出框\n- `Toast` - 轻提示\n- `Notify` - 消息通知\n- `ImagePreview` - 图片预览\n\n配置后，这些组件将：\n1. 自动全局引入样式\n2. 支持 `this.$dialog`、`this.$toast` 等方式调用\n3. 支持在模板中使用 `\u003cvan-dialog\u003e`、`\u003cvan-toast\u003e` 等标签\n\n## 使用示例\n\n### Vue 3 完整示例\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"demo\"\u003e\n    \u003cvan-button type=\"primary\" @click=\"handleClick\"\u003e\n      点击按钮\n    \u003c/van-button\u003e\n    \n    \u003cvan-cell-group\u003e\n      \u003cvan-cell title=\"单元格\" value=\"内容\" /\u003e\n      \u003cvan-cell title=\"单元格\" value=\"内容\" is-link /\u003e\n    \u003c/van-cell-group\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { showToast, showDialog } from 'vant';\n\nconst handleClick = () =\u003e {\n  showToast('按钮被点击了');\n};\n\nconst handleDialog = () =\u003e {\n  showDialog({\n    title: '标题',\n    message: '弹窗内容'\n  });\n};\n\u003c/script\u003e\n```\n\n### Vue 2 完整示例\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"demo\"\u003e\n    \u003cvan-button type=\"primary\" @click=\"handleClick\"\u003e\n      点击按钮\n    \u003c/van-button\u003e\n    \n    \u003cvan-cell-group\u003e\n      \u003cvan-cell title=\"单元格\" value=\"内容\" /\u003e\n      \u003cvan-cell title=\"单元格\" value=\"内容\" is-link /\u003e\n    \u003c/van-cell-group\u003e\n    \n    \u003c!-- 函数组件也可以作为标签使用 --\u003e\n    \u003cvan-dialog v-model=\"showDialog\" title=\"标题\"\u003e\n      弹窗内容\n    \u003c/van-dialog\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      showDialog: false\n    };\n  },\n  methods: {\n    handleClick() {\n      this.$toast('按钮被点击了');\n    },\n    handleDialog() {\n      this.$dialog.alert({\n        title: '标题',\n        message: '弹窗内容'\n      });\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n## 工作原理\n\n### Vue 3 项目\n\n插件使用 `@vant/auto-import-resolver` 自动解析器，实现：\n- 自动识别 `van-` 前缀的组件\n- 按需引入对应的组件和样式\n- 支持 Tree Shaking，减少打包体积\n\n### Vue 2 项目\n\n由于 Vue 2 和 Vant 2.x 的特殊性，插件提供了定制的解析器：\n- 自动处理 `van-` 前缀组件的按需引入\n- 特殊处理函数组件（Toast、Dialog 等）\n- 生成运行时文件处理全局引入\n\n## 注意事项\n\n1. **版本匹配**: 确保使用正确的 Vant 版本\n    - Vue 2 项目使用 Vant 2.x\n    - Vue 3 项目使用 Vant 4.x\n\n2. **函数组件**: Vue 2 项目中的函数组件需要通过 `legacyFunction` 配置\n\n3. **样式处理**: 插件会自动处理样式引入，无需手动引入 CSS\n\n4. **按需引入**: 未使用的组件不会被打包，自动实现 Tree Shaking\n\n## 常见问题\n\n### Q: 为什么 Vue 2 项目需要 legacyFunction 配置？\n\nA: Vue 2 的 Vant 2.x 中，Toast、Dialog 等函数组件需要特殊处理才能正确引入样式和支持全局调用。\n\n### Q: 可以同时使用标签和函数调用吗？\n\nA: 可以。配置了 `legacyFunction` 后，既可以使用 `\u003cvan-dialog\u003e` 标签，也可以使用 `this.$dialog()` 函数调用。\n\n### Q: 如何确认插件是否正常工作？\n\nA: 可以查看生成的 `auto-imports.d.ts` 和 `components.d.ts` 文件，确认类型声明是否正确生成。\n\n## 许可证\n\n[MIT](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-vant","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-vant","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-vant/lists"}