vue-element超初級教學

本次寫的項目是關於機器終端管理的,一開始使用的是最基本的bootstrap+jq+html以及一些小插件，後來因爲項目有不少重複度很高的地方，並且老大要求擴展度要高，好比頭部，左邊欄，因此決定和另外一名前端小夥伴使用框架進行項目重構（小項目啦）,最終選擇了Vue+webpack+jq+vueElement，由於之前用過嘛~在這裏，我要說一句，Vue-element超好用，由於咱們有框架。
第一步：下載模板解壓到你的目錄下面是地址
https://github.com/jerry9022/...
第二步：下載環境

npm install

第三步：下載jquery sass vuehighcharts等一系列組件不會的請看個人webpack初級教學。

下面就是爽上天的時候了，這個模板幾乎涵蓋了你想要的全部，不須要教程，只須要複製粘貼改數據源，固然，我遇到了幾個困難點，新手可能都會遇到，我去看下項目，而後在這裏我給你們講一下。
1.好比你想用這個框架的table時，正常狀況能夠這樣寫。
<el-table :data="warndetaildata" style="width: 100%">

<el-table-column label="信息" prop="what.show">
</el-table-column>

</el-table>
可是當你想給這個column添加個：class的時候，你發現沒法添加，這時候我看了下模板，原來你要這樣寫,好比你的class在數據裏面存着，css樣式也寫好。

<el-table :data="warndetaildata" style="width: 100%">
    <template scope="props" >
        <div :class="props.classstyle">{{props.what.show}}<div>
    </template>
  </el-table>

這個方法就是自定義一個模板，並把數據傳到模板中，模板只須要用Vue的普通寫法就好啦。
2.Vue——router與定時器的恩恩怨怨。
個人項目裏有個highcharts模塊，須要用socketio來傳遞數據，而後我用定時器不斷的給chart添加時間和數據，好嘛！一堆堆的錯誤提示，錯誤緣由通過兩天我發現，只要切換vue路由的時候，這個錯誤就會蹦出來，第一次進頁面不會有錯。這時候我這樣作的：
首先要把定時器填進數據中

beforeDestroy:function(){
            clearInterval(this.timer.timer1);
            clearInterval(this.timer.timer2);
            clearInterval(this.timer.timer3);
        }

控制住定時器的聲明週期，不然它會煩死你！！！
3.vue-highchat在項目中的運用。

npm install vue-highcharts --save

記住，在你應用的頁面中必定將它require進來，當涉及到時間的時候它是頗有用的

var Highcharts = require('highcharts');
Highcharts.setOptions({
                global: {
                    useUTC: false
                }
});

項目模板在最上方，祝你們萬事如意，身體健康。