用 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:

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


在 Vue 框架下使用所有的 Font Awesome icon

如果想在 Vue 使用 Font Awesome,可以參考官方的 Github 文件

JS
src/main.js
JS
src/App.vue

但是官方給的範例是「你要用哪一個 icon,就匯入哪一個 icon」,所以我們只能使用 user-secret 這個 icon,假設要使用兩個以上的 icon,就必須一直匯入,非常的麻煩。

使用 Font Awesome 所有 icon

如果你希望在 Vue 裡可以一次匯入所有 icon,不需要個別匯入的話,可以改用以下寫法:

JS
src/main.js

這邊的 fas 指的是所有的 solid icon,更多種類請參考:

fas:Solid
far:Regular
fal:Light
fab:Brands

如此一來,不需要個別匯入就可以使用所有的 Font Awesome icon 囉!

讓 CSS 讀取 vue i18n 的語系並顯示對應的樣式

如果網站有多語系的需求,除了修改文字之外,有可能還需要根據不同的語系,調整對應的 CSS 樣式。

通常會碰到以下兩種情況:

  • 不同的語系有不同的色彩 / 樣式 / 或排版
  • 不同的語系有不同的寬度 (因為有的語系文字特別長)

我們可以直接用this.$i18n.locale 抓出當前的語系名稱,然後直接用這個語系名稱當做 CSS 的 class 即可。

詳細的程式碼如下:

JS

而 i18n 的語系名稱是怎麼來的呢?預設位置在 lang/index.js 裡:

JS

這裡的 en_US 以及 zh_TW 就是他的語系名稱,我們可以依照需求自行調整。

建立 Vue Cli 3 專案的設定介紹

  • 日期:
  • 留言數:0
  • 標籤:

Vue Cli 可以快速幫 Vue 建立一個完整的系統,但每次建立都有一些設定要調整,為了怕自己忘記,所以簡單將設定紀錄一下~

設定範例圖

如果有人被 google 搜尋騙進來,可以先看一下這篇文章講的東西是不是你想知道的!

▼ 我要分享的是這個設定而已 XD


vue create 建立專案後,會出現以下的設定:

Please pick a preset

第一個是讓你選擇專案的環境配置:

  • default(babel, eslint): 預設的新專案原型,沒有任何 npm,選擇之後會直接幫你建立專案,後面的都可以略過了 XD。
  • Manually select features: 如果希望全部設定都自己手動選擇,就請選這個吧。

如果在建立專案時有儲存設定,未來建新專案時可以在這裡選擇過往的設定,要如何「儲存設定」?這個部分會在後面提到。

Check the features needed for your project

接著選擇在這個專案中會用到的功能,用space多選。

  • Babel: JavaScript 轉碼器,可以將 ES6 的程式碼轉為 ES5
  • TypeSript: TypeScript 用來補足 JavaScript 在型別上的不足,他有可選的靜態型別,以及支援最新的 ES6 特性
  • Progressive Web App (PWA) Support: 是否支援漸進式網頁應用 (PWA)
  • Router: Vue 的路由器,可以參考 vue-router
  • Vuex: Vue 的狀態管理模式,可以參考 vuex
  • CSS Pre-processors: CSS 的預處理器,例如 Less, Sass
  • Linter / Formatter: 檢查 Coding Style 與格式化,例如 ESlint
  • Unit Testing: 單元測試
  • E2E Testing: End to End 測試

想要更瞭解單元測試與 E2E 測試的朋友,可以參考保哥的文章介紹:一次搞懂單元測試、整合測試、端對端測試之間的差異

承上,選好功能後,部分的功能會再詢問更細部的設定。

如果你選了 TypeScript

  • Use class-style component syntax: 是否要使用 style component 的語法
  • Use Babel alongside TypeScript: 是否要用 Babel 轉譯

如果你選了 Router

如果你選了 CSS Pre-processors

  • Pick a CSS pre-processor: 選擇你要用的 CSS 預處理器

如果你選了 Linter / Formatter

  • Pick a linter / formatter config: 選擇 Coding Style 的規範類型。
  • Pick additional lint features: 檢查 Coding Style 時,是要在存檔時檢查?還是 commit 時直接處理?

如果你選了 Unit /E2E Testing

  • Pick a unit testing solution: 選擇單元測試的測試方法
  • Pick a E2E testing solution: 選擇 E2E 測試的測試方法
  • Where do you prefer placing config for Babel, PostCSS, ESLint, etc.: 選擇 Babel, PosCSS, ESLint… 等這些設定檔的存放位置

最後一個選項,則是問你要不要保留以上的設定,下次如果要新建一個 Vue Cli 時,就可以直接拿來使用。