vue项目如何引入element ui、iview和echarts
更新时间：2022年09月13日 08:35:24 作者：芝士焗红薯
这篇文章主要介绍了vue项目如何引入element ui、iview和echarts，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue引入element ui、iview和echarts
记性不好，每次引入都要重新搜一遍，今天把几个自己整理一下。全部引入，没搞按需引入。
1.vue项目引入elementui
控制台输入npm install element-ui -s
main.js文件中输入
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
2.vue项目中引入iview
控制台输入npm install iview -s
import iView from 'iview' // 引入ivew库 import 'iview/dist/styles/iview.css' // 使用CSS Vue.use(iView)
3.vue项目中引入echarts
控制台输入npm install echarts -s
import * as echarts from 'echarts' // 导入echarts Vue.prototype.$echarts = echarts // 并设置对应的属性
4.main.js文件代码截图
5.echarts在引入后
需要使用echarts的页面，还需要import一下
<script> import * as echarts from 'echarts' </script>
6.引入之后就可以使用他们的组件了
iview与elementui对比
表格
合并单元格
elementui中的table表格组件包含行列的合并单元格；iview的table表格组件只提供了表头的合并单元格；如果表格涉及合并单元格建议使用elementui。（iview 4.0.0 之后设置属性 span-method 可以指定合并行或列的算法。）
左表头固定，可以左右滑动时
iview给表格绑定高后，数据少会有空白；但是绑定max-height后，左右滑动的左边这一块，会被遮盖导致划不动
elemeui可以完美的解决数据多和少的时候的左右滑动，表格多的时候建议使用elementui
风格
ivew的整体风格比较清新，适合后台管理系统
按需引入
两者都可以按需引入
表单验证
ivew的表单验证样式；
elementui带验证表单
iview带验证表单
下拉选择器
iview的下拉选择器select的option是渲染在组件内部，和elementui的渲染在body不一样。如果页面有几百个selcet，会造成严重的卡顿，这种时候建议选择elementui。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了elementui实现预览图片组件二次封装的方法 ，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要为大家详细介绍了vue文件树组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-03-03
vue2+elementUI的el-tree的选中、高亮、定位功能的实现
这篇文章主要介绍了vue2+elementUI的el-tree的选中、高亮、定位功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09
今天小编就为大家分享一篇vue.js循环radio的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了Vue网络请求的三种实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-09-09
这篇文章主要给大家介绍了vue与iframe页面数据互相通信的实现示例,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了Vue中导入excel文件的两种方式,大概有两种导入文件的方法：form表单和el-upload，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue-cli 目录结构详细讲解总结，详细的介绍了整个项目的目录以及目录文件的用法，非常具有实用价值，需要的朋友可以参考下2019-01-01
本篇文章主要介绍了vue-loader教程介绍，vue-loader就是告诉webpack如何将vue格式的文件转换成js。有兴趣的可以了解一下2017-06-06![elementui[el-table]toggleRowSelection默认多选事件无法选中问题](//img.jbzj.com/images/xgimg/bcimg9.png)
elementui[el-table]toggleRowSelection默认多选事件无法选中问题
这篇文章主要介绍了elementui[el-table]toggleRowSelection默认多选事件无法选中问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
![elementui[el-table]toggleRowSelection默认多选事件无法选中问题](http://img.jbzj.com/images/xgimg/bcimg9.png)
最新评论