目录

• 安装
• 引入方式
• 组件使用
• 开发指南
  • 环境准备
  • 常用命令
  • 增加新的element-ui组件
  • 增加新的cy组件
  • 生成文件说明
  • 自动修改的文件
• 部分文件说明

📥 安装

npm i cy-element-ui

🎯 引入方式

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用法相同

<CyTreeSelect
  v-model="dept_id"
  :options="deptOptions"
  placeholder="请选择部门"
  clearable
  :multiple="true"
  @change="treeSelectChange"
/>

👨‍💻 开发指南

🖥️ 环境准备

📌 Node版本： 14.21.3

🔧 Make 工具安装 (Windows 用户)

# 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组件

• 🔗 可以参考 此文档
• 👀 这个看看就行了，当前基本上用不上，因为 ElementUI 2.0 目前已经不维护了
• ⚠️ 而且这个命令大概率也不能用了，我改了部分文件，运行这个命令会报错，有需要的话可以试着去修改 build/bin/new.js

✨ 增加新的cy组件

• 💻 在终端 cmd 中执行以下命令

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（更新导航菜单）