vue-element超低级教授教养

2024年4月30日 260次阅读 来源: kindleLee

本次写的项目是关于机械终端治理的,一开始运用的是最基本的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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞