開箱即用 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 組件封裝、許可權管理系統開發，最後再進行微前端升級。
