準(zhǔn)備工作流程

• 創(chuàng)建項目文件,使用pnpm init。在項目中創(chuàng)建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等規(guī)范配置

開始項目代碼編寫

• 確定項目總體架構(gòu)

  
  
  image.png

1. 編寫packages中組件源碼

• 在項目中建立文件 編寫好源碼，每個組件都要寫自己的package.json文件和vite.config.ts文件，因為組件都要能單組件的導(dǎo)出與引入

2. 在demo中引用實現(xiàn)

• 在demo中要為每個組件編寫至少一個的使用案例，在vite.congfig.ts中配置好其引入包路徑，使其能熱更新

  
  
  image.png
  
  
  image.png

3. 編寫相應(yīng)docs文件，引入demo中的代碼與效果實現(xiàn)展示

• 使用vitepress編寫項目使用手冊
• 編寫.vitepress文件下相關(guān)配置，例如將所有組件文檔抽離出一個模版，然后只要將demo中的相對文件路徑寫入就能生成簡單的文檔頁面，方便后續(xù)不同文檔編寫

4.效果

image.png