一、注意事項

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確認框。