按照一定的結構組織，使得組件便于理解。 ### [](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md#為什么-5)為什么？ * 導出一個清晰、組織有序的組件，使得代碼易于閱讀和理解。同時也便于標準化。 * 按首字母排序 properties、data、computed、watches 和 methods 使得這些對象內的屬性便于查找。 * 合理組織，使得組件易于閱讀。（name; extends; props, data 和 computed; components; watch 和 methods; lifecycle methods 等）。 * 使用?`name`?屬性。借助于?[vue devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en)?可以讓你更方便的測試。 * 合理的 CSS 結構，如?[BEM](https://medium.com/tldr-tech/bem-blocks-elements-and-modifiers-6b3b0af9e3ea#.bhnomd7gw)?或?[rscss](https://github.com/rstacruz/rscss)?-?[詳情？](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md#%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6%E5%90%8D%E4%BD%9C%E4%B8%BA%E6%A0%B7%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F%E7%A9%BA%E9%97%B4)。 * 使用單文件 .vue 文件格式來組件代碼。 ### [](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md#怎么做-5)怎么做？ 組件結構化 ~~~ <template lang="html"> <div class="Ranger__Wrapper"> <!-- ... --> </div> </template> <script type="text/javascript"> export default { // 不要忘記了 name 屬性 name: 'RangeSlider', // 使用組件 mixins 共享通用功能 mixins: [], // 使用其它組件 components: {}, // 組成新的組件 extends: {}, // 組件屬性、變量 props: { bar: {}, // 按字母順序 foo: {}, fooBar: {}, }, // 變量 data() { return {} }, creted () {}, mounted () {}, computed: {}, // 使用其它組件 components: {}, // 方法 watch: {}, methods: {}, // 生命周期函數 beforeCreate() {}, mounted() {} }; </script> <style scoped> .Ranger__Wrapper { <!-- ... --> } </style> ~~~