cy-element-ui 1.0.3 → 1.0.5

package/README.md

@@ -1,67 +1,171 @@
-## node版本
-node：14.21.3
-
-## make
-- 最好安装一下make，后期的npm命令会特别长，这个可以省略大量你需要敲打的命令
-- 使用 MYSY2 安装 make，可以去官网下载，免费的
-- 安装好后打开 MYSY2 终端，运行以下命令
-  - bash
-  - pacman -Syu
-  - 全部点 Y，如果提示关闭终端，重新打开终端，再次运行 pacman -Syu
-- 安装 make，运行以下命令
-  - bash
-  - pacman -S make
-- 配置环境变量
-- 路径示例：F:\msys2\usr\bin，我是把 MYSY2 装到了F盘
-- 打开cmd，运行 make --version 验证是否安装成功
-
-## Install
-```shell
-npm install element-ui -S
+<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
 ```
 
-## Quick Start
-``` javascript
-import Vue from 'vue'
-import Element from 'element-ui'
-
-Vue.use(Element)
+## 🎯 引入方式
+```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';
 
-// or
-import {
-  Select,
-  Button
-  // ...
-} from 'element-ui'
+Vue.use(ElementUI);
 
-Vue.component(Select.name, Select)
-Vue.component(Button.name, Button)
+new Vue({
+  el: '#app',
+  render: h => h(App)
+});
 ```
-For more information, please refer to [Quick Start](http://element.eleme.io/#/en-US/component/quickstart) in our documentation.
-
-## Browser Support
-Modern browsers and Internet Explorer 10+.
-
-## Development
-Skip this part if you just want to use Element.
-
-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.
-
-## Changelog
-Detailed changes for each release are documented in the [release notes](https://github.com/ElemeFE/element/releases).
-
-## FAQ
-We have collected some [frequently asked questions](https://github.com/ElemeFE/element/blob/master/FAQ.md). Before reporting an issue, please search if the FAQ has the answer to your problem.
 
-## Contribution
-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)) before making a pull request.
-
-## Join Discussion Group
-
-Scan the QR code using [Dingtalk App](https://www.dingtalk.com/) to join in discussion group :
-
-<img alt="Join Discusion Group" src="https://user-images.githubusercontent.com/17680888/93177882-0ae92d80-f766-11ea-870d-3fa2d7f06454.png" width="300">
+## 🧩 组件使用
+以新组件`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 下拉树
+```
 
-## LICENSE
-[MIT](LICENSE)
+### 📂 生成文件说明
+
+| 文件类型 | 路径                                      | 注意事项           |
+|------|-----------------------------------------|----------------|
+| 组件开发 | `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`（更新导航菜单）