用 VUE + EXPRESS + 建置前後端網站

最近想要重置自己的履歷介紹,並將專案整理後放上來。

因為有的專案會用到跨域的 API,為了解決這個問題,就考慮要自己弄個後端 SERVER 來處理跨域問題,因此這次改版決定將 Vue 和 Express 通通整合進來,並將步驟記錄下來以供日後參考使用。

使用套件

預計會使用的套件如下:

  • VUE v2
  • Vue-Cli
  • Webpack
  • Axios
  • Node
  • Express
  • Cors
  • Nodemon

網站結構

我會將 Express 放在 Vue 專案底下,因此結構目錄大概長這樣:

Plain Text

安裝 Vue

使用 Webpack 建立專案

首先,用 Webpack 安裝 Vue-cli,可以自行修改細部的設定,也可以使用「Enter」大法一直按下一步,直到安裝完成。

Shell

安裝 Axios 套件

先安裝 Axios 套件

Shell

再打開 src/main.js 引入 axios

JS
src/main.js

使用 Axios

打開 vue 預設的檔案 HelloWorld.vue,將我們預先設計好的 api 寫進來。這邊用了兩個 function get & post API:getmsg() 以及 postmsg(),剩下的 API Router 設定會在 Express 完成。

HTML
components/HelloWorld.vue
JS
components/HelloWorld.vue

弄好之後可以先看一下畫面,使用指令 npm run dev,畫面如下所示:

前端 Vue 預設的 port 為:http://localhost:8080


安裝 Express

安裝 Express 產生器

第一次使用要先安裝他的產生器:

Shell

建立 Express 專案

Express 可以選擇要使用的「樣版引擎」以及「CSS 預處理器」,如果都沒有指定,預設就是:

  • 樣版引擎:jade
  • CSS 預處理器:原生的 css

我自己是習慣使用 ejs 跟 scss,所以我會下這樣的指令新建專案:

Shell

後端預設的 port 為 http://localhost:3000,畫面如下:

設定 Router

接著在 server/routes/index.js 設定 router

JS

使用 nodemon 自動重啟伺服器

nodemon 可以說是後端的 livereload。我們更改 server 端的程式碼後,不用關閉伺服器再打開,直接重新整理網頁即可,非常的方便!

先在 server 資料夾底下安裝 nodemon:

Shell

然後打開 app.js,將最後一行註釋起來

JS
server/app.js

並加入以下程式碼:

JS
server/app.js

接著再啟動 nodemon:

Shell

這樣每次存檔後,就可以到網頁上看結果,不需要重啟伺服器了。

安裝 Cross-env 跨平台設定環境

corss-env 這個套件可以讓我們跨平台的將環境設定好,讓 MAC / Linux / Windows 的環境一致。

Shell

打開 server/package.json,將 script 設定全部替換掉:

JSON
server/package.json

安裝 Cors 解決跨域問題

最後就是要解決前端跟後端的跨域問題了,先安裝 cors 套件:

Shell

然後在 server/app.js 裡,加入以下語法來設定跨域:

JS
server/app.js

開啟前端 Vue 的檔案設定 proxy,詳細位置為 portfolio/config/index.js

JS
config/index.js

最後重啟伺服器:

Shell

在網址輸入 http://localhost:8080 後,打開 console 視窗,試著點選 getpost 兩個按鈕,應該可以成功看到 api 資訊

到此為止,Vue 和 Express 的開發環境就算是設定完成了,我們可以在 Express 設定 API router,然後用 Vue 開發時接入 API。

使用 Express 部署 Vue 專案

最後,我希望用 Vue build 出來的專案(dist/index.html),可以在 Express 底下執行並順利接 API,完成我的一條龍計畫!

先安裝 connect-history-api-fallback 套件,這個套件是用來溝通前端和後端的中間層。

Shell

打開 server/app.js 修改 Express 的 router:

JS
server/app.js

打開 routes/index.js

JS
routes/index.js

回到前端將專案 build 出來

Shell

再打開後端的 http://localhost:3000,就可以執行我們最後 build 出來的專案囉,而且也可以順利執行 API:

最後就可以愉快地開始寫網站囉!!


用 Express + nodemon 建一個乾淨的 nodeJS 樣板

最近因為工作關係,開始學用 nodeJS 了,我使用的是非常知名的 Express framework,他也有提供 APP 產生器快速建構一個基本的 nodeJS 網站,為了避免每次都要重新查資料,所以就記錄在自己的 BLOG 裡囉!

安裝 Express 產生器

第一次使用要先安裝他的產生器:

Shell

安裝完後可以執行 express -h 看到產生器的選項:

Shell

建立 Express 專案

Express 可以選擇要使用的「樣版引擎」以及「CSS 預處理器」,如果都沒有指定,預設就是:

  • 樣版引擎:jade
  • CSS 預處理器:原生的 css

我自己是習慣使用 ejs 跟 scss,所以我會下這樣的指令新建專案:

Shell

補充

--css=sass,使用的是 sass 語法,沒有大括號跟分號。
--css=compass,使用的是 scss 語法,有大括號跟分號。

接著請輸入以下指令:

Shell
Shell
Shell

預設的 port 是 3000,所以啟動後請在網址輸入 http://localhost:3000,如果安裝正常會看到 Express 的歡迎畫面:

Express 歡迎畫面

用 compass 出現錯誤 ENOENT

假設你跟我一樣使用 compass,啟動之後卻在終端機出現錯誤訊息,大致長這樣:
GET / 304 23.164 ms - -
events.js:174
throw er; // Unhandled 'error' event
Error: spawn compass ENOENT


那有很大的原因是沒有安裝 compass,因此請輸入以下指令安裝 compass 後,再重新啟動應該就沒問題囉!
$ gem update --system
$ gem install compass

使用 nodemon 自動重啟伺服器

這個就跟前端的 livereload 類似。

nodemon 可以讓我們更改 server 的程式碼之後,不用重新關閉伺服器再打開,直接到網頁重新整理即可。

安裝 nodemon

你可以選擇全域安裝(推薦全域安裝,因為他真的很好用XD):

Shell

也可以選擇只安裝在特定的資料夾:

Shell

正常情況下,安裝完之後輸入以下指令,就可以正常使用了:

Shell

搭配 Express,自動重啟伺服器

但如果我們有使用 Express 的話,他的啟動方式是 npm start,所以我們需要做一點小修改,才可以使用 nodemon 這個好用的服務!

請打開你的首頁(預設會是 app.js),將最後一行註釋起來

JS

然後加入以下程式碼:

JS

接著再啟動 nodemon:

Shell

這樣每次改完程式碼存檔之後,就能直接到網頁重新整理看結果囉!


下載 Express-Clean-APP

最後我也將這份 Express Clean 的專案資料夾放到 Github 上面,有需要的朋友可以自行 Clone 或是 Fork 唷。

Express Clean repo:https://github.com/mukiwu/clean-express