恩诺业务组件库工具集 - 快速获取和同步业务组件
恩诺业务组件库工具集 - 快速获取和同步业务组件到你的项目中。
- 🚀 快速安装 - 一行命令即可初始化配置
- 📦 组件管理 - 轻松添加、移除、同步远程组件
- 🔄 版本管理 - 支持指定组件版本，更新到最新版本
- 📡 远程获取 - 从远程服务器自动下载和同步组件
- 📖 AI 友好 - 同步的组件可作为 AI 代码生成的参考
- 🎯 批量操作 - 支持同时安装多个组件
- 🔗 依赖管理 - 自动检测和添加组件间依赖关系（新增）
- ✅ 依赖检测 - 自动检测 npm 依赖并提示安装
``bash使用 npm
npm install @ennuoltd/kit -D
或者直接使用 npx（无需安装）：
bash
npx @ennuoltd/kit init
`🚀 快速开始
$3
bash
npx @ennuoltd/kit init
`这将创建配置文件
和组件目录结构。$3
`bash
npx @ennuoltd/kit list
`$3
bash
添加最新版本（自动下载）
npx @ennuoltd/kit add example-button添加指定版本
npx @ennuoltd/kit add example-button@1.0.0
`$3
bash
npx @ennuoltd/kit sync
`组件将同步到
目录（可配置）。📋 命令参考
| 命令 | 说明 |
|------|------|
|
init | 初始化项目配置 |
| sync | 从远程同步组件到目标目录 |
| add | 添加远程组件到配置 |
| remove | 从配置移除组件 |
| list | 列出所有可用的远程组件 |
| status | 显示当前同步状态 |
| update [name] | 更新组件到最新版本 |
| publish | 发布组件到远程服务器 |
| publish-all | 一键发布所有有更新的组件 |
| route | 扫描组件目录并生成路由配置文件 |$3
初始化项目配置：
`bash
交互式初始化
npx @ennuoltd/kit init使用默认配置
npx @ennuoltd/kit init -y指定目标目录
npx @ennuoltd/kit init -d src/components/ennuoltd
`$3
同步组件：
bash
同步已安装的组件
npx @ennuoltd/kit sync强制同步（覆盖已存在的文件）
npx @ennuoltd/kit sync --force
`依赖检测：同步完成后，工具会自动检测所有组件的依赖，如果发现未安装的依赖，会提示你安装。
$3
添加组件（会自动下载到目标目录）：
bash
添加最新版本
npx @ennuoltd/kit add example-button添加指定版本（使用 name@version 格式）
npx @ennuoltd/kit add example-button@1.0.0同时添加多个组件（支持混合版本格式）
npx @ennuoltd/kit add example-button example-card@1.0.0 another-component
`智能依赖管理：
- 组件依赖：添加组件时，工具会自动检测并添加该组件依赖的其他组件库内部组件（递归处理传递依赖）
- npm 依赖：添加完成后，工具会检测所有组件所需的 npm 包依赖，如果发现未安装的依赖，会提示你安装
详细文档请查看：组件依赖功能使用指南
$3
移除组件（会自动删除已下载的文件，并智能清理未使用的依赖组件）：
bash
从配置移除组件并删除文件
npx @ennuoltd/kit remove example-button如果该组件依赖其他组件，且这些依赖不再被其他组件使用，会自动清理
`智能依赖清理：
- 移除组件时，系统会自动检查其依赖的组件
- 如果某个依赖组件不再被任何其他组件使用，将自动移除
- 避免项目中残留无用的组件
详细说明请查看：组件依赖功能使用指南
$3
更新组件：
bash
更新所有组件到最新版本
npx @ennuoltd/kit update更新指定组件
npx @ennuoltd/kit update example-button
`$3
发布组件到远程服务器：
bash
发布组件（需要包含 config.json 文件）
npx @ennuoltd/kit publish example-button强制发布（覆盖同版本）
npx @ennuoltd/kit publish example-button --force
`组件要求：
- 组件目录下必须包含
文件
- config.json 必须包含 name 和 version 字段config.json 示例：
`json
{
"name": "example-button",
"version": "1.0.1",
"title": "Example Button",
"group": "基础组件",
"componentType": "component",
"description": "An example button component for Ennuoltd Kit.",
"dependencies": {
"echarts": "^6.0.0"
}
}
`字段说明：
-
：组件名称（必填）
- version：组件版本，需符合语义化版本规范（必填）
- title：组件标题，用于显示的友好名称（可选）
- group：组件分组，如"基础组件"、"业务组件"等（可选）
- componentType：组件类型，如"component"、"layout"等（可选）
- description：组件描述（可选）
- dependencies：组件依赖的 npm 包（可选）
- componentDependencies：组件库内部组件依赖（可选，数组格式）组件依赖示例：
`json
{
"name": "advanced-chart",
"version": "1.0.0",
"description": "高级图表组件",
"dependencies": {
"echarts": "^6.0.0"
},
"componentDependencies": [
"example-button",
"example-card"
]
}
`当添加
时，系统会自动添加 example-button 和 example-card。$3
一键发布所有有更新的组件：
`bash
自动检测版本更新并发布
npx @ennuoltd/kit publish-all强制发布所有组件（覆盖同版本）
npx @ennuoltd/kit publish-all --force跳过确认提示，自动发布
npx @ennuoltd/kit publish-all --yes
`功能说明：
- 自动扫描
目录下的所有组件
- 检测每个组件的版本是否有更新
- 自动发布有更新的组件到远程服务器
- 显示详细的发布结果统计发布结果示例：
`
╔════════════════════════════════════════╗
║ 批量发布结果统计 ║
╚════════════════════════════════════════╝ℹ 总计扫描: 3 个组件
✓ 成功发布: 2 个组件
[更新] example-button@1.0.3
[新增] example-card@1.0.0
⚠ 跳过: 1 个组件
- example-table@1.0.0: 版本相同 (1.0.0)，无需发布
🎉 所有组件已成功发布到远程服务器！
$3
自动扫描组件目录并生成路由配置文件：
bash
使用配置文件中的输出路径
npx @ennuoltd/kit route临时指定输出路径（优先级高于配置文件）
npx @ennuoltd/kit route -o src/router/routes/components.ts
`功能说明：
- 自动扫描组件目录，查找包含
的组件
- 从 config.json 读取组件标题（如果存在）
- 生成 Vue Router 配置文件
- 输出路径从 ennuoltd-kit.config.json 的 routesOutputPath 字段读取
- 可通过 -o 参数临时指定输出路径生成的路由文件示例：
`typescript
import type { RouteRecordRaw } from 'vue-router';const routes: RouteRecordRaw[] = [
{
name: 'Components',
path: '/components',
meta: {
title: '组件库',
icon: 'ant-design:appstore-outlined',
},
children: [
{
name: 'ExampleButton',
path: '/example-button',
component: () => import('#/ennuoltd-components/example-button/example.vue'),
meta: {
title: 'Example Button',
},
},
// ... 更多组件路由
],
},
];
export default routes;
`⚙️ 配置文件
:`json
{
"version": "1.0.0",
"targetDir": "src/ennuoltd-components",
"remoteUrl": "http://192.168.2.32:31001",
"routesOutputPath": "src/router/routes/modules/components.ts",
"components": [
{
"name": "example-button",
"version": "1.0.0"
},
{
"name": "example-card",
"version": "1.2.0"
}
],
"lastSync": "2025-12-01T00:00:00.000Z"
}
`$3
| 字段 | 类型 | 说明 |
|------|------|------|
|
| string | 配置版本 |
| targetDir | string | 组件同步目标目录 |
| remoteUrl | string | 远程服务器 URL |
| routesOutputPath | string | 路由文件输出路径（可选） |
| components | Array<{name: string, version: string}> | 已安装的组件列表及版本 |
| lastSync | string | 最后同步时间 |📁 目录结构
初始化后的项目结构：
`
your-project/
├── ennuoltd-kit.config.json # 配置文件
└── src/
└── ennuoltd-components/ # 远程组件同步目标目录
├── README.md # 自动生成的说明文档
├── index.ts # 自动生成的导出文件
├── example-button/ # 从远程下载的组件
└── example-card/ # 从远程下载的组件
🎨 组件结构
从远程下载的组件通常包含：
component-name/
├── index.vue # 组件主文件
├── README.md # 组件文档
├── types.ts # 类型定义 (可选)
└── composables/ # 组合式函数 (可选)
🤖 AI 集成说明
同步到
的组件可供 AI 读取参考：- ✅ AI 可以读取组件代码作为参考
- ✅ AI 可以基于这些组件的模式创建新组件
- ❌ AI 不应该直接修改此目录下的文件
- ❌ AI 不应该删除或重命名此目录下的文件
这种设计使得：
1. 团队可以维护一套标准组件库
2. AI 可以学习组件的编码风格和模式
3. 新组件可以遵循相同的规范生成
🔧 编程式使用
除了 CLI，你也可以在代码中使用：
`typescript
import { EnnuoltdKit } from '@ennuoltd/kit';const kit = new EnnuoltdKit(process.cwd());
// 初始化
await kit.init({
targetDir: 'src/ennuoltd-components',
remoteUrl: 'http://192.168.2.32:31001',
});
// 添加组件（最新版本）
await kit.addComponent('example-button');
// 添加组件（指定版本）
await kit.addComponent('example-card', { version: '1.0.0' });
// 同步
const result = await kit.sync();
console.log('Synced:', result.synced);
// 更新组件
const updateResult = await kit.update();
console.log('Updated:', updateResult.updated);
// 获取状态
const status = await kit.getStatus();
console.log('Available:', status.availableCount);
// 发布组件
const publishResult = await kit.publish({
componentName: 'example-button',
force: false,
});
console.log('Published:', publishResult.name, publishResult.version);
// 批量发布组件
const batchPublishResult = await kit.batchPublish({
force: false,
skipConfirm: true,
});
console.log('Published:', batchPublishResult.published.length);
console.log('Skipped:', batchPublishResult.skipped.length);
console.log('Failed:', batchPublishResult.failed.length);
``