component-lib

前端组件库

涉及功能或依赖：

1. 目前基于Vue+vite的
2. pnpm + workspace + changeset 进行monorepo管理
3. npm包管理使用本地仓库管理，技术为docker+verdaccio，使用参考：docker+verdaccio

目录结构

    ├── 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. 执行一下命令，来进行打包操作

   $ 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，仅发布当前包。