code review 重點與說明

html

美化 index.html 中的 meta
注意 lang 要調整至相關語系，例如調整成「zh-Hant-TW」，若是英語系網站則可以保留預設「en」。
img 標籤建議補上 alt 屬性，在撰寫上盡可能要讓他具有意義
電話與信箱可以嘗試使用 a:tel 與 a:mail 方式包覆

JS

var 算是舊時代的宣告語法
console.log() 會建議移除
函式宣告方式建議可以統一，目前有函式陳述跟函式表達混用。 [?]
使用 TypeScript 應盡可能避免使用 Any

vue

盡可能避免使用 key 作為 v-for 的 key，如果有 only id 的話就建議用 id 取代。
建議統一一種 Vue 寫法 ,全部都用 Options API 或者全部都用 Compoments API [?]
引入的元件名稱建議盡可能相同，這樣才不會導致回頭找元件時不好找 [?]
import 建議盡可能放在最前面引入
萬用路由建議放在最後一個 [?]
localStorage 的部分可以試著封裝起來
頂級標籤 (template、script、style) 之間建議可以有個換行符號 [?]
頂級標籤 (template、script、style) 專案統一順序 [這有 linter 可以設定]
class 多餘的空格記得刪除，空白的 class 也請記得刪除。
應不用特別標記 lang=”js”與不用特別寫 lang="css”
Button 記得補上 type=”button”, 參考文獻 https://israynotarray.com/html/20220924/1348879561/
- button 的預設 type 就是 button，但因為 form 表單中的 button 預設的型別是 type='submit',
ref 宣告的基本上都是屬於 const 不會是 let。

linter

ESLint 警告，請記得修正
- 目前是使用 commit 前強制檢驗，不過會花上一些時間
程式碼尾段多餘的空格請務必清除，若是使用 VSCode 可以點一下檢視>轉譯 or 顯示空白字元。
非必要註解可以斟酌刪除

UIUX

以電商網站來說，頁首大圖需要有比較明確的網頁標題與引導使用者進行下一步動作的按鈕（e.g. 註冊、購物），這樣能夠增加網站的轉換率
重要的 CTA 建議放右邊（參考文章 https://today.line.me/tw/v2/article/R8Ml5e）
收藏清單頁可以不用加上欄位標題，以列表形式呈現即可哩
收藏清單頁視覺重量偏左，建議可以把整體欄寬調窄一些並置中於畫面
按鈕建議使用主色或灰階，紅色通常用在危險、警告等情境
按鈕群組連接處建議可以不用加上圓角，視覺上會更協調
Number input 不應該能輸入負值，這邊建議和行動版一樣使用下拉選單
付款成功後的頁面建議可以再做出更大的差異
整體內容偏左，建議置中於畫面，可以嘗試讓左右兩欄各佔 6 欄，或左 7 右 5
UX Writing 可以再更簡潔一些，建議不用加上確認，直接寫「填寫訂單資訊」、「送出訂單」即可
Footer 建議與上方內容保持同寬
Search Bar 建議與其他內容靠左對齊
優惠活動卡片的尺寸和文字偏小，建議可以單張呈現並使用輪播
產品詳情頁：按鈕文字建議單行顯示
除了表頭之外，其他內容的分隔線建議使用淺一點的灰階，在視覺上達到分隔效果即可，避免干擾閱讀
行動版：漢堡選單上的 icon 間距可以再近一些，相似元素建議擺近一點，這樣資訊分群會更明確
About：整體容器可以再寬一些，會比較好閱讀哩[no design eyes...]

code review 重點與說明 ​

html ​

JS ​

vue ​

linter ​

UIUX ​

code review 重點與說明

html

JS

vue

linter

UIUX