Vue+Webpack使用规范

一、注意事项
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确认框。