一、注意事項(xiàng)
1蔗坯、開發(fā)盡量使用ES2015康震，遵循CommonJS規(guī)范
2、切勿直接操作DOM宾濒，要操作數(shù)據(jù)
3腿短、盡量使用Vue的語法糖，比如可以用:style代替v-bind:style绘梦；用@click代替v-on:click
二橘忱、規(guī)范
1、命名
組件名稱(含路由組件)使用“-”分割卸奉，如person-new-com钝诚，不推薦駝峰
2、事件
事件名稱使用“-”分割榄棵，且前綴為該組件的名稱凝颇，例如當(dāng)前組件為open-layer.vue郎嫁，則事件名稱為 open-layer-close
3、數(shù)據(jù)
1祈噪、不要將html的attribute和vue的model混用
2泽铛、class和style使用
new Vue({ el: 'body', data: { list: [ { name: '《HTML權(quán)威指南》', is_read: 0 }, { name: '《深入淺出NodeJS》', is_read: 1 }, ] } })
<div v-for="item in list" class="book_item" :class="{'off': !item.is_read}"></div>
4、在組件中使用第三方插件
組件的初始化代碼
<style></style>
<template></template>
<script>
import echarts from 'echarts';
export default {`
data () {
return {
}
},
ready: {
},
destroyed: {
},
methods: {
}
}
</script>-
要?jiǎng)?chuàng)建一個(gè)echarts實(shí)例辑鲤，應(yīng)該在ready里面完成盔腔，但代碼較多且需要拆分，可在methods里定義：
<template>
<div class="chart" v-el:dom-line></div>
</template>
<script>
import echarts from 'echarts';
importels.domLine);
}
var option = {
// ...
}
this.myChart.setOption(option);
},
getData() {
var _this = this;
$.ajax({
url: '',
type: 'get',
data: {},
success (data) {
// 每分鐘更新一次數(shù)據(jù)
_this.data = data;
Vue.nextTick(function() {
_this.initChart();
});
_this.chartTimeout = setTimeout(function() {
_this.getData();
}, 1000 * 60);
}
})} } } </script>
5月褥、資源的高度可復(fù)用
為了使組件弛随，自定義指令，自定義過濾器復(fù)用宁赤，要將可復(fù)用的內(nèi)容單獨(dú)拆離舀透，
將組件放置在components目錄內(nèi)，
將自定義指令放置在 directives 目錄內(nèi)决左，
將自定義過濾器放置在 filters 目錄內(nèi)
6愕够、css的使用
將業(yè)務(wù)型的css單獨(dú)寫一個(gè)文件，
功能型的css佛猛，最好和組件一起惑芭，不推薦拆離，比如一個(gè)通用的confirm確認(rèn)框继找。
