python vue element_vue-element超初级教学

本次写的项目是关于机器终端管理的,一开始使用的是最基本的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样式也写好。

{{props.what.show}}

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

}

});

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