前后端分离——1.0为什么我选择iview而不是element

前言：

这是前后端分离的第一季，也是我文章的开始之旅，为在保证效率的同时也保证文章质量，文章更新周期一般会保持3天一更。此次的文章仅代表我个人见解，希望在选择上对新入手vue和前后端分离的人员1起到参考作用，主要通过对两个UI框架的对比和对新手的友好程度进行比较。

两者官网预览：

Iview：官网：https://www.iviewui.com/

Element：官网：https://element.eleme.cn/#/zh-CN

开始：

两个UI的组件对比，表格中有的会进行基本的一一对应：

在组件类型中iview的UI框架中共计含有58个组件可以提供选择，element中有55个组件可以提供选择，在除去相同的组件外iview的多出的组件为：

1. 面板分割

2. 单元格

3. 锚点

4. 加载进度条

5. 自动完成

6. 相对时间

7. 图钉

共计七个组件。

Element多出的组件为：

1. 图片

2. 日历

3. 页头

4. 弹框

5. 文字链接

6. 边框

共计六个组件，比iview少一个，在组件对比上两者的组件基本满足使用，多出的组件也是各有所长，二者可以说平分秋色。

提供的例子

在正常的使用中我们正常使用的主要有，布局、表格和表单三个，我们主要从这三个组件中给出的例子数进行对比。

在组件中给出的例子，在表格和表单上两者各有千秋，相差比较小。但是在布局上element给出的例子仅仅只有一个例子，对于新手来说不是很友好，在构建基本界面如果使用element区构建会比较有难度不是很友好，难以架构出一个比较好的界面。

错别字替换为

去

忽略

个人使用体验

Iview在使用的时候一定要注意是否要使用“i-”这个字符，在input和col一定要进行替换，如不替换会出现EL语法错误，网上关于这个问题有解决的教程和方法，但是比较复杂不利于开发，在遇到时最好直接替换，网上的解决办法比较复杂不适合新手使用，有时按网上办法解决后会提示其他问题报错。

Element在使用的过程中我并未出现语法问题问题，但在使用时如果直接复制例子源码，需要手动在html部分用包裹起来，否则会报错，这个不同友好开始使用的人会对这个问题莫名其妙而且在复制源码的时候部分不会给出html+JavaScript+style代码全部架构，另一个小问题是在使用表单的时候如果直接复制粘贴源码会出现格式错乱问题，官方没有给出具体的修饰方法。

错别字替换为

问题

忽略

基本总结：

1、如果你是一个新手、或者刚刚接触vue框架那么建议你先使用iview进行一次简单UI的架构，不建议你直接使用element，你如果是存初学者或许你都不知道需要在element源码html部分用template对他进行包裹。直接出错会导致你直接放弃。

2、在from格式问题上也会需要你花费大量功夫才能调好。

3、如果你基础扎实也可以尝试对element进行使用，在动画上和一些生产力组件在element上不需要付费即可使用，当然iview免费组件也能满足你的基本使用。

1、此次分享到此结束，下一次给大家分享我自己编写的一套vuecli+iview一起构建的后台管理UI，全部自己开发如果你喜欢可以商用无需版权。

喜欢我的可以关注、评论或者收藏哦！

再见！