cy-element-ui 1.0.27 → 1.0.28

package/README.md

@@ -1,171 +1,162 @@
-<div align="center">
-  <h1>Cy-Element-UI 组件库</h1>
-</div>
-
-<div align="center">
-  <a href="https://192.168.41.135/dev/chanyan-ui" target="_blank">
-    <img src="https://img.shields.io/badge/Git-仓库-blue?logo=git" alt="Git 仓库">
-  </a>
-  <img src="https://img.shields.io/badge/ElementUI-2.15.14-blue" alt="ElementUI Version">
-  <img src="https://img.shields.io/badge/Vue-2.x-brightgreen" alt="Vue Version">
-  <img src="https://img.shields.io/badge/License-MIT-green" alt="License">
-</div>
-
-## 目录
-- [安装](#-安装)
-- [引入方式](#-引入方式)
-- [组件使用](#-组件使用)
-- [开发指南](#-开发指南)
-  - [环境准备](#-环境准备)
-  - [常用命令](#-常用命令)
-  - [增加新的element-ui组件](#-增加新的element-ui组件)
-  - [增加新的cy组件](#-增加新的cy组件)
-  - [生成文件说明](#-生成文件说明)
-  - [自动修改的文件](#-自动修改的文件)
-- [部分文件说明](#-部分文件说明)
-
----
-
-## 📥 安装
-```bash
-npm i cy-element-ui
-```
-
-## 🎯 引入方式
-```javascript
-import Vue from 'vue';
-import ElementUI from 'cy-element-ui';
-import 'cy-element-ui/lib/theme-chalk/index.css';
-import App from './App.vue';
-
-Vue.use(ElementUI);
-
-new Vue({
-  el: '#app',
-  render: h => h(App)
-});
-```
-
-## 🧩 组件使用
-以新组件`CyTreeSelect`为例，其他组件使用还是和`element-ui`用法相同
-```vue
-<CyTreeSelect
-  v-model="dept_id"
-  :options="deptOptions"
-  placeholder="请选择部门"
-  clearable
-  :multiple="true"
-  @change="treeSelectChange"
-/>
-```
-
-## 👨‍💻 开发指南
-
-### 🖥️ 环境准备
-#### 📌 Node版本： 14.21.3
-
-#### 🔧 Make 工具安装 (Windows 用户)
-```bash
-# 1. 下载安装 MSYS2 (https://www.msys2.org/)
-# 2. 打开 MSYS2 终端执行系统更新：
-pacman -Syu
-# 3. 安装 make 工具：
-pacman -S make
-# 4. 配置环境变量：
-#    将 MSYS2 的 bin 目录(如：F:\msys2\usr\bin)添加到系统 PATH
-# 5. 验证安装：
-make --version
-
-#### 安装
-npm install
-```
-> ⚠️ **注意**：如果安装过程中提示需要关闭终端，请重新打开终端后再次执行相同命令
-
-### 🔧 常用命令
-| 命令                      | 说明                              | 备注                            |
-|-------------------------|---------------------------------|-------------------------------|
-| `npm run dev`           | 启动开发服务器                         | 访问 http://localhost:8085      |
-| `npm run dist`          | 组件库打包，上传到npm前，先执行这个命令，看看打包是否有错误 | 生成在 `lib` 目录                  |
-| `npm run deploy:build`  | 文档站点构建                          | 生成在 `examples/element-ui`     |
-| `make new-cy-ui <name>` | 创建新组件                           | 如 `make new-cy-ui treeSelect` |
-
-### 🛠️ 增加新的element-ui组件
-- 🔗 可以参考 [此文档](https://mp.weixin.qq.com/s?__biz=MzA3NTk4NjQ1OQ==&mid=2247484697&idx=1&sn=01de22e7fa48fbee510305177beeccb1&chksm=9f69666da81eef7b96c9fe2b2b5fd02bac222dc1e49ebafff9b23e1bb312e3abec6cbf32edb8)
-- 👀 这个看看就行了，当前基本上用不上，因为 `ElementUI 2.0` 目前已经不维护了
-- ⚠️ 而且这个命令大概率也不能用了，我改了部分文件，运行这个命令会报错，有需要的话可以试着去修改 `build/bin/new.js` 
-
-### ✨ 增加新的cy组件
-- 💻 在终端 `cmd` 中执行以下命令
-```shell
-make new-cy-ui <component-name> [组件中文名]
-比如：
-make new-cy-ui treeSelect 下拉树
-```
-
-### 📂 生成文件说明
-
-| 文件类型 | 路径                                      | 注意事项           |
-|------|-----------------------------------------|----------------|
-| 组件开发 | `packages/treeSelect/src/main.vue`      | ⚠️ 禁止写 CSS 样式  |
-| 组件文档 | `examples/docs/cy/treeSelect.md`        | 编写示例用法和 API 说明 |
-| 组件样式 | `packages/theme-cy/src/treeSelect.scss` | 组件专用样式         |
-| 测试文件 | `test/unit/specs/treeSelect.spec.js`    | 单元测试           |
-| 类型声明 | `types/treeSelect.d.ts`                 | TS 类型定义        |
-
-
-### 📝 自动修改的文件
-
-| 文件路径                               | 修改内容   |
-|------------------------------------|--------|
-| `components.json`                  | 添加组件入口 |
-| `packages/theme-cy/src/index.scss` | 引入样式文件 |
-| `types/element-ui.d.ts`            | 添加类型声明 |
-| `examples/nav.config.cy.json`      | 更新导航菜单 |
-
-
-## 📌 部分文件说明
-
-### 🛠️ 核心开发文件
-| 文件/目录             | 说明                    |
-|-------------------|-----------------------|
-| `packages/`       | 组件源码目录，所有要发布的组件都在这里开发 |
-| `components.json` | 组件清单，包含所有要发布的组件列表     |
-
-### 📚 文档系统
-| 文件/目录                            | 说明                         |
-|----------------------------------|----------------------------|
-| `examples/docs/element`          | ElementUI官方组件文档            |
-| `examples/docs/cy`               | 自定义组件文档（格式参考element目录）     |
-| `examples/components/demo-block` | MD文档渲染组件，将`.md`转为页面        |
-| `examples/demo-styles/`          | 自定义样式目录（需在`index.scss`中引入） |
-
-### 🗂️ 路由配置 **❗ 很重要**
-| 文件                       | 说明                    |
-|--------------------------|-----------------------|
-| `examples/router_config` | 路由生成器（根据nav.config生成） |
-| `examples/nav.config.cy` | 控制「组件」菜单的左侧子路由        |
-| `examples/route.config`  | 完整路由配置（自动生成）          |
-
-### 🌐 网站结构
-| 文件/目录                         | 说明          |
-|-------------------------------|-------------|
-| `examples/pages/`             | 菜单路由对应的页面结构 |
-| `examples/pages/cy/changelog` | 版本更新日志页面    |
-
-### ⚙️ 开发工具
-| 文件                         | 说明                                                                                                                                         |
-|----------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|
-| `build/bin/new-cy-ui.js`   | 组件生成器（自动创建/修改相关文件）                                                                                                                         |
-| `build/bin/build-entry.js` | 组件注册文件生成器（自动创建/修改`src/index.js`），**❗ 注意** `npm run dev`、`npm run deploy:build`、`npm run dist` 都会触发这个生成器，所以不要去修改`src/index.js`，想改的话就去改这个生成器 |
-
-### 📦 发布配置
-| 文件                   | 说明               |
-|----------------------|------------------|
-| `packages/theme-cy/` | 组件主题样式目录         |
-| `types/`             | TypeScript类型定义文件 |
-
-> 💡 提示：新增组件时会自动修改以下文件：
-> - `components.json`（添加组件入口）
-> - `packages/theme-cy/src/index.scss`（引入样式）
-> - `types/element-ui.d.ts`（添加类型声明）
-> - `examples/nav.config.cy.json`（更新导航菜单）
+<div align="center">
+  <h1>Cy-Element-UI 组件库</h1>
+</div>
+
+<div align="center">
+  <a href="https://192.168.41.135/dev/chanyan-ui" target="_blank">
+    <img src="https://img.shields.io/badge/Git-仓库-blue?logo=git" alt="Git 仓库">
+  </a>
+  <img src="https://img.shields.io/badge/ElementUI-2.15.14-blue" alt="ElementUI Version">
+  <img src="https://img.shields.io/badge/Vue-2.x-brightgreen" alt="Vue Version">
+  <img src="https://img.shields.io/badge/License-MIT-green" alt="License">
+</div>
+
+## 目录
+- [安装](#-安装)
+- [引入方式](#-引入方式)
+- [组件使用](#-组件使用)
+- [开发指南](#-开发指南)
+  - [环境准备](#-环境准备)
+  - [增加新的element-ui组件](#-增加新的element-ui组件)
+  - [增加新的cy组件](#-增加新的cy组件)
+  - [生成文件说明](#-生成文件说明)
+  - [自动修改的文件](#-自动修改的文件)
+- [部分文件说明](#-部分文件说明)
+
+---
+
+## 📥 安装
+```bash
+npm i cy-element-ui
+```
+
+## 🎯 引入方式
+```javascript
+import Vue from 'vue';
+import ElementUI from 'cy-element-ui';
+import 'cy-element-ui/lib/theme-chalk/index.css';
+import App from './App.vue';
+
+Vue.use(ElementUI);
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+});
+```
+
+## 🧩 组件使用
+以新组件`CyTreeselect`为例，其他组件使用还是和`element-ui`用法相同
+```vue
+<CyTreeselect
+  v-model="dept_id"
+  :options="deptOptions"
+  placeholder="请选择部门"
+  clearable
+  :multiple="true"
+  @change="treeselectChange"
+/>
+```
+
+## 👨‍💻 开发指南
+
+### 🖥️ 环境准备
+#### 📌 Node版本： 14.21.3
+
+#### 🔧 Make 工具安装 (Windows 用户)
+```bash
+# 1. 下载安装 MSYS2 (https://www.msys2.org/)
+# 2. 打开 MSYS2 终端执行系统更新：
+pacman -Syu
+# 3. 安装 make 工具：
+pacman -S make
+# 4. 配置环境变量：
+#    将 MSYS2 的 bin 目录(如：F:\msys2\usr\bin)添加到系统 PATH
+# 5. 验证安装：
+make --version
+
+#### 安装
+npm install
+```
+> ⚠️ **注意**：如果安装过程中提示需要关闭终端，请重新打开终端后再次执行相同命令
+
+
+### 🛠️ 增加新的element-ui组件
+- 🔗 可以参考 [此文档](https://mp.weixin.qq.com/s?__biz=MzA3NTk4NjQ1OQ==&mid=2247484697&idx=1&sn=01de22e7fa48fbee510305177beeccb1&chksm=9f69666da81eef7b96c9fe2b2b5fd02bac222dc1e49ebafff9b23e1bb312e3abec6cbf32edb8)
+- 👀 这个看看就行了，当前基本上用不上，因为 `ElementUI 2.0` 目前已经不维护了
+- ⚠️ 而且这个命令大概率也不能用了，我改了部分文件，运行这个命令会报错，有需要的话可以试着去修改 `build/bin/new.js` 
+
+### ✨ 增加新的cy组件
+- 💻 在终端 `cmd` 中执行以下命令
+```shell
+make new-cy-ui <component-name> [组件中文名]
+比如：
+make new-cy-ui treeselect 下拉树
+```
+
+### 📂 生成文件说明
+
+| 文件类型 | 路径                                      | 注意事项           |
+|------|-----------------------------------------|----------------|
+| 组件开发 | `packages/treeselect/src/main.vue`      | ⚠️ 禁止写 CSS 样式  |
+| 组件文档 | `examples/docs/cy/treeselect.md`        | 编写示例用法和 API 说明 |
+| 组件样式 | `packages/theme-cy/src/treeselect.scss` | 组件专用样式         |
+| 测试文件 | `test/unit/specs/treeselect.spec.js`    | 单元测试           |
+| 类型声明 | `types/treeselect.d.ts`                 | TS 类型定义        |
+
+
+### 📝 自动修改的文件
+
+| 文件路径                               | 修改内容   |
+|------------------------------------|--------|
+| `components.json`                  | 添加组件入口 |
+| `packages/theme-cy/src/index.scss` | 引入样式文件 |
+| `types/element-ui.d.ts`            | 添加类型声明 |
+| `examples/nav.config.cy.json`      | 更新导航菜单 |
+
+
+## 📌 部分文件说明
+
+### 🛠️ 核心开发文件
+| 文件/目录             | 说明                    |
+|-------------------|-----------------------|
+| `packages/`       | 组件源码目录，所有要发布的组件都在这里开发 |
+| `components.json` | 组件清单，包含所有要发布的组件列表     |
+
+### 📚 文档系统
+| 文件/目录                            | 说明                         |
+|----------------------------------|----------------------------|
+| `examples/docs/element`          | ElementUI官方组件文档            |
+| `examples/docs/cy`               | 自定义组件文档（格式参考element目录）     |
+| `examples/components/demo-block` | MD文档渲染组件，将`.md`转为页面        |
+| `examples/demo-styles/`          | 自定义样式目录（需在`index.scss`中引入） |
+
+### 🗂️ 路由配置
+| 文件                       | 说明                    |
+|--------------------------|-----------------------|
+| `examples/router_config` | 路由生成器（根据nav.config生成） |
+| `examples/nav.config.cy` | 控制「组件」菜单的左侧子路由        |
+| `examples/route.config`  | 完整路由配置（自动生成）          |
+
+### 🌐 网站结构
+| 文件/目录                         | 说明          |
+|-------------------------------|-------------|
+| `examples/pages/`             | 菜单路由对应的页面结构 |
+| `examples/pages/cy/changelog` | 版本更新日志页面    |
+
+### ⚙️ 开发工具
+| 文件                       | 说明                 |
+|--------------------------|--------------------|
+| `build/bin/new-cy-ui.js` | 组件生成器（自动创建/修改相关文件） |
+
+### 📦 发布配置
+| 文件                   | 说明               |
+|----------------------|------------------|
+| `packages/theme-cy/` | 组件主题样式目录         |
+| `types/`             | TypeScript类型定义文件 |
+
+> 💡 提示：新增组件时会自动修改以下文件：
+> - `components.json`（添加组件入口）
+> - `packages/theme-cy/src/index.scss`（引入样式）
+> - `types/element-ui.d.ts`（添加类型声明）
+> - `examples/nav.config.cy.json`（更新导航菜单）