准备工作流程
- 创建项目文件,使用pnpm init。在项目中创建package.json文件，也就是包管理器。然后配置一些东西
- 在package.json中的name就是之后的包的名称，等等还有好多配置
- 编写!pnpm-workspace.yaml文件 确定包空间范围
- 编写.gitignore
- 在项目下安装vite、typescript 、vue和一些中间插件
pnpm i -wD vite typescript
pnpm i -wD @vitejs/plugin-vue
pnpm i -wS vue
- 编写tsconfig.json文件
- 做好项目eslint\stylint\prettier等规范配置
开始项目代码编写
-
确定项目总体架构
image.png
1. 编写packages中组件源码
- 在项目中建立文件 编写好源码，每个组件都要写自己的package.json文件和vite.config.ts文件，因为组件都要能单组件的导出与引入
2. 在demo中引用实现
-
在demo中要为每个组件编写至少一个的使用案例，在vite.congfig.ts中配置好其引入包路径，使其能热更新
image.png
image.png
3. 编写相应docs文件，引入demo中的代码与效果实现展示
- 使用vitepress编写项目使用手册
- 编写.vitepress文件下相关配置，例如将所有组件文档抽离出一个模版，然后只要将demo中的相对文件路径写入就能生成简单的文档页面，方便后续不同文档编写
4.效果
image.png
