前面介紹了多專案管理與協作開發相關的討論，接下來要進入實作開發，但對於沒有真正大量開發 Vue 的團隊其實是茫然的，組織內沒有 UIUX 團隊的配置，過去的開發經驗中，數年來我僅僅遇過一位業務窗口，基於新上線系統想求個好印象，於是拜託了品牌部門提供了 3 page 樣板，其實樣板也單純，就是三個 Page 其實是個不同的 Banner 加上底圖，IT 只要在天地線中間繪製出畫面即可，但最多就是這樣了，許多內部系統就是這麼樸實無華😀。

UIUX 套版會包含完整的控制項元件與設計元素構成，風格統一，開發者僅需要配置與調整，即可快速產出美觀且符合最佳 UI/UX 的界面，縮短開發週期，但已經自討苦吃選了技術轉型的我們，其實已無力也無美感自行研究開發那種美美的介面，唯一的解決辦法就是購買第三方套版能幫助團隊快速建立漂亮、專業、一致的界面，節省時間與成本，並擴展多元功能，尤其適合想在短時間內推出高質感產品或原型的專案，此外容易整合額外的 UI 插件或套件，實現更豐富的前端效果，達到我們想要提升 UIUX 體驗的目的。

不過既然要翻修了，我們還是希望鎖定可以支援 Vue3 的 Template，搜尋一波不難發現幾個蠻受歡迎的套版網站可以任君選擇，過去撰寫 ASP.NET 最常搭配的 Bootstrap 其實就有支援 Vue3 的套版，比較可惜的是沒有提供 Vue component，只給你 JS API，Bootstrap 原生不支援 Vue 的資料綁定，每一個元件都要額外手動處理，非常繁瑣，對於初學者其實不友善，也擔心長期下來雜亂的程式碼又會再次成為難以維護的黑洞。

因此我們更傾向於 Vuetify 3，一套基於 Material Design 3 的 Vue 3 UI 組件框架，且有完整的 UI 元件庫，還可以讓使用者自動切換主題的顏色，省去自行設計、組件開發的時間。此外它不僅僅是支援 Vue3，其他前端框架的也有支援，推薦有跟我們一樣需求的團隊可到 vuejs 官網 ，看看是否有適合自己組織內部的主題，另外在這準備的過程也發現，其實不只有前端套版，連後端開發的管理平台都有套版可以選購，且還有完整的權限管理模組、CRUD 的套版，讓開發者可以更加專注於業務邏輯與功能交付上，也讓我們這種一個系統一人扛的開發模式，且又有高度客製需求的開發者，可以不用再重複從頭打造。

來看看套版有甚麼

我們選擇了 Able Pro Admin Vue 3，適配各種裝置，包括桌面、平板和手機，除了基本的 UI 元件外，也有許多表格、圖表、表單等設計套版可以套用。
圖7-1：選購完成後可以獲得套版大禮包🎁，解壓縮後會提供不同語言的套版範本

full-version & starter-kit

每個語言資料夾分為兩個子資料夾：

• full-version：提供完整的套版範例，可快速預覽官方的最佳實踐，包含選購網站看 到的所有 Page 都已經預設組好一整包，還有詳盡的使用範例，提供豐富的範例庫。
• starter-kit：提供專案運行所需的核心套件（登入、權限驗證、Route 設計、導覽列等）及基本設計。

來啟動第一個前端站台吧

1. 安裝 node.js
2. 使用 starter-kit 來進行功能開發，複製好 starter-kit 的所有檔案到開發資料夾中
   
   圖7-2：starter-kit 資料夾
3. 開啟 .NET Core，切換到開發資料夾，使用 npm 安裝專案套件（僅初次需要），並啟動站台，確保在包含 package.json 的資料夾下執行安裝指令：

npm install
npm install -D vite #Vite 前端開發工具，可以輔助開發;-D代表將 vite 安裝為「開發依（devDependencies），只在開發階段 正式部署不使用
npm i sass@1.77.6 --save-exact #CSS 預處理器
npm audit fix #如果有遇到套件有弱點需要修復，可使用 audit fix 
npm run dev #啟動前端站台

4. 啟動成功
   
   圖7-3：前端站台啟動成功畫面

5. starter-kit 站台網頁
   
   圖7-4：starter-kit

6. 開發時，如果需要找範例，可使用相同方式，或在 full-version 啟動服務後搜尋需要的元件與範本。
   
   圖7-5：眼冒愛心光的網美等級的站台🤩

7.整理套版中 starter-kit 結構與放置的程式碼類型配置如下

├── assets/         # 靜態資源：圖片、字型、圖示、影片等。
├── components/     # 可重用的 UI 元件：如按鈕 Button.vue、卡片 Card.vue。
├── layouts/        # 頁面佈局元件：Header、Footer、Sidebar 等。
├── models/         # 資料模型或型別定義：User.ts、Product.ts。
├── plugins/        # 外掛或擴充功能。
├── router/         # 路由設定：routes.ts、index.ts，管理 URL 導向。
├── scss/           # 樣式表（SCSS/SASS）。
├── stores/         # 狀態管理：Pinia 或 Vuex Store 。
├── types/          # 型別定義（TypeScript）：全域型別接口。
├── utils/          # 工具函式：日期格式、API 請求輔助、字串處理等。
└── views/          # 頁面元件：Home.vue、Dashboard.vue，由 layouts + components 組成完整頁面。

Ending Remark

今日分享了我們如何透過第三方 Vue3 套版快速彌補團隊在 UI/UX 上的不足不僅提供完整元件庫和範例頁面，還有 starter-kit 核心套件，讓團隊可以直接啟動開發、快速建立一致、專業的前端界面，同時專注於業務邏輯與功能交付，節省設計與維護成本，快速推出高質感產品。

夜深了🛌 我們明天見~