cy-element-ui 1.1.4 → 1.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +335 -129
- package/lib/index.js +1 -1
- package/lib/theme-chalk/index.css +1 -1
- package/lib/theme-chalk/treeSelect.css +1 -0
- package/package.json +1 -1
- package/packages/theme-chalk/src/index.scss +1 -1
- package/packages/theme-chalk/src/treeSelect.scss +98 -0
- package/packages/treeSelect/index.js +7 -0
- package/packages/treeSelect/src/main.vue +286 -0
- package/src/index.js +4 -4
- package/lib/theme-chalk/cy-test.css +0 -1
- package/packages/cy-test/index.js +0 -8
- package/packages/cy-test/src/main.vue +0 -26
- package/packages/theme-chalk/src/cy-test.scss +0 -61
package/README.md
CHANGED
|
@@ -1,148 +1,354 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
1
|
+
# cy-element-ui 组件开发指南
|
|
2
|
+
|
|
3
|
+
## 概述
|
|
4
|
+
|
|
5
|
+
本文档详细介绍如何在 cy-element-ui 项目中创建新组件，并将其打包发布到 npm 仓库。
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 一、创建新组件
|
|
10
|
+
|
|
11
|
+
### 1. 自动创建组件模板
|
|
12
|
+
|
|
13
|
+
使用项目提供的脚本自动生成组件基础结构：
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm run new:cy <component-name>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
**示例：**
|
|
20
|
+
```bash
|
|
21
|
+
npm run new:cy test
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
**执行结果：**
|
|
25
|
+
- 创建 `packages/cy-test/` 目录
|
|
26
|
+
- 创建 `packages/cy-test/index.js` - 组件导出文件
|
|
27
|
+
- 创建 `packages/cy-test/src/main.vue` - 组件实现文件
|
|
28
|
+
|
|
29
|
+
### 2. 手动创建组件（可选）
|
|
30
|
+
|
|
31
|
+
如果需要自定义结构，可以手动创建以下文件：
|
|
32
|
+
|
|
33
|
+
**文件结构：**
|
|
34
|
+
```
|
|
35
|
+
packages/
|
|
36
|
+
└── cy-test/
|
|
37
|
+
├── index.js # 组件导出
|
|
38
|
+
└── src/
|
|
39
|
+
└── main.vue # 组件实现
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
**`packages/cy-test/index.js` 内容：**
|
|
43
|
+
```javascript
|
|
44
|
+
import CyTest from './src/main';
|
|
45
|
+
|
|
46
|
+
CyTest.install = function(Vue) {
|
|
47
|
+
Vue.component(CyTest.name, CyTest);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
export default CyTest;
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
**`packages/cy-test/src/main.vue` 内容：**
|
|
54
|
+
```vue
|
|
55
|
+
<template>
|
|
56
|
+
<div class="cy-test">
|
|
57
|
+
<slot></slot>
|
|
58
|
+
</div>
|
|
59
|
+
</template>
|
|
60
|
+
|
|
61
|
+
<script>
|
|
62
|
+
export default {
|
|
63
|
+
name: 'CyTest',
|
|
64
|
+
props: {
|
|
65
|
+
// 定义组件属性
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
</script>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
## 二、添加组件样式
|
|
74
|
+
|
|
75
|
+
### 1. 创建样式文件
|
|
76
|
+
|
|
77
|
+
在主题样式目录中创建组件样式：
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
touch packages/theme-chalk/src/cy-test.scss
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
**`packages/theme-chalk/src/cy-test.scss` 内容示例：**
|
|
84
|
+
```scss
|
|
85
|
+
.cy-test {
|
|
86
|
+
display: inline-block;
|
|
87
|
+
padding: 20px 24px;
|
|
88
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
89
|
+
border-radius: 8px;
|
|
90
|
+
transition: all 0.3s ease;
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### 2. 导入样式到主题入口
|
|
95
|
+
|
|
96
|
+
修改 `packages/theme-chalk/src/index.scss`，添加样式导入：
|
|
97
|
+
|
|
98
|
+
```scss
|
|
99
|
+
// 在文件末尾添加
|
|
100
|
+
@import "./cy-test.scss";
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
---
|
|
104
|
+
|
|
105
|
+
## 三、注册组件到组件库
|
|
106
|
+
|
|
107
|
+
### 1. 更新组件配置文件
|
|
108
|
+
|
|
109
|
+
修改 `components.json`，添加新组件：
|
|
110
|
+
|
|
111
|
+
```json
|
|
112
|
+
{
|
|
113
|
+
"cy-test": "./packages/cy-test/index.js"
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
### 2. 重新生成入口文件
|
|
118
|
+
|
|
119
|
+
运行以下命令自动更新 `src/index.js`：
|
|
120
|
+
|
|
121
|
+
```bash
|
|
122
|
+
npm run build:file
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
**验证：**
|
|
126
|
+
检查 `src/index.js` 是否包含：
|
|
127
|
+
```javascript
|
|
128
|
+
import CyTest from '../packages/cy-test/index.js';
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## 四、添加组件文档（可选）
|
|
134
|
+
|
|
135
|
+
### 1. 创建示例页面
|
|
136
|
+
|
|
137
|
+
在示例目录中创建组件展示页面：
|
|
138
|
+
|
|
139
|
+
```
|
|
140
|
+
examples/
|
|
141
|
+
└── pages/
|
|
142
|
+
├── zh-CN/
|
|
143
|
+
│ └── cy-test.md # 中文文档
|
|
144
|
+
└── en-US/
|
|
145
|
+
└── cy-test.md # 英文文档
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### 2. 配置导航
|
|
149
|
+
|
|
150
|
+
修改 `examples/nav.config.json`，添加导航项：
|
|
151
|
+
|
|
152
|
+
```json
|
|
153
|
+
{
|
|
154
|
+
"chanchan": {
|
|
155
|
+
"name": "产研模块",
|
|
156
|
+
"children": [
|
|
157
|
+
{
|
|
158
|
+
"path": "/cy-test",
|
|
159
|
+
"name": "CyTest 测试组件"
|
|
160
|
+
}
|
|
161
|
+
]
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
---
|
|
167
|
+
|
|
168
|
+
## 五、打包构建
|
|
169
|
+
|
|
170
|
+
### 1. 完整构建
|
|
171
|
+
|
|
172
|
+
运行完整构建命令，生成 `lib/` 目录：
|
|
173
|
+
|
|
174
|
+
```bash
|
|
175
|
+
npm run dist
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
**构建内容：**
|
|
179
|
+
- `lib/index.js` - 主入口文件（包含所有组件）
|
|
180
|
+
- `lib/theme-chalk/` - 主题样式文件
|
|
181
|
+
|
|
182
|
+
### 2. 单独构建主题样式（可选）
|
|
183
|
+
|
|
184
|
+
如果只修改了样式，可以单独构建主题：
|
|
185
|
+
|
|
186
|
+
```bash
|
|
187
|
+
npm run build:theme
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
### 3. 验证打包结果
|
|
191
|
+
|
|
192
|
+
检查 `lib/index.js` 是否包含新组件：
|
|
193
|
+
|
|
194
|
+
```bash
|
|
195
|
+
grep "CyTest" lib/index.js
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
---
|
|
199
|
+
|
|
200
|
+
## 六、发布到 npm
|
|
201
|
+
|
|
202
|
+
### 1. 更新版本号
|
|
203
|
+
|
|
204
|
+
修改 `package.json` 中的版本号：
|
|
205
|
+
|
|
206
|
+
```json
|
|
207
|
+
{
|
|
208
|
+
"version": "1.1.4"
|
|
209
|
+
}
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
**版本号规则：**
|
|
213
|
+
- `MAJOR.MINOR.PATCH`
|
|
214
|
+
- 修复bug：增加 PATCH
|
|
215
|
+
- 新增功能：增加 MINOR
|
|
216
|
+
- 重大变更：增加 MAJOR
|
|
217
|
+
|
|
218
|
+
### 2. 登录 npm
|
|
219
|
+
|
|
220
|
+
确保已登录 npm 账号：
|
|
221
|
+
|
|
222
|
+
```bash
|
|
223
|
+
npm login
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
### 3. 发布到 npm
|
|
227
|
+
|
|
228
|
+
执行发布命令：
|
|
229
|
+
|
|
230
|
+
```bash
|
|
231
|
+
npm publish
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
**注意事项：**
|
|
235
|
+
- 确保版本号未被使用过
|
|
236
|
+
- 确保 `lib/` 目录已正确生成
|
|
237
|
+
- 确保 `package.json` 中的 `main` 字段指向正确
|
|
238
|
+
|
|
239
|
+
---
|
|
240
|
+
|
|
241
|
+
## 七、在项目中使用
|
|
242
|
+
|
|
243
|
+
### 1. 安装依赖
|
|
244
|
+
|
|
245
|
+
```bash
|
|
246
|
+
npm install cy-element-ui --save
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
### 2. 全局引入
|
|
250
|
+
|
|
251
|
+
```javascript
|
|
252
|
+
// main.js
|
|
77
253
|
import Vue from 'vue'
|
|
78
|
-
import
|
|
254
|
+
import CyElementUI from 'cy-element-ui'
|
|
255
|
+
import 'cy-element-ui/lib/theme-chalk/index.css'
|
|
256
|
+
|
|
257
|
+
Vue.use(CyElementUI)
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
### 3. 使用组件
|
|
261
|
+
|
|
262
|
+
```vue
|
|
263
|
+
<template>
|
|
264
|
+
<cy-test title="测试">
|
|
265
|
+
这是测试内容
|
|
266
|
+
</cy-test>
|
|
267
|
+
</template>
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
---
|
|
271
|
+
|
|
272
|
+
## 八、文件变更汇总
|
|
273
|
+
|
|
274
|
+
### 创建的文件
|
|
275
|
+
|
|
276
|
+
| 文件路径 | 说明 |
|
|
277
|
+
|---------|------|
|
|
278
|
+
| `packages/cy-test/index.js` | 组件导出文件 |
|
|
279
|
+
| `packages/cy-test/src/main.vue` | 组件实现文件 |
|
|
280
|
+
| `packages/theme-chalk/src/cy-test.scss` | 组件样式文件 |
|
|
281
|
+
|
|
282
|
+
### 修改的文件
|
|
283
|
+
|
|
284
|
+
| 文件路径 | 修改内容 |
|
|
285
|
+
|---------|---------|
|
|
286
|
+
| `components.json` | 添加组件配置 |
|
|
287
|
+
| `packages/theme-chalk/src/index.scss` | 导入组件样式 |
|
|
288
|
+
| `src/index.js` | 自动生成组件注册 |
|
|
289
|
+
| `package.json` | 更新版本号 |
|
|
79
290
|
|
|
80
|
-
|
|
291
|
+
### 生成的文件（构建后）
|
|
81
292
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
} from 'element-ui'
|
|
293
|
+
| 文件路径 | 说明 |
|
|
294
|
+
|---------|------|
|
|
295
|
+
| `lib/index.js` | 打包后的主入口 |
|
|
296
|
+
| `lib/theme-chalk/cy-test.css` | 组件样式 |
|
|
297
|
+
| `lib/theme-chalk/index.css` | 完整主题样式 |
|
|
88
298
|
|
|
89
|
-
|
|
90
|
-
|
|
299
|
+
---
|
|
300
|
+
|
|
301
|
+
## 九、常见问题
|
|
302
|
+
|
|
303
|
+
### Q1: 组件未被打包进 lib/index.js
|
|
304
|
+
|
|
305
|
+
**原因：** `components.json` 未添加组件配置
|
|
306
|
+
|
|
307
|
+
**解决：**
|
|
308
|
+
```bash
|
|
309
|
+
npm run build:file
|
|
91
310
|
```
|
|
92
|
-
For more information, please refer to [Quick Start](http://element.eleme.io/#/en-US/component/quickstart) in our documentation.
|
|
93
311
|
|
|
94
|
-
|
|
95
|
-
Modern browsers and Internet Explorer 10+.
|
|
312
|
+
### Q2: 样式未生效
|
|
96
313
|
|
|
97
|
-
|
|
98
|
-
Skip this part if you just want to use Element.
|
|
314
|
+
**原因：** 样式未导入到主题入口
|
|
99
315
|
|
|
100
|
-
|
|
316
|
+
**解决：**
|
|
317
|
+
检查 `packages/theme-chalk/src/index.scss` 是否包含：
|
|
318
|
+
```scss
|
|
319
|
+
@import "./cy-test.scss";
|
|
320
|
+
```
|
|
321
|
+
|
|
322
|
+
### Q3: 发布时版本冲突
|
|
101
323
|
|
|
102
|
-
|
|
103
|
-
Detailed changes for each release are documented in the [release notes](https://github.com/ElemeFE/element/releases).
|
|
324
|
+
**原因：** 版本号已存在
|
|
104
325
|
|
|
105
|
-
|
|
106
|
-
|
|
326
|
+
**解决：**
|
|
327
|
+
更新 `package.json` 中的版本号
|
|
107
328
|
|
|
108
|
-
|
|
109
|
-
Please make sure to read the contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md) | [Español](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.es.md) | [Français](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.fr-FR.md)) before making a pull request.
|
|
329
|
+
### Q4: npm 发布失败
|
|
110
330
|
|
|
111
|
-
|
|
112
|
-
English documentation is brought to you by SwiftGG Translation Team:
|
|
113
|
-
- [raychenfj](https://github.com/raychenfj)
|
|
114
|
-
- [kevin](http://thekevin.cn/)
|
|
115
|
-
- [曾小涛](https://github.com/zengxiaotao)
|
|
116
|
-
- [湾仔王二](https://github.com/wanzaiwanger)
|
|
117
|
-
- [BlooDLine](http://www.ibloodline.com/)
|
|
118
|
-
- [陈铭嘉](https://chenmingjia.github.io/)
|
|
119
|
-
- [千叶知风](http://mpc6.com/)
|
|
120
|
-
- [梁杰](http://numbbbbb.com)
|
|
121
|
-
- [Changing](https://github.com/sunzhuo11)
|
|
122
|
-
- [mmoaay](https://github.com/mmoaay)
|
|
331
|
+
**原因：** 未登录或权限不足
|
|
123
332
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
- [fedegar33](https://github.com/fedegar33)
|
|
129
|
-
- [Gonzalo2310](https://github.com/Gonzalo2310)
|
|
130
|
-
- [lesterbx](https://github.com/lesterbx)
|
|
131
|
-
- [ProgramerGuy](https://github.com/ProgramerGuy)
|
|
132
|
-
- [SantiagoGdaR](https://github.com/SantiagoGdaR)
|
|
133
|
-
- [sigfriedCub1990](https://github.com/sigfriedCub1990)
|
|
134
|
-
- [thechosenjuan](https://github.com/thechosenjuan)
|
|
333
|
+
**解决：**
|
|
334
|
+
```bash
|
|
335
|
+
npm login
|
|
336
|
+
```
|
|
135
337
|
|
|
136
|
-
|
|
137
|
-
- [smalesys](https://github.com/smalesys)
|
|
138
|
-
- [blombard](https://github.com/blombard)
|
|
338
|
+
---
|
|
139
339
|
|
|
140
|
-
##
|
|
340
|
+
## 十、开发流程建议
|
|
141
341
|
|
|
142
|
-
|
|
342
|
+
1. **创建组件** → `npm run new:cy <name>`
|
|
343
|
+
2. **编写代码** → 修改 `packages/<name>/src/main.vue`
|
|
344
|
+
3. **添加样式** → 创建 `packages/theme-chalk/src/<name>.scss`
|
|
345
|
+
4. **注册组件** → `npm run build:file`
|
|
346
|
+
5. **测试预览** → `npm run dev`
|
|
347
|
+
6. **打包构建** → `npm run dist`
|
|
348
|
+
7. **发布 npm** → `npm version patch && npm publish`
|
|
143
349
|
|
|
144
|
-
|
|
350
|
+
---
|
|
145
351
|
|
|
352
|
+
## License
|
|
146
353
|
|
|
147
|
-
|
|
148
|
-
[MIT](LICENSE)
|
|
354
|
+
MIT
|