Vue+Webpack開發

ivan820819發表於2017-01-29
VueWeb

轉載自：https://www.talkingcoder.com/article/6309726065044556372

寫在前面

本文為系列文章，總共分四節，建議按順序閱讀：

《Vue+Webpack使用規範》

《Vue+Webpack開發可複用的單頁面富應用教程（配置篇）》

《Vue+Webpack開發可複用的單頁面富應用教程（元件篇）》

《Vue+Webpack開發可複用的單頁面富應用教程（技巧篇）》


注意要點

  1. 開發儘量使用ES2015，遵循CommonJS規範
  2. 切勿直接操作DOM，要運算元據
  3. 儘量使用Vue的語法糖，比如可以用:style代替v-bind:style；用@click代替v-on:click
  • 剛開始使用Vue比較容易進入的一個誤區，Vue是以資料驅動的，所以只用關係資料的變化即可，不是萬不得已，千萬不要主動操作DOM；
  • 不要在JS裡繫結跟業務相關的事件，業務事件及邏輯，應該在HTML上繫結。在JS裡繫結事件應該用於使用了第三方的外掛等場景，如果主動繫結了事件，記得在相關生命週期接觸繫結以及銷燬相關例項，比如在元件內建立了一個百度echarts，並加了一個定時器來更新資料，在元件銷燬時，應該銷燬這個echarts例項，並將定時器clear；

規範

  1. 命名。元件名稱（包括路由元件）使用"-"來分割，比如persons-new-poi.vue，不推薦使用駝峰，詳見http://cn.vuejs.org/guide/components.html#資源命名約定
  2. 事件。在派發和廣播事件時，事件的名稱也使用"-"來分割，而且字首為該元件的名稱，不能使用駝峰 ，例如當前元件為open-layer.vue，則事件名稱為 open-layer-close

資料

不要將HTML的Attributes和Vue的Model混用

比如最終要實現的程式碼是：

<img src=123.jpg>
<a href="index.html?id=123"></a>
<div id="id-123"></div>

比如Vue例項為：

new Vue({
    el: 'body',
    data: {
        id: 123
    }
})

錯誤 的使用是：

<img src={{ id }}.jpg>
<a href="index.html?id={{ id }}"></a>
<div id="id-{{ id }}"></div>

正確 的使用是：

<img :src=id + '.jpg'>
<a :href="'index.html?id=' + id"></a>
<div :id="'id-' + id "></div>

class和style的使用

靜態的class放在HTML的class特效內，而動態的應該使用:class，比如

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>

在元件中使用第三方外掛

比如元件初始化為：

<style>
 
</style>
<template>
 
</template>
<script>
    import echarts from 'echarts';
    export default {
        data () {
            return {
 
            }
        },
        ready: {
 
        },
        destroyed: {
 
        },
        methods: {
 
        }
    }
</script>

要建立一個echarts例項，應該在ready裡面完成，但程式碼可能很多而且需要拆分，所以可以在methods裡定義許多方法，最終程式碼如下：

<style></style>
<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>

資源的高度可複用

元件、指令、過濾器

為了使元件、自定義指令、自定義過濾器高度可複用，需要儘可能地將可複用的內容單獨拆離，將 元件 放置在 components 目錄內（如果需要，可以在components目錄內再建立目錄），將 自定義指令 放置在 directives 目錄內（如果需要，可以在directives目錄內再建立目），將自定義過濾器放置在 filters 目錄內（如果需要，可以在filters目錄內再建立目）。使用方法舉例：

<script>
    import Picker from '../picker'
    import Cell from '../cell'
    import Popup from '../popup'
    import Flexbox from '../flexbox'
    import FlexboxItem from '../flexbox-item'
 
    import array2string from '../../filters/array2String'
    import value2name from '../../filters/value2name'
 
    module.exports = {
        components: {
            Picker,
            Cell,
            Popup,
            Flexbox,
            FlexboxItem
        },
        filters: {
            array2string,
            value2name
        },
        data: function() {
            return {}
        },
        methods: {
 
        }
    }
</script>

CSS的使用

可將業務型的CSS程式碼單獨寫一個css檔案，比如首頁，index.css，放置在 styles 目錄內（如果需要，可以在styles目錄內再建立目錄），在使用index.css的元件內，使用@import引入css，，對於區域性的css，可以在style上增加scoped，舉例:

<style scoped>
    @import('reset.css');
    @import('index.css');
    h1{
        color: red;
    }
</style>
<template>
    <h1>title</h1>
</template>
<script>
     
</script>
功能型的css，建議和元件一起，不推薦拆離，比如一個通用的confirm確認框。

相關文章