要在 Nuxt 使用 vuex ，直接在 store 新增 index.js，並用函式的方式回傳 state，加入 actions、mutations、getters，即可直接使用。

在開發網頁時，或多或少會用到 localStorage 的方法去存取資料，在取得物件時，需做一些 JSON 的轉換，便能將資料取出

1
2

localStorage.setItem('data', JSON.stringify({ name: 'bobee' }));
console.log(JSON.parse(localStorage.getItem('data')));

但每次都要這樣轉換其實有點麻煩，如果有很多地方都要使用這個方法，就必須寫一堆 JSON.stringify、JSON.parse，為了更方便使用，可以將方法包裝，供全站使用。

我們常常會使用到套件，幫助網站快速達到想要的效果，在 NUXT 要怎麼自行撰寫套件、如何整合現有的套件、或是整合第三方套件呢?

使用者網址輸入錯誤，或頁面發生錯誤的時候，會在畫面上給一個 404 的頁面，在 Nuxt 我們也需要設置 404 的頁面

loading 開關

預設 loading 開關為 true，如想關閉 loading 可在 nuxt.config.js 設定

Nuxt 設置路由非常方便，只要新增好 component 就會自動設定好頁面

Router 更換頁面的進入點

在 layouts 可以放進每頁共用的部分，與一個隨著 pages 變化內容的進入點，相當於在 Vue Cli 的 router-view ，在 Nuxt 的進入點用 Nuxt

做好 SEO，可以增強網站的自然搜尋排名，不同的頁面通常會有不同的 title、關鍵字，Nuxt 可以幫我們做到這件事。

Global Settings

設定整個網站的 SEO，在這裡你可以定義所有的 meta

因為 Nuxt 又有牽扯到 Server 的部分，所以 Nuxt 的生命週期會跟 Vue 的 Nuxt 有一點不太一樣

nuxt 指令

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

1
2
3
4
5

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

安裝 Nuxt

安裝 Nuxt 前，先檢查 Nodejs 最少需要 v10.13 的版本，如小於此版本，請升級 Nodejs