Simple Twitter 前端專案
專案緣起
在 7 月時與 AC 的同學一起完成了 Simple Twitter 前後分離的專案，雖然那時的我負責後端的部分，由於但自己實在很想用前端的視角來串接自己的寫的 API ，順便了解作為前端在前期應該如何跟後端溝通資料格式以符合實際的需求，所以就決定自己從 0 開始 Vue 一個前端的專案出來！
專案 Repo
專案 Demo
前台：
帳號 RyanHuang 密碼 12345678後台：
帳號 root 密碼 12345678
事前準備
在正式開始切版之前，先分析提供的設計稿，利用 figma 將元件的架構大致畫出來~這樣之後再建立元件的時候會比較清楚整體的架構
盤點使用的技術
- 使用 Vue 2 前端框架打造 SPA 專案
- 使用 Vue Components props/emit 實踐組件資料傳遞
- 使用 Vue Router 統一管理應用所有狀態
- 將當前使用者、熱門追蹤清單、登入狀態等資訊放入 Vuex 進行狀態管理
- 利用 Vue UI Library Vuetify 開發網頁元件
- 使用 Sass/Scss 工具提高 css 維護性和重用性
- 使用 axios 串接後端 API
- 前端登入、註冊功能使用 vuelidate 套件進行資料驗證
- 利用 sweetalert2 套件實作彈出訊息
- 使用 moment.js 套件整合時間格式
- RWD 切版以 Vuetify breakpoint、scss、flex、position 進行實作
簡單來說，這次的專案對我來說是針對 Vue 框架、Sass/Scss、串接 API 、切板的刻意練習。
開發過程中印象深刻的學習
嘗試使用陌生的 Vue UI Library - Vuetify
這次的專案除了想練習 Vue 以外，我還想要嘗試使用一個 Vue UI 框架撰寫看看，在眾多的 UI 框架中選擇了 Vuetify 主要是基於以下幾個原因：
- github上有超過 32k 的 star，可見是相當多人使用的套件
2. 開發者有持續的更新、維護
3. 官方文件相對好閱讀
4. 元件的種類非常的廣，符合我使用的需求
5. 元件風格很美觀
花費了很多時間在閱讀文件，P.S.還是直接讀英文文件比較好，中文有些地方翻得不太好，主要是先玩看看文件上提供的範例，了解有哪些屬性可以用，後來熟了屬性切版就快多了。
表單驗證
實作註冊功能和帳號設定時會遇到需要使用者填入資料的情境，再經由前端將資料傳送到伺服器，雖然不算是很大的資料，但若能夠在前端可以先做基本的驗證，我認為應該可以多少減輕後端效能的負擔。
再經由 google 看到有關 vue 表單驗證的套件主要有 vee-validate 、vuelidate，而 Vuetify 本身其實也有提供 form validation，但由於使用 Vuetify 提供的 form validation 較局限於元件庫提供的本身的元件，故選擇使用第三方套件來做資料驗證。
而選擇 vuelidate 而非 vee-validate 的原因在於其驗證邏輯是直接寫在 js ，又另一個原因是較為輕量。
使用巢狀路由
當初看到使用者頁面設計稿裡有一組 tabs 元件，根據分別是推文、推文與回覆、喜歡的內容，我就在思考如何寫才能只需要抽換局部的內容，讓其他的元件維持同樣的狀態，於是 google 後就發現了可以用巢狀路由來解決這個問題！相關的教學我是閱讀這篇。
我解決的辦法是在 UserProfile.vue這個 view 中放入<router-view>，在
router 設定中根據文件的方法撰寫：
讓<router-view>內的元件可以依據不同的路由顯示鑲嵌套層的效果。
後來發現除了使用者檔案的這一頁可以這麼做以外，再向上一層思考，整體的頁面 Navbar 的部分也幾乎是固定，只有主要內容改變，所以應該也是可以使用巢狀路由去動態產生元件的，這就是之後可以再優化的地方。
過程中遇到困難
整個專案我覺得最困難的地方就在使用者資料更新的部分
在正常的情況下，使用者在自己的使用者頁面中點選"編輯個人檔案"的按鈕會跳出 modal 中更改自己的資料，點選儲存後，modal 視窗會關閉，而此時的個人頁應該要是已經更新後的資料。
但是....我再把資料打包給呼叫的 API 後，資料庫確實也更新了使用者資料，但使用者頁面父層元件依舊還是舊的資料，需要手動刷新頁面。
解決的方式也是從 google 找到的
發現可以使用依賴注入在 App.vue，讓祖先元件向後代子孫元件注入一個依賴，這樣不管元件隔多遠都可以都有效。
在 App.vue中加入 reload 方法，使用 provide() 將 reload 注入整個元件，再利用<router-view v-if=”isRouterAlive”>去控制是否顯示畫面。
接者在UserProfileEditModal.vue中inject: [“reload”]注入 reload方法，當呼叫儲存的 API 成功後，就可以調用 this.reload()，來實現刷新頁面的效果。
methods: {
reload() {
this.isRouterAlive = false; //畫面不顯示
this.$nextTick(() => { //使用 $nextTick 獲取更新後的 DOM
this.isRouterAlive = true; //畫面顯示
});
},
}專案還要改進的地方
1. scss 結構混亂
對我來說這是第一次大型的專案中使用 scss ，所以在整體的結構上寫的很混亂，不是很好維護，後來再Advanced CSS and Sass: Flexbox, Grid, Animations and More! 的教學中，看到 7–1 CSS Architecture with Sass 的架構示範，才發覺自己寫的還有很大改進的空間。
2. 語義化的HTML
因為切版用 Vuetify，自然而然就習慣 Vuetify 寫法刻板，就完全忽略了，後來在查閱網頁 SEO 的一些小技巧時，才發現專案沒有用語義化標籤<header></header>、<navbar></navbar>，這對於 SEO 很重要啊~
整體心得
開發的過程花費了很多心力在看各種的官方文件、在思考要引入什麼樣的套件，這個過程雖然很辛苦，但看到自己的成品逐漸有一個雛形，就還蠻欣慰的~
在串接 API 的同時也發現了我之前開發 API 時所留下來的坑 XD 這帶給我最重要的省思就是要好好地跟後端開資料格式啊！也從此更清楚了解到要怎樣去提前端的需求，好的資料格式可以提高開發效率呀~
