标签：使用 not lang 团队 结构 语法 wrapper als click
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版)，感觉不错翻译一下加深理解。
这篇文章制定一个统一的规则来开发你的vue程序，以至于达到一下目的。
1.让开发者和开发团队更容易发现一些事情。
2.让你更好的利用你的IDE.
3.让你更加容易的使用打包工具
4.让你的代码更容易碎片化以达到复用的目的。
用一些功能单一的小模块来组织你的应用
对于你自己和你团队的人来说较小的模块更容易看懂 维护 复用和调试。
每个组件应该保持单一 独立 可复用 可测试
把你很大的组件拆分成功能单一的小组件，尽量不让一个组件的代码超过100行，保持组件独立。最好是写个组件应用的小demo
组件命名应该遵从以下几点原则
vue组件也应该遵循以下原则
<!-- 建议这样 -->
<app-header></app-header>
<user-list></user-list>
<range-slider></range-slider>
<!-- 避免这样 -->
<btn-group></btn-group> <!-- 足够短但是不容易发音，使用`button-group`代替 -->
<ui-slider></ui-slider> <!-- 所有的组件都是ui元素，所以这样命名无意义 -->
<slider></slider> <!--不是我们适应的风格 -->
vue的行内式表达式都是js。当着这些js很有效，但是也很复杂。因此你应该保持行内表达式简洁
把复杂的语法移动到methods或者计算属性中
<!-- recommended -->
<template>
<h1>
{{ `${year}-${month}` }}
</h1>
</template>
<script type="text/javascript">
export default {
computed: {
month() {
return this.twoDigits((new Date()).getUTCMonth() + 1);
},
year() {
return (new Date()).getUTCFullYear();
}
},
methods: {
twoDigits(num) {
return (‘0‘ + num).slice(-2);
}
},
};
</script>
<!-- avoid -->
<template>
<h1>
{{ `${(new Date()).getUTCFullYear()}-${(‘0‘ + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
</h1>
</template>
尽管vue支持通过props传递复杂的object，但是你要尽量保持props传递的数据简单,尽量只传递基本数据类型(strings, numbers, booleans)
vue component 只传递简单数据类型或者函数如下
<!-- recommended -->
<range-slider
:values="[10, 20]"
min="0"
max="100"
step="5"
:on-slide="updateInputs"
:on-end="updateResults">
</range-slider>
<!-- avoid -->
<range-slider :config="complexConfigObject"></range-slider>vue 组件中props就是api,健壮且可预测的api让别人更容易使用你的组件
组件的props通过html属性来编写，这些值可以是vue的简答字符串（:attr="value" or v-bind:attr="value"）也可以不写。你应该对props做一些限制
对props做一些限制保证你的组件正常工作，即使别人没有按照你预想的方式调用你的组件。
<template>
<input type="range" v-model="value" :max="max" :min="min">
</template>
<script type="text/javascript">
export default {
props: {
max: {
type: Number, // [1*] This will validate the ‘max‘ prop to be a Number.
default() { return 10; },
},
min: {
type: Number,
default() { return 0; },
},
value: {
type: Number,
default() { return 4; },
},
},
};
</script>在组件内部上下文中,this指的是vue组件实例，因此在其他上下文中使用它的时候保证‘this‘在组件中可以使用
换句话说,不要这样写 const self = this;
this分配给会改变名字的组件，告诉开发者this是一个组件实例。让你的组件代码按照一定的顺序编写
name属性，这样再使用vue devtools时便于开发测试。<template lang="html">
<div class="Ranger__Wrapper">
<!-- ... -->
</div>
</template>
<script type="text/javascript">
export default {
// Do not forget this little guy
name: ‘RangeSlider‘,
// compose new components
extends: {},
// component properties/variables
props: {
bar: {}, // Alphabetized
foo: {},
fooBar: {},
},
// variables
data() {},
computed: {},
// when component uses other components
components: {},
// methods
watch: {},
methods: {},
// component Lifecycle hooks
beforeCreate() {},
mounted() {},
};
</script>
<style scoped>
.Ranger__Wrapper { /* ... */ }
</style>vue提供的vue处理函数和表达式是严格绑定在vm上的。每个组件事件应该遵循一个良好的命名规范从而避免开发中出现的问题。
vue支持组件嵌套，子组件获得父组件上下文，但是获得外部上下文违反了组件独立的规定，所有不要使用this.$patent
this.$refsvue 支持组件通过 this.$refs来获得组件或者dom元素的上下文，大部分情况下这中用法应该被禁止。当你用他的时候也应该谨慎防止错误的组件api。
this.$refsthis.$refs是比jquery和document.getElement*好一些的选择<!-- good, no need for ref -->
<range :max="max"
:min="min"
@current-value="currentValue"
:step="1"></range><!-- good example of when to use this.$refs -->
<modal ref="basicModal">
<h4>Basic Modal</h4>
<button class="primary" @click="$refs.basicModal.close()">Close</button>
</modal>
<button @click="$refs.basicModal.open()">Open modal</button>
<!-- Modal component -->
<template>
<div v-show="active">
<!-- ... -->
</div>
</template>
<script>
export default {
// ...
data() {
return {
active: false,
};
},
methods: {
open() {
this.active = true;
},
hide() {
this.active = false;
},
},
// ...
};
</script><!-- avoid accessing something that could be emitted -->
<template>
<range :max="max"
:min="min"
ref="range"
:step="1"></range>
</template>
<script>
export default {
// ...
methods: {
getRangeCurrentValue() {
return this.$refs.range.currentValue;
},
},
// ...
};
</script>vue 组件的名字作为css根作用域类名是极好的。
把组件名作为css命名空间依赖BEM和OOCSS(面向对象css)。在style标签上加scoped。加了scoped告诉vue在编译时给每个类名都加一个后缀，从而避免污染其余组件或者全局样式。
<style scoped>
/* recommended */
.MyExample { }
.MyExample li { }
.MyExample__item { }
/* avoid */
.My-Example { } /* not scoped to component or module name, not BEM compliant */
</style>一个vue实例通过实例化应用中的组件而来。这个实例通过组件属性配置而来。如果组件要提供给其他开发者使用，这些定制的属性也就是组件的api应该写在readme.md中。
README.md 是一个文档应该先被阅读的。github等代码仓库通过README.md 来展示代码内容给一个组件增加README.md
range-slider/
├── range-slider.vue
├── range-slider.less
└── README.md其余还包括给你的组件写小demo，对组件做eslint代码审查。
-转载
标签：使用 not lang 团队 结构 语法 wrapper als click
原文地址：http://www.cnblogs.com/wenJiaQi/p/6528306.html
