资讯专栏INFORMATION COLUMN

vue-element超初级教学

1fe1se / 800人阅读

摘要:与定时器的恩恩怨怨。这时候我这样做的首先要把定时器填进数据中控制住定时器的声明周期,否则它会烦死你在项目中的运用。

本次写的项目是关于机器终端管理的,一开始使用的是最基本的bootstrap+jq+html以及一些小插件,后来由于项目有很多重复度很高的地方,而且老大要求扩展度要高,比如头部,左边栏,所以决定和另一名前端小伙伴使用框架进行项目重构(小项目啦),最终选择了Vue+webpack+jq+vueElement,因为以前用过嘛~在这里,我要说一句,Vue-element超好用,因为我们有框架。
第一步:下载模板解压到你的目录下面是地址
https://github.com/jerry9022/...
第二步:下载环境

npm install

第三步:下载jquery sass vuehighcharts等一系列组件不会的请看我的webpack初级教学。

下面就是爽上天的时候了,这个模板几乎涵盖了你想要的所有,不需要教程,只需要复制粘贴改数据源,当然,我遇到了几个困难点,新手可能都会遇到,我去看下项目,然后在这里我给大家讲一下。
1.比如你想用这个框架的table时,正常情况可以这样写。



但是当你想给这个column添加个:class的时候,你发现无法添加,这时候我看了下模板,原来你要这样写,比如你的class在数据里面存着,css样式也写好。


    
  

这个方法就是自定义一个模板,并把数据传到模板中,模板只需要用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
                }
});

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83887.html

相关文章

  • Vue—Cli中使用动态Highcharts line图表初级教学

    摘要:开始让动起来我会直接贴部分代码加少量解释,建议先看下官方给的动态实时刷新示意图循环次,线从图表右侧开始出现,轴会分为秒。 效果展示 社会你龙哥,人丑话不多,先来张图!图片传不上去!!!可能公司限制了,大家自己幻想下吧 highcharts环境搭配 由于技术现水平限制,需要用到两个Highcharts,下面我会解释,先上代码 npm install --save highcharts ...

    stackvoid 评论0 收藏0
  • 云时代的专业设计教学有多酷?看看南开的泽塔云

    摘要:是泽塔云在年月率先推出的国内第一款基于超融合架构的虚拟化产品。正因为高度的重视,南开大学文学院的老师们本着严谨的态度,对泽塔云开展了长达两个月的调研。泽塔云基于超融合架构的云解决方案,成为南开大学在教育信息化走向时代的一大助攻。要说中国历史上文化底蕴十分深厚的高校,南开大学一定榜上有名。这所刚刚度过100岁生日的知名学府,虽然校区规模不大,却为中国培养了一代又一代的杰出人才。走进南开大学,这...

    LoftySoul 评论0 收藏0
  • C/C++游戏项目详细教学:《扫雷》

    摘要:扫雷最原始的版本可以追溯到年一款名为方块的游戏。两年后,汤姆安德森在的基础上又编写出了游戏地雷,由此奠定了现代扫雷游戏的雏形。年,微软公司的罗伯特杜尔和卡特约翰逊两位工程师在系统上加载了该游戏,扫雷游戏才正式在全世界推广开来。 扫雷最原始的版本可以追溯到1973年一款名为方块的游戏。 不久,...

    meteor199 评论0 收藏0
  • 学习Java编程哪个知识点最难学

    摘要:很多刚接触编程的同学都觉得学习编程很简单,但是学到后期越学越吃力,今天小编就总结一下编程哪块最难学。目前来看,对于那些打算通过学习来找到一份工作的同学来说,可以分为三个学习阶段,初级,中级,高级。   很多刚接触Java编程的同学都觉得学习Java编程很简单,但是学到后期越学越吃力,今天小编就总结一下Java编程哪块最难学。   目前来看,对于那些打算通过学习Java来找到一份工作的同...

    dcr309duan 评论0 收藏0
  • iKcamp出品微信小程序教学共5章16小节汇总(含视频)

    摘要:微信小程序课程,面向所有具备前端基础知识的同学阅读要求读者需要具备但不限于以下技能更佳一共四部分十五小节,适合七天的训练营。 ?? 微信小程序课程,面向所有具备前端基础知识的同学 ?? 阅读要求 读者需要具备但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小节,适合七天的训练营。 从现在开始,我假装你已经掌握了 html、 css以及 ES6...

    elliott_hu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<