{"id":31970686,"url":"https://github.com/winjs-dev/winjs-plugin-element-plus","last_synced_at":"2025-10-14T19:18:19.010Z","repository":{"id":310622344,"uuid":"1038306335","full_name":"winjs-dev/winjs-plugin-element-plus","owner":"winjs-dev","description":"A Winjs plugin for element-plus.","archived":false,"fork":false,"pushed_at":"2025-09-15T02:57:02.000Z","size":409,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-15T04:34:11.835Z","etag":null,"topics":["element-plus","plugin","ui-components","vue","winjs"],"latest_commit_sha":null,"homepage":"https://winjs-dev.github.io/winjs-docs/plugins/uiframework#elementplus","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-15T00:53:14.000Z","updated_at":"2025-09-15T02:57:04.000Z","dependencies_parsed_at":"2025-08-19T10:00:00.197Z","dependency_job_id":null,"html_url":"https://github.com/winjs-dev/winjs-plugin-element-plus","commit_stats":null,"previous_names":["winjs-dev/winjs-plugin-element-plus"],"tags_count":1,"template":false,"template_full_name":"winjs-dev/winjs-plugin-template","purl":"pkg:github/winjs-dev/winjs-plugin-element-plus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-element-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-element-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-element-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-element-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/winjs-dev","download_url":"https://codeload.github.com/winjs-dev/winjs-plugin-element-plus/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-element-plus/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":["element-plus","plugin","ui-components","vue","winjs"],"created_at":"2025-10-14T19:18:11.096Z","updated_at":"2025-10-14T19:18:19.005Z","avatar_url":"https://github.com/winjs-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# winjs-plugin-element-plus\n\n适配 WinJS 的 Element Plus 插件。\n\n\u003cp\u003e\n  \u003ca href=\"https://npmjs.com/package/@winner-fed/plugin-element-plus\"\u003e\n   \u003cimg src=\"https://img.shields.io/npm/v/@winner-fed/plugin-element-plus?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-element-plus?minimal=true\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@winner-fed/plugin-element-plus.svg?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"downloads\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n## 功能介绍\n\n`@winner-fed/plugin-element-plus` 是一个专为 WinJS 框架设计的 Element Plus 集成插件，提供了以下核心功能：\n\n- 🚀 **自动导入**：基于 `unplugin-vue-components` 实现 Element Plus 组件的按需自动导入\n- 📦 **智能依赖检测**：自动检测项目中的 Element Plus 依赖并获取版本信息\n- ⚙️ **配置化管理**：支持通过 WinJS 配置文件进行插件配置\n- 🎯 **开箱即用**：无需手动导入组件，直接在模板中使用即可\n\n## 安装\n\n```bash\n# 使用 npm\nnpm install @winner-fed/plugin-element-plus element-plus\n\n# 使用 yarn\nyarn add @winner-fed/plugin-element-plus element-plus\n\n# 使用 pnpm\npnpm add @winner-fed/plugin-element-plus element-plus\n```\n\n## 基础配置\n\n在 `.winrc.ts` 配置文件中启用插件：\n\n```typescript\nimport { defineConfig } from 'win';\n\nexport default defineConfig({\n  plugins: ['@winner-fed/plugin-element-plus'],\n  elementPlus: {\n    // 插件配置选项（可选）\n  }\n});\n```\n\n## 使用示例\n\n### 基础使用\n\n配置完成后，您可以直接在 Vue 组件中使用 Element Plus 组件，无需手动导入：\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cel-button type=\"primary\"\u003e主要按钮\u003c/el-button\u003e\n    \u003cel-input v-model=\"inputValue\" placeholder=\"请输入内容\"\u003e\u003c/el-input\u003e\n    \u003cel-message-box\u003e消息提示\u003c/el-message-box\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue';\n\nconst inputValue = ref('');\n\u003c/script\u003e\n```\n\n### 样式导入\n\n对于某些特殊组件（如 MessageBox），您可能需要手动导入样式：\n\n```vue\n\u003cscript setup\u003e\n// 手动导入样式\nimport 'element-plus/es/components/message-box/style/css'\nimport { ElMessageBox } from 'element-plus';\n\nElMessageBox.confirm('确定要关闭吗？')\n  .then(() =\u003e {\n    // 确认操作\n  })\n  .catch(() =\u003e {\n    // 取消操作\n  });\n\u003c/script\u003e\n```\n\n### 完整示例\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"demo-container\"\u003e\n    \u003ch2\u003eElement Plus 组件示例\u003c/h2\u003e\n  \n    \u003c!-- 按钮组件 --\u003e\n    \u003cel-row :gutter=\"20\"\u003e\n      \u003cel-col :span=\"6\"\u003e\n        \u003cel-button\u003e默认按钮\u003c/el-button\u003e\n      \u003c/el-col\u003e\n      \u003cel-col :span=\"6\"\u003e\n        \u003cel-button type=\"primary\"\u003e主要按钮\u003c/el-button\u003e\n      \u003c/el-col\u003e\n      \u003cel-col :span=\"6\"\u003e\n        \u003cel-button type=\"success\"\u003e成功按钮\u003c/el-button\u003e\n      \u003c/el-col\u003e\n      \u003cel-col :span=\"6\"\u003e\n        \u003cel-button type=\"warning\"\u003e警告按钮\u003c/el-button\u003e\n      \u003c/el-col\u003e\n    \u003c/el-row\u003e\n\n    \u003c!-- 表单组件 --\u003e\n    \u003cel-form :model=\"form\" label-width=\"120px\"\u003e\n      \u003cel-form-item label=\"用户名\"\u003e\n        \u003cel-input v-model=\"form.username\"\u003e\u003c/el-input\u003e\n      \u003c/el-form-item\u003e\n      \u003cel-form-item label=\"邮箱\"\u003e\n        \u003cel-input v-model=\"form.email\"\u003e\u003c/el-input\u003e\n      \u003c/el-form-item\u003e\n      \u003cel-form-item\u003e\n        \u003cel-button type=\"primary\" @click=\"submitForm\"\u003e提交\u003c/el-button\u003e\n      \u003c/el-form-item\u003e\n    \u003c/el-form\u003e\n\n    \u003c!-- 表格组件 --\u003e\n    \u003cel-table :data=\"tableData\" style=\"width: 100%\"\u003e\n      \u003cel-table-column prop=\"name\" label=\"姓名\"\u003e\u003c/el-table-column\u003e\n      \u003cel-table-column prop=\"email\" label=\"邮箱\"\u003e\u003c/el-table-column\u003e\n      \u003cel-table-column prop=\"role\" label=\"角色\"\u003e\u003c/el-table-column\u003e\n    \u003c/el-table\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue';\n\nconst form = ref({\n  username: '',\n  email: ''\n});\n\nconst tableData = ref([\n  { name: '张三', email: 'zhangsan@example.com', role: '管理员' },\n  { name: '李四', email: 'lisi@example.com', role: '用户' },\n  { name: '王五', email: 'wangwu@example.com', role: '用户' }\n]);\n\nconst submitForm = () =\u003e {\n  console.log('提交表单:', form.value);\n};\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\n.demo-container {\n  padding: 20px;\n}\n\n.el-row {\n  margin-bottom: 20px;\n}\n\n.el-form {\n  margin: 20px 0;\n}\n\u003c/style\u003e\n```\n\n## 配置选项\n\n插件支持以下配置选项：\n\n```typescript\ninterface ElementPlusConfig {\n  // 目前插件使用默认配置，未来可能会扩展更多选项\n}\n```\n\n## 依赖要求\n\n- **Element Plus**: `^2.3.8`\n- **Vue**: `^3.0.0`\n- **WinJS**: 最新版本\n\n## 工作原理\n\n1. **依赖检测**：插件启动时会自动检测项目中的 Element Plus 依赖\n2. **版本获取**：读取 Element Plus 的版本信息并存储到应用数据中\n3. **自动导入配置**：使用 `ElementPlusResolver` 配置自动导入规则\n4. **按需加载**：只有在模板中使用的组件才会被打包到最终产物中\n\n## 注意事项\n\n1. 确保项目中已正确安装 Element Plus 依赖\n2. 某些特殊组件（如 MessageBox）的样式可能需要手动导入\n3. 插件会自动处理组件的按需导入，无需手动配置 babel 插件\n4. 支持 TypeScript，提供完整的类型支持\n\n## 故障排除\n\n### 常见问题\n\n**Q: 提示找不到 Element Plus 包？**\nA: 确保已正确安装 Element Plus：`npm install element-plus`\n\n**Q: 组件样式没有生效？**\nA: 某些组件可能需要手动导入样式，参考上面的样式导入示例\n\n**Q: TypeScript 类型报错？**\nA: 确保项目中安装了 `@types/element-plus` 或 Element Plus 内置的类型声明\n\n## 许可证\n\n[MIT](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-element-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-element-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-element-plus/lists"}