哈囉，大家好！經過前面的努力，我們已經完成了後端的基本功能，也進行了第二階段的驗收。現在，是時候讓我們的個人財務管理系統有一個漂亮又實用的前端介面了。今天，我想和大家分享如何開始前端開發，帶大家一起進入 Nuxt 的世界，讓我們的應用程式更加完整。
一、為什麼選擇 Nuxt？
在選擇前端框架時，我們不僅要考慮功能強大與否，更要考慮到開發的便利性和團隊的技術背景。Nuxt 基於 Vue，學習曲線平緩，語法直觀，適合各種程度的開發者。同時，它自動處理了許多繁瑣的配置，降低了心智負擔，讓我們可以專注於功能實現。此外，Nuxt 提供了高速的開發體驗，自動生成路由、方便的資料綁定，以及強大的插件系統，讓我們能快速打造出可維護的高品質應用程式。
即使我們講求的是獨自開發，但總要考慮到未來要組建團隊時，即在最差的情況下，程式碼品質能保持在什麼水平。
二、開始前端開發前的準備
在我們的 D4 文章 中，我們已經建立了基於 Docker 的開發環境，包含了 Laravel、Nuxt、Nginx 和 MariaDB。現在，我們將繼續利用這個環境，開始前端的開發。
1. 回顧 Docker 環境設定
在 D4 中，我們設定了以下目錄結構：
→ .docker-env/
→ api/
→ Dockerfile
→ nginx/
→ api.conf
→ web.conf
→ web/
→ Dockerfile
→ api/
→ web/
→ docker-compose.yml
我們的 docker-compose.yml 已經設定好了 Nuxt.js 的服務：
# Nuxt.js (frontend)
frontend:
build:
dockerfile: ./.docker-env/web/Dockerfile
container_name: nuxt-app
restart: unless-stopped
volumes:
- ./web:/app
ports:
- "3000:3000"
command: sh -c "if [ ! -f package.json ]; then npx nuxi init .; fi && npm install && npm run dev"
depends_on:
- backend
networks:
- app-network
2. 確認 Docker 環境運行
確保 Docker 已經安裝，並且可以正常運行。你可以在終端機中輸入以下指令：
docker-compose --version
如果顯示了版本號，表示 Docker Compose 已經安裝成功。
3. 啟動開發環境
在專案的根目錄下，執行以下指令來啟動所有服務：
docker-compose up --build
這個指令會根據我們的 docker-compose.yml，建立並啟動 Laravel、Nuxt、Nginx 和 MariaDB 服務。
提示：第一次執行可能需要花費一些時間，因為需要下載映像檔並進行建置。
三、建立 Nuxt 專案
現在，我們來正式建立 Nuxt 的前端專案。
1. 進入 Nuxt 容器
我們需要進入 nuxt-app 容器，才能在裡面執行命令。打開一個新的終端機視窗，執行：
docker-compose exec frontend sh
這會讓我們進入到 nuxt-app 容器的終端機。
2. 初始化 Nuxt 專案
在容器內，我們已經位於 /app 目錄，這對應到我們本機的 ./web 目錄。如果我們還沒有初始化 Nuxt 專案，可以執行：
npx nuxi init .
這會在當前目錄建立一個新的 Nuxt 3 專案。
3. 安裝依賴
執行以下指令來安裝專案所需的依賴：
npm install4. 啟動開發伺服器
在容器內執行：
npm run dev這會啟動 Nuxt 的開發伺服器，預設運行在 http://localhost:3000。
注意：由於我們在 docker-compose.yml 中已經將容器的 3000 埠映射到主機的 3000 埠，我們可以直接
不過我們在nginx有設置一組假的domain，所以在瀏覽器中訪問 http://web.localhost 也是可以的喔。
5. 測試 Nuxt 專案
打開瀏覽器，訪問 http://web.localhost ，你應該會看到 Nuxt.js 的歡迎頁面。這表示我們的 Nuxt 專案已經成功運行。
四、探索專案結構
讓我們花點時間了解一下 Nuxt 專案的目錄結構：
- assets：用於存放未編譯的資源，例如 SASS、LESS、圖片等。
- components：用於存放 Vue 元件。
- layouts：用於定義頁面的布局，類似於模板。
- pages：存放頁面元件，Nuxt 會自動根據這裡的檔案生成路由。
- plugins：用於存放需要在 Vue 根實例之前加載的插件。
- public：存放靜態資源，直接映射到網站的根目錄。
- nuxt.config.js：Nuxt 的主要配置檔案。
五、建立第一個頁面
讓我們來建立一個簡單的首頁，並測試一下自動路由功能。
1. 建立首頁
在 pages 目錄下，編輯 index.vue 檔案（如果不存在，則建立一個）：
<template>
<div class="container mx-auto p-4">
<h1 class="text-3xl font-bold text-center">個人財務管理系統</h1>
<p class="mt-4 text-center">歡迎來到你的財務管理平台。</p>
</div>
</template>
<script setup>
// 這裡可以加入組件邏輯
</script>
<style scoped>
/* 這裡可以加入專屬於這個組件的樣式 */
</style>
儲存檔案後，瀏覽器會自動刷新，應該可以看到我們剛剛建立的首頁。
2. 建立其他頁面
例如，我們想建立一個「交易紀錄」頁面。
在 pages 目錄下建立一個 transactions.vue 檔案：
<template>
<div class="container mx-auto p-4">
<h1 class="text-2xl font-bold">交易紀錄</h1>
<!-- 我們將在這裡加入交易列表 -->
</div>
</template>
<script setup>
// 這裡可以加入組件邏輯
</script>
<style scoped>
/* 這裡可以加入專屬於這個組件的樣式 */
</style>
現在，打開瀏覽器，訪問 http://web.localhost/transactions ，應該可以看到「交易紀錄」頁面。
Nuxt 會自動根據 pages 目錄下的檔案生成對應的路由，讓我們專注於頁面的開發。
六、整合 Tailwind CSS
我們在建立專案時，已經選擇了 Tailwind CSS 作為 UI 框架。現在，我們來確認並開始使用它。
1. 確認 Tailwind CSS 設定
在 nuxt.config.js 中，應該已經包含了 Tailwind CSS 模組：
export default defineNuxtConfig({
buildModules: [
'tailwindcss',
],
})
如果沒有，請手動加入。
2. 開始使用 Tailwind CSS
在我們之前的頁面中，已經使用了 Tailwind CSS 的類別，例如 text-3xl、font-bold 等。你可以繼續在模板中使用各種 Tailwind CSS 提供的實用類別，快速設計出美觀的介面。
3. 自訂 Tailwind CSS（可選）
如果需要自訂 Tailwind CSS 的配置，可以在專案根目錄下建立 tailwind.config.js 檔案，並進行相應的設定。例如：
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
七、安裝相應的套件（為後續的整合做準備）
雖然我們還不打算在這一篇中整合後端 API，但可以先安裝好必要的套件，為後續的開發做好準備。
1. 安裝 Axios
我們需要在容器內安裝 Axios。確保你還在 nuxt-app 容器內，執行：
npm install axios然後，在 nuxt.config.js 中加入模組：
export default defineNuxtConfig({
modules: [
'axios',
],
axios: {
baseURL: 'http://api.localhost', // 這是後端 API 的位址，之後會用到
},
})
2. 安裝其他可能需要的套件
根據專案需求，可以提前安裝一些常用的套件，例如：
- Pinia：新的 Vue 3 狀態管理工具。
npm install pinia在 plugins 目錄下建立 pinia.js：
import { createPinia } from 'pinia'
export default defineNuxtPlugin((nuxtApp) => {
const pinia = createPinia()
nuxtApp.vueApp.use(pinia)
})
3. 設定環境變數
我們可以在專案根目錄下建立 .env 檔案，設定環境變數。例如：
API_BASE_URL=http://api.localhost
然後，在 nuxt.config.js 中讀取這些變數：
export default defineNuxtConfig({
runtimeConfig: {
public: {
apiBase: process.env.API_BASE_URL || 'http://api.localhost',
},
},
})
這樣，我們就可以在專案中使用 useRuntimeConfig() 取得 apiBase。
小結
開啟前端開發的旅程，就像是為我們的應用程式注入新的活力。透過 Nuxt，我們可以快速建立一個功能強大、結構清晰的前端介面。
選擇 Nuxt，不僅因為它的功能強大，更重要的是它能夠降低開發的心智負擔，提高專案的下限，讓即使是新手開發者也能寫出可維護的程式碼。
還記得有一次，我和一群剛入門的前端工程師一起開發專案。選擇 Nuxt 後，他們能夠很快地上手，寫出可維護的程式碼。即使在我不在的情況下，他們也能順利地完成任務。這讓我深刻體會到，選擇一個下限較高的框架，對於專案的長期發展是多麼重要。
Next
今天，我們成功利用 Docker 環境建立了前端開發環境，並且初步了解了 Nuxt 的使用方式。接下來，我們將：
- 設計頁面結構：規劃我們的應用程式需要哪些頁面和功能。
- 整合後端 API：在下一篇中，我們將實現與後端的資料互動，讓應用程式具有實際功能。
- 處理身份驗證：實作登入、註冊功能，保護使用者資料。
