vue-element超初级教学

2024年1月10日 261次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞