@caf-assistant/create-caf-assistant-widget

CAF智能助手部件脚手架工具，用于快速创建符合CAF规范的助手部件工程。

功能特点

• 快速创建符合Web Components规范的CAF助手部件工程
• 自动生成完整的项目结构，包括Vue 3组件、TypeScript配置、Vite构建配置等
• 预置部件接口实现，符合caf-assistant-widget-container规范
• 支持自定义部件名称和目标目录

安装和使用

方式一：使用npm create

npm create @caf-assistant/caf-assistant-widget@latest <widget-name> [options]

方式二：使用npx

npx @caf-assistant/create-caf-assistant-widget <widget-name> [options]

参数说明

必选参数

• <widget-name>: 部件名称，必须符合Web Components规范
  • 必须包含连字符(-)
  • 不能以连字符开头或结尾
  • 不能包含大写字母
  • 不能使用sys-开头

可选参数

• -d, --dir <directory>: 目标目录，默认为当前目录下的部件名称目录
• -h, --help: 显示帮助信息
• -V, --version: 显示版本信息

示例

创建一个名为my-widget的部件工程：

npm create @caf-assistant/caf-assistant-widget@latest my-widget

创建一个名为custom-widget的部件工程到指定目录：

npm create @caf-assistant/caf-assistant-widget@latest custom-widget --dir ./my-components/custom-widget

创建的项目结构

my-widget/
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
├── vite.config.ts
├── vite.widget.config.ts
└── src/
    ├── index.ts
    ├── app.vue
    ├── style.css
    ├── vite-env.d.ts
    └── components/
        ├── index.ts
        └── MyWidget.ce.vue

项目开发流程

1. 进入项目目录：

   cd my-widget

2. 安装依赖：

   npm install

3. 启动开发服务器：

   npm run dev

4. 开发部件组件：

   • 修改src/components/MyWidget.ce.vue自定义部件UI和逻辑
   • 修改src/components/index.ts实现IAssistantWidget接口

5. 构建部件：

   npm run build:widget

6. 构建后的文件将位于dist目录下，可以集成到CAF智能助手中使用

技术栈

• Vue 3
• TypeScript
• Vite
• Web Components

依赖要求

• Node.js 20.x或更高版本
• npm 10.x或更高版本

许可证

ISC