這篇寫常用情境

1. 產生新 Nuxt 專案
2. Vue.js SPA 寫一半，得追加 SSR

產生完整 Nuxt 專案

入門寫 Vue.js，新專案用 Vue-cli 產生，方便又快速
Nuxt 也有類似的全家桶 - create-nuxt-app，幫你生出整套結構。

我習慣用 yarn，先產生個頗棒的 Nuxt App

$ yarn create nuxt-app awesome-nuxt-app

yarn create 先幫你全域安裝 create-nuxt-app，並執行全家桶中的產生器
等同於

$ yarn global add create-react-app
$ create-react-app my-app

若你習慣用 npm，v5.2.0 後新增 npx 命令
專案產生完成後，自動移除 create-nuxt-app，全域環境乾乾淨淨

npx create-nuxt-app awesome-nuxt-app

詳細說明其他鐵人參賽者有寫，參考這篇文章

讓專案跑起來

接著切到專案目錄下，安裝相依套件

$ cd <project-name>
$ yarn install  /* npm install */

測試專案正常運作 (檢查 http://localhost:3000)

$ npm run dev

舊版安裝方式

寫文時 Nuxt 2.0 已釋出一陣子，若你這麼不捨舊版，可透過 vue-cli 產生，步驟如下

1. 安裝 Vue-cli

   $ npm install -g @vue/cli @vue/cli-init  /* yarn global add @vue/cli @vue/cli-init */
   

2. 指定 Vue-cli 拉 nuxt 樣板

   $ vue init nuxt-community/starter-template <project-name>
   

3. 同前一段，讓專案跑起來

手把手從零開始

若你只想幫 Vue.js SPA 加上 SSR，也沒問題，手動產生 Nuxt 需要的目錄，步驟如下

1. 安裝 Nuxt

   $ yarn add nuxt /* 或 npm install --save nuxt */
   

2. 新增 Nuxt 命令

   /* package.json */
   {
       "name": "my-vue-spa-project",
   	"script": {
   		"dev": "nuxt"
       }    
   }
   

3. 建立頁面

   $ mkdir pages
   

   @pages/index.vue

   <template>
   	<h1>Hello World!</h1>
   </template>
   

4. 測試專案正常運作 (檢查 http://localhost:3000)

   $ yarn run dev
   

到此 Nuxt 已加入原 Vue.js 專案目錄，重構成 Nuxt 專案結構還得做點髒活，幫元件搬家 (髒度依你命名是否統一、元件拆得乾不乾淨而定)

5. 按 SPA Vue-Router 定義路由，把元件 vue file 依相同規則搬進 /pages 下

順利的話開啤酒，後面留一篇來講「不順」怎麼辦

下一章講解懶人包結構