DAY 19 - Nuxt 專案目錄結構

今天來一起分解 Nuxt 專案架構，我們在前面有提到 Nuxt 優點之一易懂的目錄架構

即使沒有這篇單看目錄架構也十分好理解上手(關)
先等等先別關啊 !!

這篇除了會帶你看目錄架構讓你更熟悉架構外，因為 Nuxt 是屬於漸進式框架這邊也會使用一些簡單指令新增目錄還有一些小知識分享，所以還是有需要的。

初始目錄架構

照著上篇Vue + Vite + Nuxt 建立專案，享受最優質的 DX 建立完專案後，會發現我們的目錄架構長這樣

Nuxt3 //專案名稱
 - .nuxt //Nuxt 暫存資料夾
 - node_modules //npm 存放套件區
 - public       //靜態資源(不需要編譯的檔案)
   favicon.ico //icon圖示
 - server   //伺服器端資料夾，可建立api
   .eslintrc.cjs  //eslint 設定檔
   .gitignore //預設不上傳的內容
   .prettierrc.cjs // prettier 設定檔
    app.vue //vue 進入點
    nuxt.config.ts //nuxt設定檔
    package.json  //依賴的套件、指令
    tsconfig.json //typescript 設定檔

圖示

試著擴增資料夾

咦 ! 怎麼只有 app.vue ，東西好少　！

會看到根目錄下除了一些設定檔 nuxt.config.ts、tsconfig.json、.eslintrc.cjs、.prettierrc.cjs，實際上我們會使用到的只有 app.vue，會發現它架構十分單純簡單，接著我們可以透過指令新增我們所需的資料夾，像是 ```page、layout、component、composables`` 等。

Nuxt 官方文件有提到可利用指令新增資料夾，讓你的架構更完整（依需求擴增）

新增元件

npx nuxi add component 元件

新增一個元件 HeaderItem

npx nuxi add component HeaderItem

多了一個 components 資料夾，我們可以透過這樣方式慢慢新增自己專案，來建立自己的完整專案架構

接著我們可以將一些常用都新增上去

npx nuxi add composable test //新增 composable
npx nuxi add layout default //新增 layout 
npx nuxi add plugin analytics // 新增 plugin
npx nuxi add page about //新增 page

這時候專案架構變成如下

而我們常使用的 Nuxt 專案結構，包含了assets(待編譯)、component(元件)、composable(共用邏輯)、layout(共通)、plugin(插件)、page(頁面View)，再接下來開發的日子裡，你會常使用這些資料夾，如果有安裝 pinia ，則會多出 store 資料夾，了解他基本用途、分類，之後更可以輕鬆上手專案。

官方也有更詳細的目錄結構介紹，想更深入了解使用及細節可查看官方文件

這邊也提供建置的範本 nuxt3-eslint給大家參考

認識常見資料夾

快跟他們當好朋友 ! 記住他是誰 !

• Assets
  等待編譯的檔案，像是 Scss、Sass、less、
• Compnents
  拆分的元件
• composable
  共用程式碼、邏輯、函式
• page
  頁面 View
• layouts
  共通區塊，預設 default.vue ，亦可設定指定頁面的 layout 區塊
  -plugins
  第三方插件引入區
  -store
  放置 pinia 狀態管理庫

常用設定檔

• nuxt.config
  Nuxt 設定檔，可在此處設定是否要自動引入設定相關參考
• .eslintrc.cjs
  eslint 設定檔，設定你的 eslint 規範或是使用(抄)人家的
• .prettierrc.cjs
  prettier 設定檔，設定你的 prettier，可看官方自行設定喜歡格式
• tsconfig.json
  typescript 設定檔