按照一定的结构组织，使得组件便于理解。 ### [](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> ~~~