D16 - 開始前端開發：用 Nuxt 為應用程式注入活力

哈囉，大家好！經過前面的努力，我們已經完成了後端的基本功能，也進行了第二階段的驗收。現在，是時候讓我們的個人財務管理系統有一個漂亮又實用的前端介面了。今天，我想和大家分享如何開始前端開發，帶大家一起進入 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 install

4. 啟動開發伺服器

在容器內執行：

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：在下一篇中，我們將實現與後端的資料互動，讓應用程式具有實際功能。
• 處理身份驗證：實作登入、註冊功能，保護使用者資料。