Logo Amanda's Blog
  • Home
  • About
  • Skills
  • Experiences
  • Education
  • More
    Side Projects
  • Posts
  • Notes
  • Github
  • LinkedIn
  • English
    English 中文
  • Dark Theme
    Light Theme Dark Theme System Theme
Logo Inverted Logo
  • Posts
  • Introduction
  • Presentations
    • Getting Started
  • Frontend
    • Vue
      • Nuxt
  • Tool
    • Typora
  • Shortcodes Sample
Hero Image
Nuxt

Nuxt3 Nuxt 前端,整合 Net 後端全站開發筆記 專案準備 git clone 手動指令安裝 pnpm 安裝相依套件:pnpm install 建立正式編譯檔:pnpm run build 啟動開發伺服器:pnpm run dev pnpm啟動完畢 專案設定的 url 是 設定完畢後,pnpm run dev 開發伺服器完畢,可使用F5 啟動偵錯 測試帳號準備與登入 檔案結構目錄 共同開發說明>開發注意事項>前端開發>檔案結構目錄 撥空了解 Nuxt 結構目錄 https://clairechang.tw/2023/07/07/nuxt3/nuxt-v3-directory-structure/ 請深入閱讀必要了解項目 pages/、layouts/、components/ → 頁面結構與 UI 組合 composables/ → 邏輯封裝、狀態管理 plugins/、middleware/ → 應用啟動與權限控制 stores/ → 使用 Pinia 管理狀態 檔案結構目錄-components component/{pages Name} 作為子元件與父元件 ( pages.vue ) 溝通使用 抽離元件邏輯,避免 pages/{router}/{subRouter}.vue 理由: 行數過多不好閱讀: SOLID 的第一條,SRP ,一個模組不應處理過多事情 頁面可以精簡僅負責整合 api 回傳與 UI 顯示、pages/*.vue 行數控制在 300 行以內。

  • nuxt
Thursday, November 27, 2025 | 6 minutes Read
Navigation
  • About
  • Skills
  • Experiences
  • Education
  • Side Projects
Contact me:
  • amanda@ruru910.com
  • https://github.com/adaruru
  • Amanda Chou
  • 0921825964

Liability Notice: This theme is under MIT license. So, you can use it for non-commercial, commercial, or private uses. You can modify or distribute the theme without requiring any permission from the theme author. However, the theme author does not provide any warranty or takes any liability for any issue with the theme.


Toha Theme Logo Toha
© 2025 Copyright.
Powered by Hugo Logo