### 為什么?
Vue.js 是一個基于組件的框架。如果你不知道何時創建組件可能會導致以下問題:
* 如果組件太大, 可能很難重用和維護;
* 如果組件太小,你的項目就會(因為深層次的嵌套而)被淹沒,也更難使組件間通信;
### [](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md#怎么做-12)怎么做?
* 始終記住為你的項目需求構建你的組件,但是你也應該嘗試想到它們能夠從中脫穎而出(獨立于項目之外)。如果它們能夠在你項目之外工作,就像一個庫那樣,就會使得它們更加健壯和一致。
* 盡可能早地構建你的組件總是更好的,因為這樣使得你可以在一個已經存在和穩定的組件上構建你的組件間通信(props & events)。
### [](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md#規則)規則
* 首先,盡可能早地嘗試構建出諸如模態框、提示框、工具條、菜單、頭部等這些明顯的(通用型)組件。總之,你知道的這些組件以后一定會在當前頁面或者是全局范圍內需要。
* 第二,在每一個新的開發項目中,對于一整個頁面或者其中的一部分,在進行開發前先嘗試思考一下。如果你認為它有一部分應該是一個組件,那么就創建它吧。
* 最后,如果你不確定,那就不要。避免那些“以后可能會有用”的組件污染你的項目。它們可能會永遠的只是(靜靜地)待在那里,這一點也不聰明。注意,一旦你意識到應該這么做,最好是就把它打破,以避免與項目的其他部分構成兼容性和復雜性。
- Vue開發規范
- 基于模塊開發
- 組件
- 組件命名規則
- 基礎組件名
- 單例組件名
- 緊密耦合的組件名
- 組件名中的單詞順序
- 組件文件夾命名規則
- method方法
- methods方法命名規則
- 組件結構化
- 組件事件命名規則
- v-for與v-if
- 為 v-for 設置鍵值
- 避免 v-if 和 v-for 用在一起
- Prop
- Prop命名規則
- Prop定義
- 避免 this.$parent
- 謹慎使用 this.$refs
- 隱性的父子組件通信
- 元素
- 元素特性的順序
- 多個特性的元素擺放規則
- 單文件組件的頂級元素的順序
- 簡化代碼
- 模板中簡單的表達式
- 簡單的計算屬性
- 指令縮寫
- 文件引用路徑
- 其他注意
- 組件數據
- 將 this 賦值給 component 變量
- 對組件文件進行代碼校驗
- 盡可能使用 mixins
- 非 Flux 的全局狀態管理
- 只在需要時創建組件
- HTML開發規范
- HTML語法
- HTML5 doctype
- 語言屬性
- IE 兼容模式
- 字符編碼
- 引入 CSS 和 JavaScript 文件
- 實用為王
- 屬性順序
- 布爾(boolean)型屬性
- 減少標簽的數量
- JavaScript 生成的標簽
- CSS開發規范
- CSS語法
- 聲明順序
- 不要使用 @import
- 媒體查詢(Media query)的位置
- 帶前綴的屬性
- 單行規則聲明
- 簡寫形式的屬性聲明
- Less 和 Sass 中的嵌套
- Less 和 Sass 中的操作符
- 注釋
- class 命名
- 選擇器
- 代碼組織