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确认框。