前端 vue 開發準則

為了讓其他開發者也能理解你每一行程式碼的涵義及作用
在建構程式時，盡力打造清晰直觀的架構，讓程式更容易維護及重構
有關傳遞相關的引數，應該避免過度複雜，避免我們無法直覺看出它的功能

框架結構

使用開源框架，其優點是可以遵循公認的標準格式，
在框架內自定義架構，需要留意幾點：
組織必須有序，直觀，以及有所邏輯性
結構或程式，階按照字母順序排列

Component

Component 命名要具體描述，由簡單2-3單字組成
第一個單字可作為一些公用component 字首空間命名 (例如 app- )
每一個component必須保持獨立，並且能提供給大多陣列件使用

Template

Template 應該盡量避免寫入太多表達式
表示式可以放在 method 或 computed 裡面來進行

props

雖然 vue 支援可以透過 props 傳遞複雜的物件或資料，但是應盡量只傳遞基本的資料形態(int, number, string, boolean....)
props 須遵循向下傳遞，向上傳遞需透過事件 (events)

穩定，並且可預測的API

必須確保所開發出的功能，可以應對不同情況
例如，
有傳引數，需校驗型態，以及因應引數型別錯誤時的做法
無傳入引數，需要返回預設值

程式碼檢查

可以透過 eslint-plugin-html 來追蹤校驗程式碼
（安裝 vue-cli 預設就會啟動這項檢驗）
保證開發者可以使用同樣的編碼規範

Mixins

對於需要大量重複使用到的元件，可以包裝成 Minins export，讓程式可以重複被應用，共享

避免

避免使用 this.$parent, this.$refs

實際使用過程，若透過 props, events 仍無法有效的解決問題，在考慮透過 $this.refs 實現

如果你喜歡我們的文章內容，請在這裡按個讚

Tweet