iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
2
Modern Web

從零開始的個人化記帳程式開發系列 第 4

記帳程式 (04):用 Vue CLI 3 建置專案


技術架構

以下簡單列一下這個專案的技術架構規劃,也有可能會再調整,一開始會先以前端為主,後期有需要會加上後端系統。

前端

後端

  • Node.js/Express
  • MongoDB

其他

  • Google sheet 串接
  • PWA
  • 第三方登入
  • 離線讀寫、同步與備份

Vue CLI 前台專案建置

因為每次都沒有認真研究怎麼存成 preset,然後也沒有紀錄下來上次怎麼建置的,所以這邊來筆記的詳細一點。

另外還沒在本機上安裝 Vue CLI 3 的話,可以打這行安裝:

npm install -g @vue/cli

1. 建立專案

首先使用 Vue CLI 快速建置一個專案,這邊使用 v3.11.0 版本,輸入以下指令:

vue create richbook

其中的 richbook 是我的專案名稱,非常俗,但就是這麼簡單直白。

圖片來源

2. 手動配置

接著這邊第一次建專案還沒有建立自己的 preset,所以建議選擇手動配置(Manually select features)。等等後面在安裝完其它套件、編排好檔案結構後,再來將 template 做成 preset(預設配置),方便以後快速建一個 Vue 專案:

選擇要手動配置的選項:

這邊由於是要做一個稍微複雜一些的記帳軟體,所以選了 Babel、vue-router、Vuex、CSS 預處理器、Linter/Formatter,至於後面要不要改成 PWA,到時候再手動設定吧。

3. 設定 vue-router

按下確定後,下一步出現了關於 vue-router 的設定:

Use history mode for router? (Requires proper server setup for index fallback in production)

因為這邊想將網頁做成一個 SPA,所以前面有選了 vue-router 的設定,也就是透過它幫忙做一個「前端路由系統」。

這邊詢問要用哪一種 router mode,不熟悉的讀者可以詳讀官方文件學習一下。

簡單來說就是 hash mode 是利用網址帶一個 # 做前端換頁;而 history mode 是利用瀏覽器在 HTML5 中新增的一個 history.pushState() 這個方法來做前端換頁,不會帶上稍微有些醜的 # 號。

他這邊寫說選擇 history mode 的話,若是使用者輸入了一個不存在的網址,就要另外處理導回首頁或 404 頁的動作。

這邊不想讓網頁網址醜醜的,所以就選 history mode

4. 設定 CSS 預處理器(pre-processor)

一般我都是毫不猶豫選 Sass/SCSS,但新版本的 Vue CLI 多了不一樣的選項:

  • Sass/SCSS (with dart-sass)
  • Sass/SCSS (with node-sass)

這邊我先選 node-sass

有大概查了一下資料,大概瞭解的差異是後來 Sass 團隊用 Dart 改寫了 Sass,看起來是很篇 Sass 底層的東西,差別像是在編譯時的一些細微速度差異,雖然官方說 dart-sass 比較快,但有人實測起來是 node-sass 比較快,留一些延伸閱讀文章,這邊就先不深入研究了。

5. 選擇 linter / formatter

選擇常用的 ESLint + Prettier 這一項,下一步再選擇 Lint on save

6. 其他設定

後面設定,再將設定檔選擇 In dedicated config files 分別存成獨立檔案之後方便調整;再來將這個手動配置存成一個 preset,這邊命名叫做 withRouterVuex,因為這兩項算是選擇性的功能。

按下確定後,就會開始建置專案了。

等個幾分鐘後就完成啦!此時再執行 CLI 上提示的兩個指令就可以將專案 build 起來:

cd richbook
yarn serve

預設的 local 連線在 http://localhost:8080/,連上後出現以下畫面就成功啦:

結語

今天利用 Vue CLI 完成了專案的初始化,也順便瞭解了一些 Vue CLI 以前似懂非懂的設定細節。

明天會接下來再來編排檔案結構、調整設定檔、安裝相關套件、分支管理,基礎建設做得好,後期開發沒煩惱,單押*1 送給各位,我們明天見!

後記

就在我差不多寫完這篇文章時,今天上班時得知了有個東西叫做 vue-element-admin ,一看不得了,這東西超級方便的啊,省了非常多工,明天稍微來研究研究,可以的話就直接用這個 template 做了。

延伸閱讀

在找資料時照到的文章,寫得好詳細,自嘆不如,若之後看不懂可以再參考這篇。

本文同步發表在我的個人部落格


上一篇
記帳程式 (03):盤點功能
下一篇
記帳程式 (05):編排檔案結構與分支管理
系列文
從零開始的個人化記帳程式開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
照燒
iT邦新手 4 級 ‧ 2022-07-31 11:26:04

現在大多數架構的官網已經完全不推薦node-sass,相容還是遠比速度重要,沒有特殊狀況都是使用dart-sass

【**此則訊息已被站方移除**】

我要留言

立即登入留言