---
# System prepended metadata

title: 安裝

---

- 安裝
  - 前提
    - 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`:
```bash
mkdir <project-name>
cd <project-name>
touch package.json
```
4. 打開 package.json, 貼上以下內容:
```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` 安裝到專案裡:
```bash
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/`:
```bash
mkdir pages
```
2. 在 `pages/` 裡建立一個 `index.vue`:
```bash
touch pages/index.vue
```
- 因為他是 home page, 所以必須叫他 index.
3. 打開 `index.vue` 並貼上以下內容:
```htmlmixed
<template>
  <h1>Hello world!</h1>
</template>
```
### 啟動專案
- 輸入以下指定, 將專案啟動:
```bash
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.
```bash
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 切換到專案裡並啟動他:
```bash
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` 這一頁的連結:
```htmlmixed
<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>
```
- 網站裡所有的連結都用 `<NuxtLink>`. 如果要到其他網站, 再用 `<a>`.
```htmlmixed
<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. 建立一些尚未存在的資料夾和檔案.
```bash
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.
```javascript
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`.