一、注意事項
1、開發盡量使用ES2015，遵循CommonJS規范
2、切勿直接操作DOM，要操作數據
3、盡量使用Vue的語法糖，比如可以用:style代替v-bind:style；用@click代替v-on:click
二、規范
1、命名
組件名稱(含路由組件)使用“-”分割，如person-new-com，不推薦駝峰
2、事件
事件名稱使用“-”分割，且前綴為該組件的名稱，例如當前組件為open-layer.vue，則事件名稱為 open-layer-close
3、數據
1、不要將html的attribute和vue的model混用
Paste_Image.png
2、class和style使用
new Vue({el: 'body',data: {list: [{name: '《HTML權威指南》',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>
要創建一個echarts實例，應該在ready里面完成，但代碼較多且需要拆分，可在methods里定義：
<template><div class="chart" v-el:dom-line></div>
</template>
<script>import echarts from 'echarts';import $ from 'jquery';export default {data () {return {chartData: {}}},ready: {this.getData();},beforeDestroy: {// 銷毀定時器if (this.chartTimeout) {clearTimeout(this.chartTimeout);}// 銷毀echart實例if (this.myChart) {this.myChart.dispose();}},methods: {initChart () {if (!this.myChart) {this.myChart = echarts.init(this.$els.domLine);}var option = {// ...}this.myChart.setOption(option);},getData() {var _this = this;$.ajax({url: '',type: 'get',data: {},success (data) {// 每分鐘更新一次數據_this.data = data;Vue.nextTick(function() {_this.initChart();});_this.chartTimeout = setTimeout(function() {_this.getData();}, 1000 * 60);}})}}
}
</script>
5、資源的高度可復用
為了使組件，自定義指令，自定義過濾器復用，要將可復用的內容單獨拆離，
將組件放置在components目錄內，
將自定義指令放置在 directives 目錄內，
將自定義過濾器放置在 filters 目錄內

Paste_Image.png
6、css的使用
將業務型的css單獨寫一個文件，

Paste_Image.png

功能型的css，最好和組件一起，不推薦拆離，比如一個通用的confirm確認框。