了解 Nuxt 架構解析

nuxt 指令

在 package.json 有一些指令可以操作 nuxt

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
},

npm run dev 開發環境時使用
npm run build 打包專案，分別有 Client 端與 Server 端
npm run start 用 Node.js 起一個 Server

資料夾功能

pages - 放頁面的地方，新增頁面後，會自動產生新頁面名稱的 router
layouts - 頁面共用的版型，像 header、footer 會重複的部分，可以寫在 default.vue，供每頁共用

layouts/default.vue

<template>
  <div>
    <header>header</header>
    <Nuxt />  // Nuxt 為 pages 裡面的頁面，像是 Vue Cli 的 router-view
    <footer>footer</footer>
  </div>
</template>

components - 頁面的最小單位組件
assets - 需要經過 Nuxt 編譯打包、壓縮的檔案，如 CSS、圖片等
static - 不需經過 Nuxt 編譯的檔案，如 favicon、音樂、Zip、自己寫的 json 等
store - 操作 Vuex 的地方
middleware - 進入頁面前需要做的中間層，如驗證檢查等
plugins - 自定義的 Global nuxt 套件，會從 nuxt.config.js 自動注入

🔸create-nuxt-app v3.7.1 安裝完後沒有 layout 以及 assets 目錄可以自己新增

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。