https://github.com/winjs-dev/winjs-plugin-element-plus
A Winjs plugin for element-plus.
https://github.com/winjs-dev/winjs-plugin-element-plus
element-plus plugin ui-components vue winjs
Last synced: 8 months ago
JSON representation
A Winjs plugin for element-plus.
- Host: GitHub
- URL: https://github.com/winjs-dev/winjs-plugin-element-plus
- Owner: winjs-dev
- License: mit
- Created: 2025-08-15T00:53:14.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-15T02:57:02.000Z (9 months ago)
- Last Synced: 2025-09-15T04:34:11.835Z (9 months ago)
- Topics: element-plus, plugin, ui-components, vue, winjs
- Language: TypeScript
- Homepage: https://winjs-dev.github.io/winjs-docs/plugins/uiframework#elementplus
- Size: 399 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# winjs-plugin-element-plus
适配 WinJS 的 Element Plus 插件。
## 功能介绍
`@winner-fed/plugin-element-plus` 是一个专为 WinJS 框架设计的 Element Plus 集成插件，提供了以下核心功能：
- 🚀 **自动导入**：基于 `unplugin-vue-components` 实现 Element Plus 组件的按需自动导入
- 📦 **智能依赖检测**：自动检测项目中的 Element Plus 依赖并获取版本信息
- ⚙️ **配置化管理**：支持通过 WinJS 配置文件进行插件配置
- 🎯 **开箱即用**：无需手动导入组件，直接在模板中使用即可
## 安装
```bash
# 使用 npm
npm install @winner-fed/plugin-element-plus element-plus
# 使用 yarn
yarn add @winner-fed/plugin-element-plus element-plus
# 使用 pnpm
pnpm add @winner-fed/plugin-element-plus element-plus
```
## 基础配置
在 `.winrc.ts` 配置文件中启用插件：
```typescript
import { defineConfig } from 'win';
export default defineConfig({
plugins: ['@winner-fed/plugin-element-plus'],
elementPlus: {
// 插件配置选项（可选）
}
});
```
## 使用示例
### 基础使用
配置完成后，您可以直接在 Vue 组件中使用 Element Plus 组件，无需手动导入：
```vue
主要按钮
消息提示
import { ref } from 'vue';
const inputValue = ref('');
```
### 样式导入
对于某些特殊组件（如 MessageBox），您可能需要手动导入样式：
```vue
// 手动导入样式
import 'element-plus/es/components/message-box/style/css'
import { ElMessageBox } from 'element-plus';
ElMessageBox.confirm('确定要关闭吗？')
.then(() => {
// 确认操作
})
.catch(() => {
// 取消操作
});
```
### 完整示例
```vue
Element Plus 组件示例
默认按钮
主要按钮
成功按钮
警告按钮
提交
import { ref } from 'vue';
const form = ref({
username: '',
email: ''
});
const tableData = ref([
{ name: '张三', email: 'zhangsan@example.com', role: '管理员' },
{ name: '李四', email: 'lisi@example.com', role: '用户' },
{ name: '王五', email: 'wangwu@example.com', role: '用户' }
]);
const submitForm = () => {
console.log('提交表单:', form.value);
};
.demo-container {
padding: 20px;
}
.el-row {
margin-bottom: 20px;
}
.el-form {
margin: 20px 0;
}
```
## 配置选项
插件支持以下配置选项：
```typescript
interface ElementPlusConfig {
// 目前插件使用默认配置，未来可能会扩展更多选项
}
```
## 依赖要求
- **Element Plus**: `^2.3.8`
- **Vue**: `^3.0.0`
- **WinJS**: 最新版本
## 工作原理
1. **依赖检测**：插件启动时会自动检测项目中的 Element Plus 依赖
2. **版本获取**：读取 Element Plus 的版本信息并存储到应用数据中
3. **自动导入配置**：使用 `ElementPlusResolver` 配置自动导入规则
4. **按需加载**：只有在模板中使用的组件才会被打包到最终产物中
## 注意事项
1. 确保项目中已正确安装 Element Plus 依赖
2. 某些特殊组件（如 MessageBox）的样式可能需要手动导入
3. 插件会自动处理组件的按需导入，无需手动配置 babel 插件
4. 支持 TypeScript，提供完整的类型支持
## 故障排除
### 常见问题
**Q: 提示找不到 Element Plus 包？**
A: 确保已正确安装 Element Plus：`npm install element-plus`
**Q: 组件样式没有生效？**
A: 某些组件可能需要手动导入样式，参考上面的样式导入示例
**Q: TypeScript 类型报错？**
A: 确保项目中安装了 `@types/element-plus` 或 Element Plus 内置的类型声明
## 许可证
[MIT](./LICENSE).