分享一個實用的 vite + vue3 元件庫腳手架工具,提升開發效率

程式設計師優雅哥發表於2022-11-28

無論是 vue2 全家桶還是 vue3 + vite + TypeScript,元件庫的使用幾乎大家都會,但自己開發一個獨立元件庫就不是每個人都掌握的,因為搭建元件庫的基礎開發環境,就會讓很多同學望而卻步。一個元件庫應該至少要包括三個方面:

  1. 元件庫的開發和打包;
  2. 元件庫文件的開發和打包;
  3. 命令列工具 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 git@github.com: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 中開發通用後臺管理系統。

感謝你閱讀本文,如果本文給了你一點點幫助或者啟發,還請三連支援一下,點贊、關注、收藏,程式設計師優雅哥會持續與大家分享更多幹貨

相關文章