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合并单元格

elemengui合并

左表头固定，可以左右滑动时

iview给表格绑定高后，数据少会有空白；但是绑定max-height后，左右滑动的左边这一块，会被遮盖导致划不动

elemeui可以完美的解决数据多和少的时候的左右滑动，表格多的时候建议使用elementui

风格

ivew的整体风格比较清新，适合后台管理系统

按需引入

两者都可以按需引入

表单验证

ivew的表单验证样式；

elementui带验证表单

iview带验证表单

下拉选择器

iview的下拉选择器select的option是渲染在组件内部，和elementui的渲染在body不一样。如果页面有几百个selcet，会造成严重的卡顿，这种时候建议选择elementui。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue 如何获取视频第一帧
这篇文章主要介绍了vue 如何获取视频第一帧，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue中在echarts里设置的定时器清除不掉问题及解决
这篇文章主要介绍了vue中在echarts里设置的定时器清除不掉问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
vue 路由懒加载详情
这篇文章主要介绍了vue 路由懒加载，当打包构建应用时，JavaScript 包会变得非常大，影响页面加载，这便是vue 路由懒加载，接下来随小编一起进入文章了解更多详细内容吧
2021-10-10
vue中axios封装使用的完整教程
这篇文章主要给大家介绍了关于vue中axios封装使用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
vue3-vue-router创建静态路由和动态路由方式
这篇文章主要介绍了vue3-vue-router创建静态路由和动态路由方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
详解Vue中AXIOS的封装
这篇文章主要为大家介绍了Vue中AXIOS的封装，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
Vue2常用全局自定义指令的封装详解
这篇文章主要为大家详细介绍了Vue2中多种常用全局自定义指令的封装,包括一键复制,一键长按,图片懒加载等功能,感兴趣的小伙伴可以了解下
2025-02-02
如何写好一个vue组件,老夫的一年经验全在这了（推荐）
这篇文章主要介绍了如何写好一个vue组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Vue3 响应式系统实现 computed
这篇文章主要介绍了 Vue3 响应式系统实现 computed，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下
2022-06-06
vue表单验证rules及validator验证器的使用方法实例
在vue开发中,难免遇到各种表单校验,下面这篇文章主要给大家介绍了关于vue表单验证rules及validator验证器使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07