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
                }
});

项目模板在最上方,祝人人万事如意,身体健康。

    原文作者:kindleLee
    原文地址: https://segmentfault.com/a/1190000010090648
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞