iview ui是一个强大的ui库基于vue，有很多实用的基础组件比elementui的组件更丰富，主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式基于 npm + webpack + babel 开发，支持 ES2015 高质量、功能丰富友好的 API ，自由灵活地使用空间。

官网地址：https://www.iviewui.com
Github: https://github.com/TalkingData/iview-weapp

Element-ui与layui对比

1.layUI界面漂亮，组件齐全，用起来也比较简单顺手，部分组件基于jquery，图标太少，真心感觉不够用，以后能扩充一下就好了

2.vue的elementUI和iviewUI界面美观，组件齐全，代码也很简洁欸，iviewUI的图标量较elementUI更大，两个框架都是基于vue进行使用的

iViewui与Elementui对比

element，iview都支持按需加载。

element使用scss，iview使用less

组件调用

其实element与iview之间的组件调用，大致相似。
主要在一些细节功能上，有一些差别。

组件命名方式

element用的是短横线分隔式命名，例：h-table
iview和heyui用的是驼峰式命名，例：Table

这一点上面，iview与heyui比较有优势，代码可读性上面优势更大一些。

组件的功能性

element在组件的功能性上面整体占优势。
大多数组件提供的功能都比较多。
就以table组件来说，参数是两页屏幕都看不完，iview比heyui更多。
但是像tree或者autocomplete，heyui的实现更底层，更易扩展，比element和iview复杂的多。

Element的调用方式

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。