Skip to content

Commit 0a15fa2

Browse files
committed
chore: 更新插件名称和版本,添加 Element UI 依赖,修改 README 文档以反映新功能
1 parent cb24fae commit 0a15fa2

File tree

8 files changed

+9800
-47
lines changed

8 files changed

+9800
-47
lines changed

.github/workflows/release.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,4 +114,4 @@ jobs:
114114
echo "🎉 发布成功!"
115115
echo "📦 版本: ${{ steps.get_version.outputs.version }}"
116116
echo "🏷️ 标签: ${{ steps.get_version.outputs.tag_name }}"
117-
echo "📝 npm: https://www.npmjs.com/package/winjs-plugin-template"
117+
echo "📝 npm: https://www.npmjs.com/package/@winner-fed/plugin-element-ui"

README.md

Lines changed: 130 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,156 @@
1-
# winjs-plugin-example
1+
# winjs-plugin-element-ui
22

3-
Example plugin for WinJS.
3+
适配 WinJS 的 Element UI 插件,为 Vue 2 项目提供 Element UI 组件库的自动导入和配置支持。
44

55
<p>
6-
<a href="https://npmjs.com/package/winjs-plugin-example">
7-
<img src="https://img.shields.io/npm/v/winjs-plugin-example?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
6+
<a href="https://npmjs.com/package/@winner-fed/plugin-element-ui">
7+
<img src="https://img.shields.io/npm/v/@winner-fed/plugin-element-ui?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
88
</a>
99
<img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
10-
<a href="https://npmcharts.com/compare/winjs-plugin-example?minimal=true"><img src="https://img.shields.io/npm/dm/winjs-plugin-example.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
10+
<a href="https://npmcharts.com/compare/@winner-fed/plugin-element-ui?minimal=true"><img src="https://img.shields.io/npm/dm/@winner-fed/plugin-element-ui.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
1111
</p>
1212

13-
## Usage
13+
## 功能特性
1414

15-
Install:
15+
- 🚀 **自动导入**: 支持 Element UI 组件的按需自动导入
16+
- 📦 **零配置**: 开箱即用,无需手动配置组件导入
17+
- 🔧 **集成性**: 与 WinJS 框架深度集成
18+
- 🎯 **Vue 2 兼容**: 专为 Vue 2 项目设计
19+
20+
## 安装
1621

1722
```bash
18-
npm add winjs-plugin-example -D
23+
npm install @winner-fed/plugin-element-ui element-ui
24+
# 或者
25+
yarn add @winner-fed/plugin-element-ui element-ui
26+
# 或者
27+
pnpm add @winner-fed/plugin-element-ui element-ui
28+
```
29+
30+
## 快速开始
31+
32+
### 1. 在 `.winrc.ts` 中配置插件
33+
34+
```typescript
35+
import { defineConfig } from 'win';
36+
37+
export default defineConfig({
38+
plugins: [
39+
require.resolve('@winner-fed/plugin-element-ui')
40+
],
41+
elementUI: {
42+
// 插件配置选项(可选)
43+
}
44+
});
1945
```
2046

21-
Add plugin to your `.winrc.ts`:
47+
### 2. 在 Vue 组件中使用
48+
49+
插件会自动处理 Element UI 组件的导入,你可以直接在模板中使用:
2250

23-
```ts
24-
// .winrc.ts
51+
```vue
52+
<template>
53+
<div>
54+
<el-button type="primary">主要按钮</el-button>
55+
<el-button type="success">成功按钮</el-button>
56+
<el-input v-model="input" placeholder="请输入内容"></el-input>
57+
<el-date-picker
58+
v-model="date"
59+
type="date"
60+
placeholder="选择日期">
61+
</el-date-picker>
62+
</div>
63+
</template>
64+
65+
<script>
2566
export default {
26-
plugins: ['winjs-plugin-example'],
27-
// 开启配置
28-
example: {}
29-
};
67+
data() {
68+
return {
69+
input: '',
70+
date: ''
71+
}
72+
}
73+
}
74+
</script>
75+
```
76+
77+
## 配置选项
78+
79+
### elementUI
80+
81+
类型:`object`
82+
83+
Element UI 相关配置,目前支持的配置项:
84+
85+
```typescript
86+
export default defineConfig({
87+
elementUI: {
88+
// 未来可能会添加更多配置选项
89+
}
90+
});
3091
```
3192

32-
## Options
93+
## 工作原理
94+
95+
本插件通过以下方式实现 Element UI 的集成:
96+
97+
1. **自动检测依赖**: 插件会自动检测项目中是否安装了 `element-ui`
98+
2. **配置解析器**: 使用 `unplugin-vue-components``ElementUiResolver` 来处理组件的自动导入
99+
3. **版本信息**: 自动读取 Element UI 的版本信息并注入到应用数据中
100+
4. **按需导入**: 只导入实际使用的组件,减少打包体积
101+
102+
## 依赖要求
33103

34-
### foo
104+
- Vue 2.x
105+
- Element UI 2.15.13+
106+
- WinJS 框架
35107

36-
Some description.
108+
### 示例代码
37109

38-
- Type: `string`
39-
- Default: `undefined`
40-
- Example:
110+
```vue
111+
<!-- src/pages/index.vue -->
112+
<template>
113+
<div>
114+
<h2>Welcome to WinJS + Element UI!</h2>
115+
<el-button type="primary">我是 Element UI 的按钮</el-button>
116+
<el-input v-model="message" placeholder="输入一些内容"></el-input>
117+
</div>
118+
</template>
41119
42-
```js
120+
<script>
43121
export default {
44-
plugins: ['winjs-plugin-example'],
45-
// 开启配置
46-
example: {
47-
foo: 'bar'
122+
data() {
123+
return {
124+
message: ''
125+
}
48126
}
49-
};
127+
}
128+
</script>
129+
```
130+
131+
## 常见问题
132+
133+
### Q: 插件无法找到 Element UI 包?
134+
135+
A: 确保已经安装了 `element-ui` 依赖:
136+
137+
```bash
138+
npm install element-ui
139+
```
140+
141+
### Q: 组件样式没有生效?
142+
143+
A: Element UI 的样式需要单独引入,可以在入口文件中添加:
144+
145+
```javascript
146+
// 在 main.js 或入口文件中
147+
import 'element-ui/lib/theme-chalk/index.css'
50148
```
51149

52-
## License
150+
### Q: 如何使用 Element UI 的按需导入?
151+
152+
A: 插件已经自动配置了按需导入,你只需要在模板中使用组件即可,无需手动导入。
153+
154+
## 许可证
53155

54156
[MIT](./LICENSE).

package.json

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "winjs-plugin-template",
2+
"name": "@winner-fed/plugin-element-ui",
33
"keywords": [
44
"winjs",
55
"plugin",
@@ -11,10 +11,10 @@
1111
"typescript",
1212
"biome"
1313
],
14-
"version": "0.0.0",
14+
"version": "1.0.0",
1515
"repository": {
1616
"type": "git",
17-
"url": "git+https://github.com/winjs-dev/winjs-plugin-template.git"
17+
"url": "git+https://github.com/winjs-dev/winjs-plugin-element-ui.git"
1818
},
1919
"license": "MIT",
2020
"type": "module",
@@ -52,13 +52,16 @@
5252
"@winner-fed/winjs": "*",
5353
"playwright": "^1.53.2",
5454
"simple-git-hooks": "^2.13.0",
55+
"unplugin-vue-components": "28.4.1",
5556
"typescript": "^5.8.3"
5657
},
5758
"peerDevDependencies": {
58-
"@winner-fed/winjs": "*"
59+
"@winner-fed/winjs": "*",
60+
"unplugin-vue-components": "28.4.1"
5961
},
6062
"peerDependencies": {
61-
"@winner-fed/utils": "*"
63+
"@winner-fed/utils": "*",
64+
"element-ui": "^2.15.13"
6265
},
6366
"peerDependenciesMeta": {
6467
"@rsbuild/core": {

playground/.winrc.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { defineConfig } from 'win';
22

33
export default defineConfig({
4+
presets: [require.resolve('@winner-fed/preset-vue2')],
45
plugins: ['../src'],
5-
example: {
6-
foo: 'bar',
7-
},
6+
elementUI: {},
87
});

playground/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,12 @@
1111
"preview": "win preview"
1212
},
1313
"dependencies": {
14-
"@winner-fed/winjs": "*"
14+
"@winner-fed/winjs": "*",
15+
"element-ui": "^2.15.14",
16+
"vue": "^2.7.14"
1517
},
1618
"devDependencies": {
19+
"@winner-fed/preset-vue2": "*",
1720
"typescript": "^5.0.3"
1821
}
1922
}

playground/src/pages/index.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<p>
55
<img src="@/assets/img/logo.png" width="200" height="200" alt="logo" />
66
</p>
7+
<p><el-button type="primary">我是 element-ui 的 Button</el-button></p>
78
<p>To get started, edit <code>pages/index.vue</code> and save to reload.</p>
89
</div>
910
</template>

0 commit comments

Comments
 (0)