無論是 vue2 全家桶還是 vue3 + vite + TypeScript，組件庫的使用幾乎大家都會，但自己開發一個獨立組件庫就不是每個人都掌握的，因為搭建組件庫的基礎開發環境，就會讓很多同學望而卻步，一個組件庫應該至少要包括三個方面：
- 組件庫的開發和打包；
- 組件庫檔案的開發和打包；
- 命令列工具 cli 快速創建新組件，
這幾天 程式員優雅哥 搭建了一個組件庫的基礎腳手架：
vue3-component-library-archetype
在這個腳手架的基礎上，大家可以使用內置的 cli 快速創建新組件，按照套路開發組件及檔案即可，腳手架很大程度上簡化了環境的搭建、打包的配置、型別定義的抽取等工具，開箱即用，大家可以將注意力集中到組件本身的開發上，
腳手架采用 monorepo 風格，使用 pnpm 作為包管理工具，
1 組件庫腳手架內容
- 組件庫開發、打包、發布
- 組件庫檔案撰寫、打包、一套代碼撰寫和演示 Demo
- 快速創建組件命令列 cli
- 組件庫搭建的 example 演示
2 組件庫腳手架技術堆疊
- Vite 3
- Vue 3
- TypeScript
- Vitepress 1.0
- ESLint
3 使用說明
3.1 克隆代碼到本地
git clone [email protected]:HeroCloudy/vue3-component-library-archetype.git
3.2 安裝依賴
如果您沒有安裝 pnpm，需要先按照 pnpm
npm install -g pnpm
安裝依賴：
pnpm i
3.3 本地開發
在 example 中開發組件，使用命令：
pnpm run dev:dev
訪問地址為 http://localhost:3000/
在組件庫檔案中開發組件，使用命令：
pnpm run docs:dev
訪問地址為 http://localhost:3100/
組件庫檔案界面如下：
3.4 創建新組件
pnpm run gen:component
按照提示輸入組件名稱、組件中文名稱、組件型別（.tsx 或 .vue），
執行命令創建完組件后，會自動在組件庫中注冊該組件，同時自動生成檔案模板及檔案中的 demo，無需任何手動配置，
3.5 構建檔案
pnpm run build:docs
打包構建后的檔案位于 docs/.vitepress/dist 目錄
3.6 構建 example
pnpm run build:dev
打包構建后的檔案位于 dist 目錄
3.7 發布組件庫
組件庫打包：
pnpm run build:lib
在發布 npm 前可以在本地私服進行測驗，
啟動本地私服：
pnpm run start:verdaccio
啟動成功后在瀏覽器中訪問 http://localhost:4873/
如果初次使用，需要創建用戶，
發布組件庫到本地私服中：
pnpm run pub:local
4 組件庫命令說明
組件庫的命令入口均在根目錄的 package.json 中的 scripts 中，由于采用了 monorepo 的方式，大多命令的實作都在各自的模塊中，
所有命令如下：
- dev:dev
- dev:uat
- dev:prod
- build:dev
- build:uat
- build:prod
- preview:example
- build:lib
- docs:dev
- docs:build
- docs:preview
- gen:component
- start:verdaccio
- pub:local
pnpm run dev:dev
本地開發 example，使用 dev 環境配置，訪問地址為 http://localhost:3000/
pnpm run dev:uat
本地開發 example，使用 uat 環境配置，訪問地址為 http://localhost:3000/
pnpm run dev:prod
本地開發 example，使用 prod 環境配置，訪問地址為 http://localhost:3000/
pnpm run build:dev
打包 dev 環境 example，打包生成的檔案位于專案根目錄的 dist 目錄
pnpm run build:uat
打包 uat 環境 example，打包生成的檔案位于專案根目錄的 dist 目錄
pnpm run build:prod
打包 prod 環境 example，打包生成的檔案位于專案根目錄的 dist 目錄
pnpm run preview:example
預覽打包后的 example，訪問地址為：http://localhost:4173/
pnpm run build:lib
打包組件庫，打包生成的檔案位于專案根目錄的 lib 目錄
pnpm run docs:dev
本地開發組件庫檔案，訪問地址為：http://localhost:3100/
pnpm run docs:build
組件庫檔案打包，打包生成的檔案位于專案根目錄下的 docs/.vitepress/dist 目錄
pnpm run docs:preview
預覽打包后的組件庫檔案，訪問地址為：http://localhost:4173/
pnpm run gen:component
快速創建新組件，依次輸入組件名、組件描述（中文名稱）、組件型別（tsx \ vue）即可自動生成組件并完成配置，
使用該命令可避免組件開發人員分散精力到各種配置、基礎目錄和檔案的創建中，可以讓其聚焦于組件本身的開發，
pnpm run start:verdaccio
啟動 verdaccio， 本地開發時，使用 verdaccio 作為測驗使用的本地 npm 私服，
使用該命令啟動 verdaccio 私服，啟動成功后在瀏覽器中訪問 http://localhost:4873/
如果初次使用，需要創建用戶，可以搜索 verdaccio，查看其具體使用，
pnpm run pub:local
發布組件庫到本地私服，
If you have any questions, please contact me
后面的專題將分享這個腳手架的實作程序，和大家一步步實作這個腳手架，并基于該腳手架實作 JSON Schema 表單、串列等組件，并在 example 中開發通用后臺管理系統，
感謝你閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支持一下，點贊、關注、收藏，作者會持續與大家分享更多干貨
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/525050.html
標籤：其他
下一篇：9 個美觀大氣的后臺管理系統