用NuxtJS取代Webpack＋Express

Edmond Yip -

簡化版的Vue2架構

發現了NuxtJS這東西，可以簡易取代webpack+express+router的部份，雖然我已經完成了Webpack+Express架構部份。但是router跟server side render沒NuxtJS方便，而NuxtJS的概念是跟據React的NextJS做成，其中hot reload部份對開發十分有幫助。

Nuxt.js這東西是整合了Vue2 + Vue-Router + Vuex + Vue-Meta + Express + Webpack而成，能快速組成基本開發架構，省下不少時間。

  • Ubuntu 16.04.1 LTS
  • NodeJS 6.9.4
  • npm 3.10.10
  • VueJS 2.0
  • Webpack 2.1.0-beta.22
  • Express 4.14.1
  • PM2 2.3.0
  • NuxtJS 0.9.6
  • Forever 0.15.3

簡單安裝到Project Menu

$ npm install -g vue-cli

先安裝vue-cli

設置開發環境

$ mkdir nuxt
$ cd nuxt
$ sudo nano package.json

先開一個資料夾來存放Nuxt，再開一個package.json file

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

設定package.json

npm install --save nuxt

使用npm安裝Nuxt

$ mkdir pages
$ sudo nano pages/index.vue

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

在pages資料夾內新增一個index.vue

$ npm run dev

可以到http://localhost:3000 測試一下

管理

本來打算用PM2管理，但在開發環境下的Hot reload沒反應，所以改用forever作管理程式

$ npm install forever
$ forever start -c "npm run dev" ./