這篇稍微介紹一下 nuxt.js 的設定檔： nuxt.config.js。

可以將以下專案 clone 下來，了解一下基本目錄結構。

github repository: 002-create-nuxt-app

指令：

git clone -b 002-create-nuxt-app --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install
npm run dev

官網介紹 configuration 連結，
基本上從這篇結束後就不再貼這些 nuxt 官方連結了(超級偷懶)，
文件是工程師的好朋友，遇到問題來查文件就對了。

Configuration

有的設定自己是沒用過的，剛好趁這個機會全部看一遍。
以下會逐一帶過 nuxt.config.js 中提供的屬性，
可能還是會有遺漏些屬性沒介紹到，
因為官方文件更新的頻率滿高的，建議還是要時常回去更新，
常常會挖到寶呢！
此外每個屬性，還可能有非常多細節，
以下也只能根據自己的經驗點到為止，讓未來自己再遇到問題的時候，知道該如何 google 關鍵字。

build

Nuxt.js 提供客製化 webpack 設定，都寫在屬性 build 當中，例如：

• analyze: true 透過 webpack-bundle-analyzer 協助開發者優化 Nuxt 應用。
  之後有 webpack 效能調校的章節在細部說明。
• extend 可擴充 webpack config，並針對 isClient 和 isServer 去調整與優化。
• 等等還有很多......

這邊只簡單提到這兩點，個人目前有用到的。

css

引入 global 的樣式

dev

此屬性，可定義 development or production 模式：

• 開發(development)時強制為 dev: true，如：npm run dev。
• 部署(production)時強制為 dev:false，如：npm run start、npm run build、npm run generate。

env

此屬性，可定義環境變數。

例如：

• 在 nuxt.config.js 中

env: {
  baseUrl: process.env.BASE_URL || 'http://localhost:3000'
}

設定好 baseUrl 之後，即可透過以下兩種方式使用：

• process.env.baseUrl
• context.env.baseUrl

generate

此屬性，可定義每個動態路由的參數，依據這些路由配置生成對應的目錄結構的靜態文件(static HTML)。
之後會需要將 blog 部署到 github page 就需要在這設定，
而這個部分會在這系列文章最後幾篇，部署教學時才會提到。

head

此屬性，用於定義預設 meta 標籤，
此處定義的 meta 以全站共用為主，
當然也可以於各個頁面(pages) 覆寫掉共用的 meta。

loading

此屬性，當 nuxt 應用在切換頁面時，會有預設的加載進度條，可以自己設定顏色或是關閉顯示。

modules

此屬性，可方便快速添加 nuxt 的套件，並客製化設定，也可以自己寫。

plugins

此屬性，用於處理在 vue instance 被實例化之前，所需要運行的 js 或添加的插件。

rootDir

nuxt 應用的根目錄。

router

此屬性，可以覆蓋 nuxt 應用預設的 vue-router 配置。

srcDir

默認值為 rootDir，基本上是從現有專案中導入 nuxt， 才可能需要調整的屬性。

transition

此屬性，可以定義換頁時預設的過度效果。

ignore & ignorePrefix

• ignore: 可以客製化排除不想被 build 的 pages、layout、middleware 等等檔案
• ignorePrefix: 預設為 String: '-'，只要檔案名稱以 - 開頭，出 build 時即會被忽略。

loadingIndicator

在 mode: 'spa' 的模式下，由於沒有做 ssr，可以透過 nuxt 預設方式顯示 spinner。

mode

可設定為 universal 或是 spa。

watch

可監聽指定檔案更改時重啟 server。

小總結

Nuxt 介紹的部分在這篇結束了，接下來的篇幅會開始實作，
簡單介紹一下開發步驟，

接連六篇(Day5~Day10) 處理所有個人偏好的設定，例如：

• pug & stylus & reset css
• storybook & vuetify & nuxt 的整合
• plop 套件方便快速建立元件

開發 layout 共用模板

分為 default, admin, error。

開發 UI 元件(8天左右)

開發 blog 所需的所有 UI 元件，
因此這個階段，只能透過 storybook 來預覽元件。

使用 firebase

• 登入和自動登入
• Vuex 開發相關所需要的 API

完成所有頁面切版和串接 API

優化 ＆ 部署

大家明天見。