cy-element-ui 1.0.2 → 1.0.4
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 +151 -56
- package/package.json +2 -2
- package/packages/theme-chalk/src/index.scss +3 -0
- package/src/index.js +1 -1
package/README.md
CHANGED
|
@@ -1,67 +1,162 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
1
|
+
<div align="center">
|
|
2
|
+
<h1>Cy-Element-UI 组件库</h1>
|
|
3
|
+
</div>
|
|
4
|
+
|
|
5
|
+
<div align="center">
|
|
6
|
+
<a href="https://192.168.41.135/dev/chanyan-ui" target="_blank">
|
|
7
|
+
<img src="https://img.shields.io/badge/Git-仓库-blue?logo=git" alt="Git 仓库">
|
|
8
|
+
</a>
|
|
9
|
+
<img src="https://img.shields.io/badge/ElementUI-2.15.14-blue" alt="ElementUI Version">
|
|
10
|
+
<img src="https://img.shields.io/badge/Vue-2.x-brightgreen" alt="Vue Version">
|
|
11
|
+
<img src="https://img.shields.io/badge/License-MIT-green" alt="License">
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
## 目录
|
|
15
|
+
- [安装](#-安装)
|
|
16
|
+
- [引入方式](#-引入方式)
|
|
17
|
+
- [组件使用](#-组件使用)
|
|
18
|
+
- [开发指南](#-开发指南)
|
|
19
|
+
- [环境准备](#-环境准备)
|
|
20
|
+
- [增加新的element-ui组件](#-增加新的element-ui组件)
|
|
21
|
+
- [增加新的cy组件](#-增加新的cy组件)
|
|
22
|
+
- [生成文件说明](#-生成文件说明)
|
|
23
|
+
- [自动修改的文件](#-自动修改的文件)
|
|
24
|
+
- [部分文件说明](#-部分文件说明)
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## 📥 安装
|
|
29
|
+
```bash
|
|
30
|
+
npm i cy-element-ui
|
|
21
31
|
```
|
|
22
32
|
|
|
23
|
-
##
|
|
24
|
-
```
|
|
25
|
-
import Vue from 'vue'
|
|
26
|
-
import
|
|
27
|
-
|
|
28
|
-
|
|
33
|
+
## 🎯 引入方式
|
|
34
|
+
```javascript
|
|
35
|
+
import Vue from 'vue';
|
|
36
|
+
import ElementUI from 'cy-element-ui';
|
|
37
|
+
import 'cy-element-ui/lib/theme-chalk/index.css';
|
|
38
|
+
import App from './App.vue';
|
|
29
39
|
|
|
30
|
-
|
|
31
|
-
import {
|
|
32
|
-
Select,
|
|
33
|
-
Button
|
|
34
|
-
// ...
|
|
35
|
-
} from 'element-ui'
|
|
40
|
+
Vue.use(ElementUI);
|
|
36
41
|
|
|
37
|
-
Vue
|
|
38
|
-
|
|
42
|
+
new Vue({
|
|
43
|
+
el: '#app',
|
|
44
|
+
render: h => h(App)
|
|
45
|
+
});
|
|
39
46
|
```
|
|
40
|
-
For more information, please refer to [Quick Start](http://element.eleme.io/#/en-US/component/quickstart) in our documentation.
|
|
41
|
-
|
|
42
|
-
## Browser Support
|
|
43
|
-
Modern browsers and Internet Explorer 10+.
|
|
44
|
-
|
|
45
|
-
## Development
|
|
46
|
-
Skip this part if you just want to use Element.
|
|
47
|
-
|
|
48
|
-
For those who are interested in contributing to Element, please refer to our 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)) to see how to run this project.
|
|
49
|
-
|
|
50
|
-
## Changelog
|
|
51
|
-
Detailed changes for each release are documented in the [release notes](https://github.com/ElemeFE/element/releases).
|
|
52
47
|
|
|
53
|
-
##
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
48
|
+
## 🧩 组件使用
|
|
49
|
+
以新组件`CyTreeselect`为例，其他组件使用还是和`element-ui`用法相同
|
|
50
|
+
```vue
|
|
51
|
+
<CyTreeselect
|
|
52
|
+
v-model="dept_id"
|
|
53
|
+
:options="deptOptions"
|
|
54
|
+
placeholder="请选择部门"
|
|
55
|
+
clearable
|
|
56
|
+
:multiple="true"
|
|
57
|
+
@change="treeselectChange"
|
|
58
|
+
/>
|
|
59
|
+
```
|
|
58
60
|
|
|
59
|
-
##
|
|
61
|
+
## 👨💻 开发指南
|
|
62
|
+
|
|
63
|
+
### 🖥️ 环境准备
|
|
64
|
+
#### 📌 Node版本： 14.21.3
|
|
65
|
+
|
|
66
|
+
#### 🔧 Make 工具安装 (Windows 用户)
|
|
67
|
+
```bash
|
|
68
|
+
# 1. 下载安装 MSYS2 (https://www.msys2.org/)
|
|
69
|
+
# 2. 打开 MSYS2 终端执行系统更新：
|
|
70
|
+
pacman -Syu
|
|
71
|
+
# 3. 安装 make 工具：
|
|
72
|
+
pacman -S make
|
|
73
|
+
# 4. 配置环境变量：
|
|
74
|
+
# 将 MSYS2 的 bin 目录(如：F:\msys2\usr\bin)添加到系统 PATH
|
|
75
|
+
# 5. 验证安装：
|
|
76
|
+
make --version
|
|
77
|
+
|
|
78
|
+
#### 安装
|
|
79
|
+
npm install
|
|
80
|
+
```
|
|
81
|
+
> ⚠️ **注意**：如果安装过程中提示需要关闭终端，请重新打开终端后再次执行相同命令
|
|
60
82
|
|
|
61
|
-
Scan the QR code using [Dingtalk App](https://www.dingtalk.com/) to join in discussion group :
|
|
62
83
|
|
|
63
|
-
|
|
84
|
+
### 🛠️ 增加新的element-ui组件
|
|
85
|
+
- 🔗 可以参考 [此文档](https://mp.weixin.qq.com/s?__biz=MzA3NTk4NjQ1OQ==&mid=2247484697&idx=1&sn=01de22e7fa48fbee510305177beeccb1&chksm=9f69666da81eef7b96c9fe2b2b5fd02bac222dc1e49ebafff9b23e1bb312e3abec6cbf32edb8)
|
|
86
|
+
- 👀 这个看看就行了，当前基本上用不上，因为 `ElementUI 2.0` 目前已经不维护了
|
|
87
|
+
- ⚠️ 而且这个命令大概率也不能用了，我改了部分文件，运行这个命令会报错，有需要的话可以试着去修改 `build/bin/new.js`
|
|
64
88
|
|
|
89
|
+
### ✨ 增加新的cy组件
|
|
90
|
+
- 💻 在终端 `cmd` 中执行以下命令
|
|
91
|
+
```shell
|
|
92
|
+
make new-cy-ui <component-name> [组件中文名]
|
|
93
|
+
比如：
|
|
94
|
+
make new-cy-ui treeselect 下拉树
|
|
95
|
+
```
|
|
65
96
|
|
|
66
|
-
|
|
67
|
-
|
|
97
|
+
### 📂 生成文件说明
|
|
98
|
+
|
|
99
|
+
| 文件类型 | 路径 | 注意事项 |
|
|
100
|
+
|------|-----------------------------------------|----------------|
|
|
101
|
+
| 组件开发 | `packages/treeselect/src/main.vue` | ⚠️ 禁止写 CSS 样式 |
|
|
102
|
+
| 组件文档 | `examples/docs/cy/treeselect.md` | 编写示例用法和 API 说明 |
|
|
103
|
+
| 组件样式 | `packages/theme-cy/src/treeselect.scss` | 组件专用样式 |
|
|
104
|
+
| 测试文件 | `test/unit/specs/treeselect.spec.js` | 单元测试 |
|
|
105
|
+
| 类型声明 | `types/treeselect.d.ts` | TS 类型定义 |
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
### 📝 自动修改的文件
|
|
109
|
+
|
|
110
|
+
| 文件路径 | 修改内容 |
|
|
111
|
+
|------------------------------------|--------|
|
|
112
|
+
| `components.json` | 添加组件入口 |
|
|
113
|
+
| `packages/theme-cy/src/index.scss` | 引入样式文件 |
|
|
114
|
+
| `types/element-ui.d.ts` | 添加类型声明 |
|
|
115
|
+
| `examples/nav.config.cy.json` | 更新导航菜单 |
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
## 📌 部分文件说明
|
|
119
|
+
|
|
120
|
+
### 🛠️ 核心开发文件
|
|
121
|
+
| 文件/目录 | 说明 |
|
|
122
|
+
|-------------------|-----------------------|
|
|
123
|
+
| `packages/` | 组件源码目录，所有要发布的组件都在这里开发 |
|
|
124
|
+
| `components.json` | 组件清单，包含所有要发布的组件列表 |
|
|
125
|
+
|
|
126
|
+
### 📚 文档系统
|
|
127
|
+
| 文件/目录 | 说明 |
|
|
128
|
+
|----------------------------------|----------------------------|
|
|
129
|
+
| `examples/docs/element` | ElementUI官方组件文档 |
|
|
130
|
+
| `examples/docs/cy` | 自定义组件文档（格式参考element目录） |
|
|
131
|
+
| `examples/components/demo-block` | MD文档渲染组件，将`.md`转为页面 |
|
|
132
|
+
| `examples/demo-styles/` | 自定义样式目录（需在`index.scss`中引入） |
|
|
133
|
+
|
|
134
|
+
### 🗂️ 路由配置
|
|
135
|
+
| 文件 | 说明 |
|
|
136
|
+
|--------------------------|-----------------------|
|
|
137
|
+
| `examples/router_config` | 路由生成器（根据nav.config生成） |
|
|
138
|
+
| `examples/nav.config.cy` | 控制「组件」菜单的左侧子路由 |
|
|
139
|
+
| `examples/route.config` | 完整路由配置（自动生成） |
|
|
140
|
+
|
|
141
|
+
### 🌐 网站结构
|
|
142
|
+
| 文件/目录 | 说明 |
|
|
143
|
+
|-------------------------------|-------------|
|
|
144
|
+
| `examples/pages/` | 菜单路由对应的页面结构 |
|
|
145
|
+
| `examples/pages/cy/changelog` | 版本更新日志页面 |
|
|
146
|
+
|
|
147
|
+
### ⚙️ 开发工具
|
|
148
|
+
| 文件 | 说明 |
|
|
149
|
+
|--------------------------|--------------------|
|
|
150
|
+
| `build/bin/new-cy-ui.js` | 组件生成器（自动创建/修改相关文件） |
|
|
151
|
+
|
|
152
|
+
### 📦 发布配置
|
|
153
|
+
| 文件 | 说明 |
|
|
154
|
+
|----------------------|------------------|
|
|
155
|
+
| `packages/theme-cy/` | 组件主题样式目录 |
|
|
156
|
+
| `types/` | TypeScript类型定义文件 |
|
|
157
|
+
|
|
158
|
+
> 💡 提示：新增组件时会自动修改以下文件：
|
|
159
|
+
> - `components.json`（添加组件入口）
|
|
160
|
+
> - `packages/theme-cy/src/index.scss`（引入样式）
|
|
161
|
+
> - `types/element-ui.d.ts`（添加类型声明）
|
|
162
|
+
> - `examples/nav.config.cy.json`（更新导航菜单）
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cy-element-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "基于ElementUI开发的组件",
|
|
5
5
|
"main": "lib/element-ui.common.js",
|
|
6
6
|
"files": [
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"url": "https://github.com/ElemeFE/element/issues"
|
|
64
64
|
},
|
|
65
65
|
"unpkg": "lib/index.js",
|
|
66
|
-
"style":
|
|
66
|
+
"style": "lib/theme-chalk/index.css",
|
|
67
67
|
"web-types": "./web-types.json",
|
|
68
68
|
"dependencies": {
|
|
69
69
|
"async-validator": "~1.8.1",
|