iT邦幫忙

2025 iThome 鐵人賽

DAY 18
0
Modern Web

設計 x 開發:從 Figma 到 Vue,打造 LINE 互動形象網站!系列 第 18

18 建立 Nuxt 3 開發環境 + 專案初始化與目錄結構說明

  • 分享至 

  • xImage
  •  

前言

在前篇分享了到 Nuxt 的優勢與應用情境,再來要分享如何建立 Nuxt 專案,與介紹專案整體的目錄結構。
如果是第一次使用 Nuxt,這篇可以作為不錯的起點。
若之前有用過 Vue CLI 或 Vite,也會發現 Nuxt 的架構其實非常貼近現代開發者的習慣,並在此基礎上進行了優化。

建立開發環境

  1. 在前面我們已經安裝 Node.js,這裡直接執行 npm 指令安裝,開啟 VS Code 選擇上方「 ••• 」→「 終端機 」→「 新增終端 」,輸入以下指令:
cd  <到要放專案的資料夾>
npm create nuxt <專案名稱>
  1. 安裝所有套件。
cd <跟專案同位置>  // 確認當前位置與package.json同一層,如果當前位置正確可以不做。
npm i
  1. npm run dev 啟動本地伺服器運行專案,瀏覽器輸入Local:網址 http://localhost:3000/ 就可以看到畫面囉!
    18 建立 Nuxt 3 開發環境 + 專案初始化與目錄結構說明 - 圖示1

專案結構說明

專案建立好後,先來了解Nuxt整體專案目錄的架構,有助於後續開發時知道各個資料檔案要歸類在哪裡,下方介紹每個資料夾要放入哪些檔案:

2025_liff_in_nuxt/
├── .nuxt/                 # Nuxt開發中,根據目錄結構生成。
├── .output/               # Nuxt build 後的輸出目錄(用於部署)
├── .env                   # 環境配置檔
├── assets/                # 靜態資源
├── components/            # Vue 元件
├── composables/           # 邏輯函式
├── content/               # 資料檔案
├── layouts/               # 自訂佈局
├── middleware/            # 中介層邏輯
├── pages/                 # 頁面檔案
├── plugins/               # 套件
├── public/                # 靜態公開檔案
├── server/                # 放後端邏輯
│   └── api/
│       └── order.js       # 對應 /api/order
├── app.vue                # Nuxt 應用入口點
├── nuxt.config.ts         # Nuxt 設定檔(支援 TypeScript)
├── package.json           # 套件與指令設定
├── tsconfig.json          # TypeScript 設定
└── README.md              # 專案說明
  • .nuxt:Nuxt 使用這個目錄來產生應用程式,請不要手動更改該目錄內所有內容。
  • .outputnpm run build 時會把整個應用程式編譯、打包,產出到該資料夾。
  • .env:設定環境變數的檔案。
  • assets:放置需要「參與編譯」的資源,例如 需經過轉譯或處理的圖片、字型、樣式檔 等,通常會透過 CSS 的 url()import 方式引入。
  • components:放置會重複使用的元件,例如 按鈕、卡片、提示區塊 等,在這個資料夾的檔案 Nuxt 會自動做引入,根據檔案路徑自動產生元件名稱,不需要再寫 import
  • composables:放置自訂的功能函式或 hook,例如 useRuntimeConfig()、useState(),在這個資料夾的檔案 Nuxt 也會自動做引入。
  • content:裡面可以放例如 .md.json.yml.csv 等內容檔案,Nuxt 會自動讀取這些檔案並轉換成可查詢的資料,讓你能在Vue 元件或頁面中以 內容管理(CMS) 的方式使用它們,但如果專案沒安裝 @nuxt/content,這個資料夾就不會有任何作用。
  • layouts:設定每個SFC要適用的整體佈局,例如 前台跟後台的導覽列基本上不同,這時候就可以分 public.vuedashboard.vue 分別設定在不同的layout裡。
  • middleware:「路由的中介層」使用者到達某個特定頁面之前要執行的程式,例如 判斷是否有登入、切換語言 等。
  • pages:放每個頁面的位置,例如 login.vueorder.vue 等,會自動建立路由。
  • plugins:用來初始化第三方套件或進行全域設定。放在此目錄的檔案會在 Nuxt 專案執行階段(runtime)自動加載,可以用來載入例如 Element PlusSweetAlert2 等外部套件,並透過 defineNuxtPlugin()provide 方法,將功能注入到 NuxtApp,讓套件透過 useNuxtApp() 在元件內可以使用。
  • public:放置不需要經過編譯,檔案名稱固定,要讓瀏覽器直接能訪問的靜態公開檔案,例如 <img src="/images/photo.jpg" />photo.jpg 圖檔 等。
  • server:Nuxt 專案中用來放置後端邏輯與 API 函式的資料夾。server/middleware/ 撰寫中介層邏輯,透過 Nitro 處理 SSR 與 API 之間的請求;Nuxt 採用 file-based routing(檔案自動路由機制),它會自動把 server/api/ 底下新增 .js.ts 檔案,自動被註冊為一個 API 路由端點。
    ❕這邊提醒,如果將檔案直接放在 server/ 根目錄,就不會被自動執行或路由掛載,也就是不會自動當作 API 路由註冊哦。
  • app.vue:Nuxt 應用入口點,建立專案時自動包含的一個預設元件。
  • nuxt.config.ts:整個 Nuxt 專案的設定檔,包含套件、meta 標籤、自動引入路徑、路由、CSS 等。
  • package.json:管理指令與專案的套件,可在此查看套件版本。
  • tsconfig.json:是 TypeScript 的設定檔。即使你的 Nuxt 專案使用的是 JavaScript,這份檔案也會存在。
  • README.md:專案的介紹說明,語法採用markdown。可放置在最外層,專案部署到github時在下方會直接呈現介紹。

(參考來源 Nuxt 目錄結構

簡單來說,一開始我們可以先記住並了解這幾個比較常用的:

  • app.vue → 整個 Nuxt 應用程式的入口點
  • pages/ → 這是 Nuxt 最核心的功能之一,用來建立網站的各個頁面和路由。
  • components/ → 放置重複使用的元件
  • plugins/ → 初始化功能或第三方套件
  • assets/public/:這兩個用來存放資源
  • nuxt.config.ts → 專案的設定檔
  • package.json:管理所有套件和指令

結語

建立 Nuxt 3 開發環境的流程其實很簡單,因為 Nuxt 已經幫我們做好很多事💪,從一開始的 npm create nuxt 到啟動本地伺服器,只要跟著步驟就能順利跑起來。掌握整體的目錄結構,也能幫助我們在開發時快速找到資料夾位置、建立清楚的專案架構完美開發✨。

作為入門的第一步,在 Nuxt 專案開始撰寫畫面、串接 LIFF 前,先把 Nuxt 專案打好底,接下來我們就能開始根據前面製作好的設計,實作網頁畫面 + LIFF 啦!敬請期待🤩

參考資料與延伸閱讀

Nuxt 官方參考來源
Nuxt 目錄結構參考來源


上一篇
17 Nuxt 介紹:基於 Vue 的進階應用框架解析
下一篇
19 從專案初始化到畫面完成!(上):用 Nuxt 完成第一版網站功能
系列文
設計 x 開發:從 Figma 到 Vue,打造 LINE 互動形象網站!27
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言