開箱即用 yyg-cli（腳手架工具）：快速創建 vue3 組件庫和vue3 全家桶專案

1 yyg-cli 是什么

yyg-cli 是優雅哥開發的快速創建 vue3 專案的腳手架，在 npm 上發布了兩個月，11月1日進行了大升級，發布 1.1.0 版本：支持創建 vue3 全家桶專案和 vue3 組件庫專案，具體如下：

vue3 全家桶專案

使用 yyg-cli 創建的 vue3 全家桶專案，底層基于優雅哥撰寫的開源專案 vue3-vite-archetype，默認整合如下庫：

- vite3、vue3
- typescript、tsx
- vue router
- pinia
- scss
- element plus
- nprogress
- svg

此外還支持：

- 多環境的支持
- 封裝 Element Plus 圖示組件并全域引入，支持 Element UI 中的圖示的使用方式
- 使用 pinia-plugin-persistedstate 實作 pinia 狀態持久化，瀏覽器重繪時資料不丟失
- 使用 eslint-standard 規范進行代碼檢查
- 使用 git hooks 規范代碼提交

vue3 組件庫專案

使用 yyg-cli 創建的 vue3 組件庫專案，底層基于優雅哥撰寫的開源專案 vue3-component-library-archetype，該專案在上一篇文章中已經敘述過，簡單來說，支持如下功能：

- pnpm + monorepo
- 組件庫的開發環境和打包構建，打包時自動提取型別；
- 組件庫檔案的開發環境和打包構建，支持一份 demo 的代碼實作 demo 展示和代碼展示；
- example 的開發環境和打包構建；
- 提供 cli，通過 script 一個命令自動創建新組件并自動完成相關配置，
- 本地啟動私服、測驗本地發布組件庫

2 為什么使用 yyg-cli

使用 yyg-cli 就一個原因：省時省力省腦，

如果使用 vite 創建 vue3 全家桶專案，需要手動整合 tsx、路由、狀態管理等，是一個重復體力活，沒有什么價值，通過 yyg-cli 創建 vue3 專案，極大簡化了各種庫的整合作業，關于底層創建所使用的 vue3-vite-archetype 是怎樣從創建專案一步步到完成的，優雅哥在之前的文章中已詳細敘述，大家如果不愿意使用 yyg-cli，可以根據之前的文章一步步操作，

文章：

基于 vite 創建 vue3 全家桶專案
vue3 vite2 封裝 SVG 圖示組件-基于 vite 創建 vue3 全家桶專案(續篇）
Vue3 Vite3 多環境配置 - 基于 vite 創建 vue3 全家桶專案(續篇）
Vue3 Vite3 pinia 基本使用、持久化、路由守衛中的使用 - 基于 vite 創建 vue3 全家桶專案(續篇）
分享一個實用的 vite + vue3 組件庫腳手架工具，提升開發效率

如果使用 vite 創建 vue3 組件庫專案，則是各種繁瑣的依賴、配置，底層腳手架 vue3-component-library-archetype 優雅哥前前后后折騰了七八個晚上才弄完，后面也會分享文章和大家從創建專案開始直到實作整個組件庫腳手架，那為什么不直接使用 vue3-component-library-archetype 來二次開發呢？如果直接使用該專案，需要修改組件庫的名稱等資訊，一不小心就修改遺漏了，而且修改的地方很多，大概有20多個檔案， 使用 yyg-cli， 在創建專案的程序中就會根據輸入的專案名、作者等資訊直接修改相關地方，實作開箱即用，

3 怎樣使用 yyg-cli

3.1 安裝 pnpm

monorepo 是一個主流趨勢，很多開源專案都使用 monorepo 方式，Lerna 是一個優秀的支持 monorepo 的庫，但已經停止維護了一段時間，大多企業使用 pnpm，pnpm 不僅是一個包管理工具，還支持 monorepo，此外還有很多優點，如速度快、節省磁盤空間等，所以優雅哥也從 yarn 切換到了 pnpm，

全域安裝 pnpm

npm install -g pnpm

3.2 安裝 yyg-cli

使用 pnpm 或 yarn 全域安裝 yyg-cli：

pnpm install yyg-cli -g
或
yarn global add yyg-cli

安裝完成后查看版本號：

yyg --version

當前最新版本為 1.1.0

3.3 創建 vue3 全家桶專案

在控制臺輸入 yyg create 專案名 ，如：

yyg create ops-admin

回車后，控制臺提示選擇專案型別，選擇 vue3 全家桶專案，回車

依次輸入專案描述、版本號、作者、本地開發運行的埠號，等待專案創建

專案創建成功后，會提示是否立刻安裝依賴，如果需要直接安裝依賴，回車即可，選擇包管理工具，然后便開始依賴安裝了，出現如下提示，則依賴安裝成功，可以用 IDE 打開專案，運行專案 pnpm run dev:dev，

自動創建生成的 vue3 全家桶結構比較簡單，這里就不描述了，

3.4 創建 vue3 組件庫專案

在控制臺輸入 yyg create 組件庫名 ，如：

yyg create ops-ui

回車后，控制臺提示選擇專案型別，選擇 vue3 組件庫專案，回車，依次填寫組件庫中組件名的前綴（如 element plus 的組件前綴為 el，ant design 的組件前綴為 a，這里輸入 yyg，則代表所有組件前綴都是 yyg）、組件庫中文描述、作者，然后等待組件庫創建，如下圖：

組件庫創建成功后，依然會提示是否安裝依賴，回車就直接使用 pnpm 進行依賴的安裝（由于組件庫腳手架使用 pnpm monorepo，所以這里不再提示選擇包管理工具，這也是本節開頭就全域安裝 pnpm 的原因），

組件庫創建成功后，用 IDE 打開，重點的目錄結構和檔案說明如下：

1）example 模塊

普通的 vue3 專案，可在該目錄中開發業務功能，在開發業務功能程序中，如果有新的公共組件，可方便的在組件庫中開發，組件庫穩定后，便可以將 example 抽取為獨立的工程，（業務驅動組件庫的開發）

2）packages 目錄

存放組件庫，里面包括多個模塊，專案剛創建成功時，里面有三個目錄：

• scss 目錄

該目錄存放樣式相關的檔案，組件庫的樣式參考 ITCSS + ACSS 架構模式，在該模式基礎上進行了簡化，base 目錄存放一些重置樣式和變數；tools 目錄對應一些樣式工具函式，如 BEM 等；components 目錄存放組件的樣式，每個組件都對應該目錄下的一個 scss 檔案，使用 cli 自動創建組件時，會在該目錄下生成對應組件的 scss 檔案，acss 存放原子 CSS，

• foo 模塊

該目錄存放一個示例組件，后續通過 cli 自動創建新組件時，就會自動生成和 foo 相同的目錄檔案結構，foo/index.ts 是組件的入口檔案；foo/src/ 目錄存放組件的原始碼和 props 等型別定義，

• ops-ui 模塊

該模塊是自動生成的，與創建專案時輸入的 組件庫名/專案名 相同，為組件庫的聚合工程，在里面引入了所有的組件庫，同時也是打包組件庫時的入口，使用 cli 創建新組組件時，會自動在該模塊中引入新創建的組件，

3）docs 模塊

組件庫的檔案，使用 vitepress 1.0 開發，.vitepress 目錄存放 vitepress 的常規配置及主題配置，在 .vitepress/theme/index.ts 中自動引入了組件庫 packages/ops-ui， index.md 是首頁，大家可以修改 index.md 中的配置，按照自己的具體資訊進行對應修改，如組件庫的名稱、LOGO、功能特點等，

components 目錄存放每個組件的描述頁，并且可以在里面展示 demo 及 demo 原始碼，demos 目錄存放組件描述頁中引入的 demo，在使用 cli 創建新組件時，會自動在 demos 目錄中生成組件的 demo 代碼，同時在 components 目錄中生成對應組件的 md 描述檔案頁，并在 md 中引入生成的 demo，

4）cli 模塊

該模塊是一個輔助工具，幫助我們快速創建一個組件模塊，并完成 packages/組件庫模塊 、docs 等的配置，

上面所有模塊的 scripts 都聚合在根目錄的 package.json 中，在使用程序中從根目錄操作即可，關于里面的 scripts 以及開發、打包、發布等操作，在上一篇文章 《vue3-component-library-archetype》已經詳細敘述，這里便不再贅述，

有任何 issue，歡迎留言討論，

后面的文章進入vue3 企業級優雅實戰，從創建專案、封裝組件庫腳手架開始、cli 開始，到 JSON Schema 組件封裝、權限管理系統開發，最后再進行微前端升級，

標籤：其他

上一篇：前端多方式登錄功能完成

下一篇：記錄--手寫vm.$mount方法