|
|
@@ -1,15 +1,51 @@
|
|
|
## 前端组件库
|
|
|
|
|
|
+涉及功能或依赖：
|
|
|
+
|
|
|
+1. 目前基于Vue+vite的
|
|
|
+2. pnpm + workspace + changeset 进行monorepo管理
|
|
|
+
|
|
|
### 目录结构
|
|
|
|
|
|
```text
|
|
|
-├── projects
|
|
|
- ├── base
|
|
|
+
|
|
|
+ ├── page
|
|
|
├── src/views/Demo // 可在此处使用实例页面
|
|
|
├── common // 公共页面用
|
|
|
- └── package // 组件包（在此处开发组件
|
|
|
- ├── AIRobot // AI机器人
|
|
|
+ └── 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`，仅发布当前包。
|
