一個實用的 vite + vue3 組件庫腳手架工具，提升開發效率

2022 年 11 月 1 日
筆記
vite, VUE, vue3, 前端, 組件庫, 腳手架

無論是 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

訪問地址為 //localhost:3000/

在組件庫文檔中開發組件，使用命令：

pnpm run docs:dev

訪問地址為 //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

啟動成功後在瀏覽器中訪問 //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 環境配置，訪問地址為 //localhost:3000/

pnpm run dev:uat

本地開發 example，使用 uat 環境配置，訪問地址為 //localhost:3000/

pnpm run dev:prod

本地開發 example，使用 prod 環境配置，訪問地址為 //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，訪問地址為：//localhost:4173/

pnpm run build:lib

打包組件庫，打包生成的文件位於項目根目錄的 lib 目錄

pnpm run docs:dev

本地開發組件庫文檔，訪問地址為：//localhost:3100/

pnpm run docs:build

組件庫文檔打包，打包生成的文件位於項目根目錄下的 docs/.vitepress/dist 目錄

pnpm run docs:preview

預覽打包後的組件庫文檔，訪問地址為：//localhost:4173/

pnpm run gen:component

快速創建新組件。依次輸入組件名、組件描述（中文名稱）、組件類型（tsx \ vue）即可自動生成組件並完成配置。

使用該命令可避免組件開發人員分散精力到各種配置、基礎目錄和文件的創建中，可以讓其聚焦於組件本身的開發。

pnpm run start:verdaccio

啟動 verdaccio。本地開發時，使用 verdaccio 作為測試使用的本地 npm 私服。
使用該命令啟動 verdaccio 私服，啟動成功後在瀏覽器中訪問 //localhost:4873/

如果初次使用，需要創建用戶，可以搜索 verdaccio，查看其具體使用。

pnpm run pub:local

發布組件庫到本地私服。

If you have any questions, please contact me

後面的專題將分享這個腳手架的實現過程，和大家一步步實現這個腳手架，並基於該腳手架實現 JSON Schema 表單、列表等組件，並在 example 中開發通用後台管理系統。

感謝你閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支援一下，點贊、關注、收藏，作者會持續與大家分享更多乾貨

Tags: vite VUE vue3 前端組件庫腳手架