以下簡單列一下這個專案的技術架構規劃，也有可能會再調整，一開始會先以前端為主，後期有需要會加上後端系統。
因為每次都沒有認真研究怎麼存成 preset，然後也沒有紀錄下來上次怎麼建置的，所以這邊來筆記的詳細一點。
另外還沒在本機上安裝 Vue CLI 3 的話，可以打這行安裝：
npm install -g @vue/cli
首先使用 Vue CLI 快速建置一個專案，這邊使用 v3.11.0 版本，輸入以下指令：
vue create richbook
其中的 richbook 是我的專案名稱，非常俗，但就是這麼簡單直白。
接著這邊第一次建專案還沒有建立自己的 preset，所以建議選擇手動配置（Manually select features）。等等後面在安裝完其它套件、編排好檔案結構後，再來將 template 做成 preset（預設配置），方便以後快速建一個 Vue 專案：
選擇要手動配置的選項：
這邊由於是要做一個稍微複雜一些的記帳軟體，所以選了 Babel、vue-router、Vuex、CSS 預處理器、Linter/Formatter，至於後面要不要改成 PWA，到時候再手動設定吧。
按下確定後，下一步出現了關於 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。
一般我都是毫不猶豫選 Sass/SCSS，但新版本的 Vue CLI 多了不一樣的選項：
這邊我先選 node-sass。
有大概查了一下資料，大概瞭解的差異是後來 Sass 團隊用 Dart 改寫了 Sass，看起來是很篇 Sass 底層的東西，差別像是在編譯時的一些細微速度差異，雖然官方說 dart-sass 比較快，但有人實測起來是 node-sass 比較快，留一些延伸閱讀文章，這邊就先不深入研究了。
選擇常用的 ESLint + Prettier 這一項，下一步再選擇 Lint on save。
後面設定，再將設定檔選擇 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 做了。
在找資料時照到的文章，寫得好詳細，自嘆不如，若之後看不懂可以再參考這篇。
本文同步發表在我的個人部落格
iThome鐵人賽
看影片追技術