Nuxt - 開始一個 Nuxt 專案 | 邊緣邊緣人的技術筆記

如果要用 Vue 寫 Server-Side-Render 的話，通常會想到 Nuxt。

Nuxt 除了可以寫 SSR 之外，也可以寫 SPA，以及生成靜態網站。
但他原本是一個「什麼功能都幫你封裝好」的框架，讓你可以透過簡單的設定，就做出一些常用的功能。

如果有用過 Vue CLI 的話，會覺得 Nuxt 跟他有點像，但 Nuxt 有更複雜的部份，算是一個更進階的框架。

今天來講一下如何安裝 Nuxt 以及寫個簡單的 Hello World。

安裝

如果你是用 npm 的話，可以直接使用以下指令安裝：

npx create-nuxt-app nuxt-sample

如果你的本地端還沒有安裝 create-nuxt-app ，此時他會先幫你下載好，下載完後，開始運行 nuxt 安裝程序。

首先，跟 Vue CLI 相同，他會問你很多專案設定的問題，其中有幾個為了方便說明，請先這樣選：

UI framework : None
Nuxt.js modules : Axios (忘記裝也沒關係，之後可以補)
Rendering mode : Universal (SSR / SSG) (這個就很重要)
Deployment target: Server (Node.js hosting)

選完選項之後，安裝程式就會在當前目錄下創建一個名字是 nuxt-sample 的目錄，並在裡面安裝 nuxt 專案。

附註

根據 nuxt-create-app 版本不同，預設的專案架構會稍有不同，如果你發現你的架構中沒有我說的檔案或是目錄，請自己創一個。

確認模式

在開始寫第一個頁面之前，先確認一件事。請在專案跟目錄找到 nuxt.config.js，他是 nuxt 的設定檔。
他的內容會像是這樣：

// nuxt.config.js
export default {
  // 很多設定...
}

請確認這些設定中沒有 mode，或者是有 mode: 'universal'，這代表 nuxt 目前是 SSR 模式。

寫出第一個 Nuxt 頁面

請新增一個 pages 目錄，並在底下新增一個 index.vue，可以隨便寫些內容，比如：

<template>
  <div>
    <h1> {{ message }} </h1>
  </div>
</template>

<script>
export default {
  data(){
    return {
      message: "Hello World"
    }
  }
}
</script>

(如果他已經有 index.vue 的話，你也可以直接取代掉他的 index.vue)

接著請到 terminal，執行 npm run dev，等他跑完之後，用瀏覽器訪問 http://localhost:3000。就可以看到 Hello World 了喔。

我已經開始寫 SSR 了嗎?

請在開啟的網頁上點右鍵，選「檢視網頁原始碼」。你會發現裏頭可以找到 <h1>Hello World</h1> 這段 html。這個是 Vue 元件渲染出來的內容。

若你有用過 Vue CLI 生成的專案，你可以試著對他「檢視網頁原始碼」，你會發現其中不會包含 Vue 元件中的內容，通常只會有個<div id="app"></div>，而 Vue 元件的內容不會出現在網頁原始碼上。

為什麼會不同呢？
因為當瀏覽器請求 http://localhost:3000 的時候，Nuxt 會先在 server 端根據 vue 元件渲染出 html 檔案(包含上面那段 <h1>Hello World</h1>)，接著回傳給瀏覽器。所以瀏覽器看到的 html 包含 Vue 元件的內容。

這代表，我們的確已經用 Nuxt 寫出一個 SSR 頁面了