iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
2

這篇寫常用情境

  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 專案結構還得做點髒活,幫元件搬家 (髒度依你命名是否統一、元件拆得乾不乾淨而定)

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

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

下一章講解懶人包結構


上一篇
03. Nuxt.js 怎麼處理 SSR 問題?擔任什麼角色?
下一篇
05. Nuxt 產生簡單頁面
系列文
Nuxt - 使用 Vue.js 做 SSR 的第一哩路32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
HunterLiu
iT邦新手 4 級 ‧ 2018-10-28 16:52:06

感謝分享~
一起加油吧!

分享一下,最近發現還可以這樣安裝舊版的 Nuxt:

npx create-nuxt-app@1.2.2
Ralph iT邦新手 5 級 ‧ 2018-10-29 00:27:38 檢舉

感謝 Hunter

0
klgt13145220
iT邦新手 5 級 ‧ 2021-05-30 12:44:26

您好想請問我現在手頭上有一個Vue spa的專案
後端是php,但只是開api給我串,前後端完全分離
也可以裝nuxt解決SSR的問題嗎?(要弄分享文章功能讓FB的爬蟲 爬到我vue meta生成的meta資訊)

我要留言

立即登入留言