前言

今天開始的工作日誌會比較流水帳化，變成主要紀錄今天預定的進度與踩到的坑以及解決的問題等。
先進行各項工作時的具體操作步驟，省略比較瑣碎或重複性的部分，著重寫出核心內容。在遇到技術問題或錯誤時，會描述問題情況：像是報錯信息、異常表現等等。
接著會記下問題解決的過程，像是搜尋相關資訊、試誤不同方法，最後是採取何種方式成功解決問題。過程中若有任何新的心得或體會也會加入日誌中。

今日完成工作任務

將專案上傳至github

1. 上傳專案至github
2. 先開啟master（隨時可以上線的Demo用支線）與develop（主要用來開發的分支）兩大分支

參考資料：github開分支基礎

3. 邀請協作人

這部分先以比較簡易的方式進行，之後再確定commit message的風格，與發PR(Pull Request）的流程。

開發頁面

這裡先試著做出夥伴設計的figma圖，嘗試用Vue的架構切出一個登入頁面。

• 置入SASS

# .scss and .sass
npm add -D sass

或使用單文件組件透過<style lang="sass">自動開啟。

參考資料：vite官方文件—CSS預處理器

• 今後問題：使用Quasar或是Boostrap等UI框架或是原生？

串接Firebase到新專案

1. 開啟一個新的Firebase專案
2. 另外在Service中新增firebaseService.js，將重新開的Firebase專案串接進來
   

// firebaseService.js
import firebase from "firebase/compat/app"
import "firebase/compat/firestore"
export const firebaseConfig = {
  // 自己的firebase設定
}

firebase.initializeApp(firebaseConfig)
export const firesotre = firebase.firestore()

今後進度目標

1. 使用vue語法拿取FireStore內的資料
2. 決定使用UI框架或是直接寫SASS切版
3. Vue router的實際應用

總結

因為我是直接進入專案開發，對於 Vue 專案的配置檔案還不是非常熟悉。包括像是 Vite 的配置、路由設定、環境變數等文件，透過從配置層面瞭解 Vue 專案的運作原理，也可以避免一些不必要的 DEBUG 時間，這會是我最近的一個重點研究方向。