## 前端组件库

涉及功能或依赖：

1. 目前基于Vue+vite的
2. pnpm + workspace + changeset 进行monorepo管理

### 目录结构

```text

    ├── page                        
        ├── src/views/Demo          // 可在此处使用实例页面
    ├── common                      // 公共页面用
    └── package                     // 组件包
        ├── packages                
            ├── AIRobot             // AI机器人

```

### 介绍

你可以在page项目中，执行`pnpm dev`以启动第一个本地demo项目，在此运行你的在创建或生成的组件。

### 开发
package为组件库部分，开发的组件都集中在packages文件夹下。

当你新增一个组件时，该文件夹至少应包含三个文件（可从已有的组件里拷贝）：
1. `index.ts`: 组件的入口文件，在这里定义组件的属性和默认值。
2. `vite.config.js`: 组件的配置文件，在这里定义组件的打包配置。
3. `package.json`: 包配置文件，在这里定义组件的名称、版本、描述等，有以下注意事项：
   - 记得将 'private' 设为false
   - scripts"中添加："build": "vite build"

### 发布过程

1. 组件开发完成后，后续的操作均在 `/package`文件下进行
2. 执行一下命令，来进行打包操作
    ```bash
   $ pnpm -r build --filter=包名
    ```
    记住，是包名，即package.json里的name字段。`-r`表示--recursive，在工作区的每个项目中运行命令，但不包括根目录。直接执行`pnpm -r build`会打包根目录下所有的项目，不建议这样操作，还是配合`--filter`使用。
    
    当然你也可以直接在组件的当前目录下直接执行 `pnpm build`。
3. 执行 `pnpm changeset` ，创建一个变更记录，此时根据提示执行以下步骤：
   - 选择需要更新的包，使用键盘上下键选择，按空格键确认选中
   - 确定每个包的版本更新类型（patch、minor 或 major）
   - 编写变更描述
4. 执行 `pnpm changeset version`，自动生成变更日志并更新版本号
5. 执行 `pnpm --filter 包名 publish`，发布到npm仓库，使用`--filter`参数指定发布哪个包。
   当然你也可以直接在组件的当前目录下直接执行 `pnpm publish`，仅发布当前包。