14. nuxt 框架

1. nuxt 是一個 vue 用來做 SSR 的框架（建構在Node之上）
   1. SSR：Server Side Rendering 每一個不同頁面就回傳一份不同的 html 檔案 ，SEO好，但 loading 較大
   2. SPA：Single Page Application 用 JavaScript 把畫面 render 出來，不會載入新的 HTML 檔案，不利于SEO ，先慢後快
2. nuxt 官網：https://nuxtjs.org/
3. 用 npx 或 npm 來建立專案

   npx create-nuxt-app <project-name>
   npm init nuxt-app <project-name>
   

    

4. 專案建立後，可以用 dev 啟動專案

   cd <project-name>
   npm run dev
   

    

5. 專案建完後，幾個重要目錄
   1. pages：建立頁面，例如建立 about.vue，會有自動路由 http://網址/about
   2. layout：佈景，編輯 default.vue，會影響所有頁面
      • 其中 <Nuxt /> 就是 nuxt 產生的內容（等同 router-view）
      • <Nuxt />只能在 layout 中使用。
   3. assets：用來放靜態元件，但此資料夾仍會被 nuxt 處理，例如壓縮圖片、CSS檔等
   4. static：也是用來放靜態元件，但不會被 nuxt 處理，例如影片檔、pdf檔
   5. middleware：中間層，從路由到頁面之間的中間層，可以用來做一些共同的檢查、驗證
   6. plugins：全局套件，會自動注入到nuxt.config.js中，全局可用
   7. store：vuex的部份
   8. components：頁面最小的單位組件，可以直接使用，無須 import
       
6. 讓 nuxt 支援 scss，需安裝以下套件

   npm install --save-dev sass sass-loader fibers