大家好，我是 Kagol，個人公眾號：前端開源星球。
一個月前，日日自新寫了一篇介紹 Create Vite App 開源專案的文章：
基於vite 4.x 快速搭建開箱即用，高度可定製化模版腳手架
Create Vite App 是基於 esbuild + commander + ejs 模板渲染進行開發腳手架，用於建立 vite4.x typescript5.x vite 開箱即用模板，致力於打造不同框架，多種生態，開箱即用的腳手架。
支援各種外掛以及不同元件庫的可拔插式選擇，來幫助你快速從0搭建web應用的腳手架。
當時還不支援 OpenTiny，現已完美支援 OpenTiny 元件庫?
讓我們來體驗下吧！
對 OpenTiny 元件庫的支援
根據 Create Vite App 的官網文件，只需要一行程式碼即可建立一個 Vite + Vue3 + TypeScript 工程，並可以配置豐富的功能，比如 Vue 路由、Pinia 狀態管理工具、程式碼規範工具 ESLint / Prettier、UI 元件庫、Vite 外掛等。
npx create-vite-template@latest
從上圖可以看到 UI 元件庫列表中的第二個就是 TinyVue
選擇想要的配置之後，會自動安裝依賴，成功之後即可透過 pnpm dev 本地啟動你的專案啦！
這是一個空專案，但已經具備了開發一個業務所需要的基礎功能：
- pnpm 包管理器
- Vite 本地啟動和構建
- Vue3 + TypeScript
- SCSS 樣式
- Vue 路由
- Pinia 狀態管理
- ESLint / Prettier 程式碼規範工具
- 一個稱手的 UI 元件庫：OpenTiny
你可以基於這個基礎專案搭建自己的業務。
可能還差一個單元測試?
歡迎大家在評論區留言，你覺得 Create Vite App 還差什麼。
和 Vite 的區別
Create Vite App 是基於 Vite 的，但在其基礎上增加了很多業務開發中常用的工程化工具，不需要自己手動引入，可以節省搭建專案的時間。
Vite 建立出來的專案只有一個 Vite + Vue3 + TypeScript，沒有其他功能，需要自己手動安裝和配置。
和 TinyCLI 的區別
TinyCLI 是一個覆蓋前端開發全流程的 CLI 工具，支援更加豐富的特性：
- ? 跨平臺，相容 windows、mac、linux 三個平臺
- ? 外掛體系，豐富的效率外掛、可信外掛、流程外掛等，覆蓋從開發->構建->釋出的所有生命週期
- ? 開箱即用，結合豐富的經驗沉澱出的專案開發最佳實踐，提供基於主流業務場景的專案解決方案
- ⏳ 任務流機制，提供了比 npm scripts 更強大的任務流執行機制
- ? 自動升級，無需手動安裝和升級外掛，這一切都是自動化完成
比如以下命令可以建立一個基於 Vite + Vue3 + TypeScript + OpenTiny 的中後臺系統。
tiny init vue-pro
包含登入鑑權、路由導航、佈局切換、國際化、個性化主題、Mock 資料、響應式、狀態管理等豐富的功能。
登入頁：
看板頁：
工作臺：
相比 Create Vite App，支援更加豐富的功能，除了能建立中後臺系統之外，還可以透過套件和外掛為你的專案支援更豐富的功能。
詳細可以瞭解 TinyCLI 官網：
https://opentiny.design/tiny-cli/
聯絡我們：
- 官方公眾號：
OpenTiny - OpenTiny 官網
- Vue 元件庫（歡迎 Star ?）
往期文章推薦