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

更新於 2024/10/28閱讀時間約 13 分鐘

哈囉,大家好!經過前面的努力,我們已經完成了後端的基本功能,也進行了第二階段的驗收。現在,是時候讓我們的個人財務管理系統有一個漂亮又實用的前端介面了。今天,我想和大家分享如何開始前端開發,帶大家一起進入 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:在下一篇中,我們將實現與後端的資料互動,讓應用程式具有實際功能。
  • 處理身份驗證:實作登入、註冊功能,保護使用者資料。
這是一系列以軟體開發為主題的輕鬆分享,內容涵蓋了技術選擇、開發經驗、實戰應用等多方面的議題。無論是如何在眾多框架中做出選擇,還是如何應對技術轉移的挑戰,作者都用幽默、有趣的對話風格,將複雜的技術問題轉化為易懂的故事。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
我們已完成個人財務管理系統的後端核心功能,並進行了中期驗收,確認API的正確性和需求的達成。通過Postman測試各個API並檢查資料驗證,確保後續的前端整合能順利進行。接下來,將實作身份驗證機制並開始Nuxt.js前端開發,提升系統的整體品質與安全性。
單元測試為重構提供了安全防線,確保程式碼在修改後仍能正常運作。透過撰寫測試,我們能夠提高程式碼品質、預防回歸錯誤,並在重構過程中更具信心。測試的過程不僅幫助找出錯誤,也促使我們深入思考系統設計,從而優化整體架構。
單元測試不僅能發現錯誤,更是提升開發技能的關鍵工具。Laravel 提供強大的測試框架,讓我們可以輕鬆撰寫測試。建立測試資料庫、撰寫測試方法、使用 Factory 生成測試資料,能確保程式碼穩定,並幫助開發者在修改與重構中更有信心。持續撰寫測試能提高程式碼品質,並讓開發過程更有條理與安全感。
本文介紹了如何在 Laravel 中實作控制器,為個人財務管理系統建立完整的 CRUD API。我們實現了資料的建立、查詢、更新和刪除,並使用資料驗證提升應用安全性。未來將進行程式碼重構及 API 測試,持續優化應用程式。
本文介紹 Laravel 中的路由設定,討論手動定義路由、群組、前綴和中介層的使用。透過這些技巧,能夠靈活組織 API 結構,提升可讀性和安全性。此外,還探討子資源路由及命名空間等進階技巧,幫助開發者精細控制路由行為。接下來會探討控制器的實作。
本文介紹 Laravel 中的 Model,透過 Eloquent ORM 進行資料庫互動。內容涵蓋 Model 建立、資料表關聯設定,以及利用 Eloquent 特性來優化程式碼。目的是簡化資料庫操作,提高程式碼可讀性與維護性。接下來將開發後端 API,進一步實現系統功能。
我們已完成個人財務管理系統的後端核心功能,並進行了中期驗收,確認API的正確性和需求的達成。通過Postman測試各個API並檢查資料驗證,確保後續的前端整合能順利進行。接下來,將實作身份驗證機制並開始Nuxt.js前端開發,提升系統的整體品質與安全性。
單元測試為重構提供了安全防線,確保程式碼在修改後仍能正常運作。透過撰寫測試,我們能夠提高程式碼品質、預防回歸錯誤,並在重構過程中更具信心。測試的過程不僅幫助找出錯誤,也促使我們深入思考系統設計,從而優化整體架構。
單元測試不僅能發現錯誤,更是提升開發技能的關鍵工具。Laravel 提供強大的測試框架,讓我們可以輕鬆撰寫測試。建立測試資料庫、撰寫測試方法、使用 Factory 生成測試資料,能確保程式碼穩定,並幫助開發者在修改與重構中更有信心。持續撰寫測試能提高程式碼品質,並讓開發過程更有條理與安全感。
本文介紹了如何在 Laravel 中實作控制器,為個人財務管理系統建立完整的 CRUD API。我們實現了資料的建立、查詢、更新和刪除,並使用資料驗證提升應用安全性。未來將進行程式碼重構及 API 測試,持續優化應用程式。
本文介紹 Laravel 中的路由設定,討論手動定義路由、群組、前綴和中介層的使用。透過這些技巧,能夠靈活組織 API 結構,提升可讀性和安全性。此外,還探討子資源路由及命名空間等進階技巧,幫助開發者精細控制路由行為。接下來會探討控制器的實作。
本文介紹 Laravel 中的 Model,透過 Eloquent ORM 進行資料庫互動。內容涵蓋 Model 建立、資料表關聯設定,以及利用 Eloquent 特性來優化程式碼。目的是簡化資料庫操作,提高程式碼可讀性與維護性。接下來將開發後端 API,進一步實現系統功能。
你可能也想看
Google News 追蹤
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
投資新手大多從身邊市場開始著手,選擇台股市場入門,單筆投資或台股定期定額投資,隨著經驗累積,進入美股市場也是好選擇,這篇文章帶你前進美股投資,證券開戶選擇國內券商複委託,使用美股定期定額投資,並以國泰 CUBE App為例說明。 內容目錄: 1.一站式開戶:以國泰世華 CUBE App 為例
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件,包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化,幫助開發者提高工作效率,適合希望深入瞭解前端開發和網站架構的讀者。
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
這篇涵蓋了 Notion 建立網站的基礎,還有免費的教學資源,讓你不用寫程式,就能用 Notion 快速建立個人網站! Notion 簡易入口網站適合學生、求職、接案、小店家使用,能快速產出一個網站,節省成本又快速方便。
Thumbnail
在過去兩年中,我持續運用 Notion 進行個人管理,個人管理的模板也逐漸定型,藉此分享個人管理模板的使用心得。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
Thumbnail
Node.js是一個JavaScript運行環境。它使用了一個非阻塞、事件驅動的I/O模型,使其非常適合用於數據密集型的即時應用程序。簡單來說,Node.js允許你使用JavaScript來編寫伺服器端代碼。 nvm 安裝nvm Windows : 點擊 Releases · coreybut
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
投資新手大多從身邊市場開始著手,選擇台股市場入門,單筆投資或台股定期定額投資,隨著經驗累積,進入美股市場也是好選擇,這篇文章帶你前進美股投資,證券開戶選擇國內券商複委託,使用美股定期定額投資,並以國泰 CUBE App為例說明。 內容目錄: 1.一站式開戶:以國泰世華 CUBE App 為例
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件,包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化,幫助開發者提高工作效率,適合希望深入瞭解前端開發和網站架構的讀者。
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
這篇涵蓋了 Notion 建立網站的基礎,還有免費的教學資源,讓你不用寫程式,就能用 Notion 快速建立個人網站! Notion 簡易入口網站適合學生、求職、接案、小店家使用,能快速產出一個網站,節省成本又快速方便。
Thumbnail
在過去兩年中,我持續運用 Notion 進行個人管理,個人管理的模板也逐漸定型,藉此分享個人管理模板的使用心得。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
Thumbnail
Node.js是一個JavaScript運行環境。它使用了一個非阻塞、事件驅動的I/O模型,使其非常適合用於數據密集型的即時應用程序。簡單來說,Node.js允許你使用JavaScript來編寫伺服器端代碼。 nvm 安裝nvm Windows : 點擊 Releases · coreybut
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil