- 安裝
- 前提
- Node
- 文字編輯器
- Terminal(終端機)
- 從零開始
- 設定專案
- 安裝 Nuxt
- 新建第一頁
- 啟動專案
- 補充
- 使用 create-nuxt-app
- Routing
- Routes 自動化
- Navigation
- 資料夾結構
- 資料夾
- pages/
- components/
- assets/
- static/
- nuxt.config.js
- package.json
- 更新
- 開始
- Yarn
- NPM

# 安裝
## 前提
### Node
- [node](https://nodejs.org/en/download/) >= v8.9.0, 但建議最新版本
### 文字編輯器
- 建議 [VSCode](https://code.visualstudio.com/).
### Terminal(終端機)
- 建議 VSCode 的 [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal).
## 從零開始
- 只需要 1 的檔案 和 1 個資料夾, 即可開始建立 Nuxt.js 專案.
### 設定專案
1. 建立一個空資料夾, 以你的專案名稱命名
2. cd 切換到資料夾下
3. 建立一個 `package.json`:

mkdir <project-name>
cd <project-name>
touch package.json

4. 打開 package.json, 貼上以下內容:

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}

- `scripts` 定義了 Nuxt.js 的指令, 你可以下 `npm run <command>` 啟動專案.
- `package.json` 就像是你專案的 ID card.
### 安裝 Nuxt
1. 透過 `npm` 或 `yarn` 把 `nuxt` 安裝到專案裡:

npm install nuxt
yarn add nuxt

- 這段指令
- 會將 `nuxt` 加進專案中, 讓他成為專案的 dependency
- 會自動在 `package.json` 的 dependencies 區段新增
- 會建立`node_modules/` , 儲存所有你安裝的 packages 和 這些 packages 的 dependencies.
- 會建立 `package-lock.json` 或 `yarn.lock`, 確保安裝好的 packages 具有 consistent install 和 compatible dependencies.
### 新建第一頁
- Nuxt.js 會將所有 `pages/` 裡的 `*.vue` 轉成 route.
1. 建立 `pages/`:

mkdir pages

2. 在 `pages/` 裡建立一個 `index.vue`:

touch pages/index.vue

- 因為他是 home page, 所以必須叫他 index.
3. 打開 `index.vue` 並貼上以下內容:

<template>
  <h1>Hello world!</h1>
</template>

### 啟動專案
- 輸入以下指定, 將專案啟動:

npm run dev
yarn dev

> 要在 development mode 下執行, 使用 dev 的指令.
- app 就會在 http://localhost:3000 上運行.
> 在 development mode 下啟動時, 他會監聽大部分資料夾底下的檔案異動, 所以不需要重啟.

> 當你下 dev 的指令, 他會建立 `.nuxt/`. 請把他從 version control 中 ignored. 你可以建立一個 `.gitignore` 檔案, 再加進 `.nuxt/`.
### 補充
- 在 `pages/` 裡建立一個 `fun.vue`. 內容同 index.vue, 你就會在 http://localhost:3000/fun 看到新頁面.
> 在 `pages/` 裡建立一個 `more-fun/`, 再放入一個 `index.vue`. 這樣做的結果跟直接在 `pages` 建立一個 `more-fun.vue` 一樣.
> ```
> ...
> pages/
> more-fun/
> index.vue
> more-fun.vue
> ...
> ```
## 使用 create-nuxt-app
- 確認你已安裝
- npx (從 NPM 5.2.0 開始預設都會有) 或
- npm v6.1 或
- yarn.

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

- 他會問你一些問題, 像是
- 專案名稱
- Nuxt 的選項
- UI framework
- TypeScript
- linter
- testing framework
- 回答完後, 就會安裝所有 dependencies.
- 下一步就是 cd 切換到專案裡並啟動他:

cd <project-name>

npm run dev 
# 或
yarn dev

- app 就會在 http://localhost:3000 上啟動.
# Routing
## Routes 自動化
- 大部分的網站不會只有一頁 (像是 home page, about page, contact page 等). 要能顯示這些頁面, 你需要 Router.
- 當你用 Vue 建置 app, 你必須要為 `vue-router` 設定 `router.js`, 手動把所有 routes 都加進去.
- 而 Nuxt.js 會依據 `pages/` 裡的 Vue 檔案, 自動產生 `vue-router` 的設定給你. 代表你不再需要寫 router config. 除此之外, Nuxt.js 也會自動幫你的 routes 做 code splitting.
- 換句話說, 你只要在 `pages/` 裡建立 `.vue`, 你的 app 就會有 routing 的功能.
## Navigation
- 要在頁面間 navigate, 你應該使用 [NuxtLink](https://nuxtjs.org/guides/features/nuxt-components#the-nuxtlink-component) component.
- NuxtLink component 包含在 Nuxt.js 裡面, 所以不需要像其他 components 一樣還要 import. 他跟 HTML 的 `<a>` 類似, 他不是用 `href="/about"` 而是用 `to="/about"`.
- 如果之前用過 `vue-router`, 可以把他想成是 `<RouterLink>`.
- 到 `index.vue` 這一頁的連結:

<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>

- 網站裡所有的連結都用 `<NuxtLink>`. 如果要到其他網站, 再用 `<a>`.

<template>
  <main>
    <h1>Home page</h1>
    <NuxtLink to="/about">
      About (internal link that belongs to the Nuxt App)
    </NuxtLink>
    <a href="https://nuxtjs.org">External Link to another page</a>
  </main>
</template>

# 資料夾結構
- Nuxt.js app 預設的結構, 對於小型或大型的 app 都很好上手. 你可以自由管理你的 app, 照你喜歡的方式建立其他資料夾.
1. 建立一些尚未存在的資料夾和檔案.

mkdir components assets static
touch nuxt.config.js

...
assets/
components/
static/
nuxt.config.js
...

- 這些是建置一個 Nuxt.js app 主要需要的資料夾和檔案.
> 建立出這些名稱的資料夾就能夠開啟他們的功能.
## 資料夾
### `pages/`
- 包含 app 的 views 和 routes.
### `components/`
- 是放所有 Vue.js components 的地方, 然後再將他們 import 到頁面裡.
- 有了 Nuxt.js, 你可以建立 components 讓他們自動 import 到 .vue 裡, 代表你不需要手動 import 到 script 區段. 如果你將 components 設定為 true, Nuxt.js 就會掃描到並自動 import.
### `assets/`
- 包含 uncompiled assets, 像是 styles, images, fonts.
### `static/`
- 直接 map 至 server root, 包含的檔案必須保持檔名, 不會再異動.
### `nuxt.config.js`
- 是 Nuxt.js 設定的單一窗口. 如果你要加入 modules 或 覆蓋預設的設定值, 可以在這裡改.
### `package.json`
- 包含所有 app 的 dependencies 和 scripts.
# 更新
- 如果要升級到 v2.14 使用 static hosting, 你需要在 nuxt.config.js 加入 target:static.

export default {
  target: 'static'
  ...
}

## 開始
1. 檢查版本的 release notes, 確認有沒有任何針對這特別的 release 額外的指示.
2. 更新 `package.json` 的 `nuxt` package 指定版本.
## Yarn
3. 移除 `yarn.lock`
4. 移除 `node_modules/`
5. 執行 `yarn` 指令
6. 安裝完畢後, 再跑一次測試, 確認需不需要也更新其他的 dependencies. 可以用 `yarn outdated`.
## NPM
3. 移除 `package-lock.json`
4. 移除 `node_modules/`
5. 執行 `npm install` 指令
6. 安裝完畢後, 再跑一次測試, 確認需不需要也更新其他的 dependencies. 可以用 `npm outdated`.