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

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

vue-element超初级教学相关推荐

webpack超初级教学
我是跟着这个学的http://www.jianshu.com/p/42e1...,这个文有些东西是webpack1.0的东西,我在我的超初级教程进行了部分更改,有什么错误希望大家指出. 首先在全局进行 ...
超美观的 Vue+Element 开源后台管理 UI
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! EuiAdmin是基于Vue+Element等组件联合开发 ...
vue - element ＜upload＞组件批量上传文档，可携带其他表单数据项一同与文件 “手动提交“ 服务器（类似百度文库系统批量上传前端界面与逻辑）超详细教程示例源码，提供界面与逻辑完整源码
效果图本示例使用的是 element 组件库,其实什么组件库都行(逻辑是一样),只要你是 vue.js 项目就能使用本教程. 本文实现了 vue + element 使用 upload 组件批量上传 ...
超优 Vue+Element+Spring 中后端解决方案
今日推荐推荐一款开源 Java 版的视频管理系统推荐3个快速开发平台前后端都有项目经验又有着落了 14个项目转载:toutiao.com/i6911704074815767048 作者:we ...
Spring Boot Vue Element入门实战(完结)
最近给朋友做一个大学运动会管理系统,用作教学案例,正好自己也在自学VUE,决定用spring boot vue做一个简单的系统.vue这个前端框架很火,他和传统的Jquery 编程思路完全不一样,Jq ...
前后端分离之评论功能前端（1）——django+mysql+vue+element+axios
评论系统前端一. 导入vue和element用到的组件二. 使用element设计页面 2.1 导航菜单 2.2 输入框 2.3 按钮 2.4 显示评论前言: 作者:神的孩子在歌唱大家好,我叫 ...
element ui 图片控件排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统开源项目推荐 1.什么是ElementUI 官网:https://el ...
vue+element 后台管理系统（三）树形图
<!DOCTYPE html> <html class="over_hidd"> <head><meta charset="UT ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...

vue-element超初级教学

vue-element超初级教学相关推荐

最新文章

热门文章