element ui 框架的优势_ElementUI和Ant Design对比

之前先接触了ElementUI,然后后面又接触了Ant Design，在这里做个对比，希望通过对比这两前端ui框架，能够更加深入的了解和使用这些框架。

表格对比

首先，通过一张表格来对比这两框架的异同吧

个人感受

从体验上来看：

我更加倾向于elementUI, UI上更加漂亮，使用起来更加容易上手。

一开始，我最新接触的就是elementUI，感觉elementUI这个框架更加适合于面向外部开发。

而作为对比的Ant Design，也有一定的优势。

从功能上来讲，后者更加齐全。比如回到顶部组件：树形选择：，Ant Design更加适合管理平台的开发。

从实用上来看：

对于pro版本，vue-element-admin允许初始化基础版，而ant-design-pro这个初始化后有大量的例子，开发之前还得把例子删掉，这点感觉不太好。

总之，两个框架的pro版本做的都非常棒，但个人更加倾向于ant-design，毕竟组件多占有非常大的优势。

总之：

如果是想快速上手，又希望ui更加漂亮，建议用elementUI；如追求的是比较复杂的后台管理平台，可以考虑采用ant-design-pro，而且ant-design-pro无论表格还是表单，都是高度可配置化的。这点相对于elementUI来说，ant-design-pro虽然稍微复杂了点，但是换来更大的便利。

一些建议和经验

以下代码部分都是vue，不涉及react

1. elementUI的菜单组件在手机端点击会回弹的问题

修改trigger为click的方式，因为默认hover时，手机上并不能有很好的体验。

2. elementUI如何实现通用表单的配置

采用form-create这个库可以很方便的实现表单完全的json配置

另外还有一种方式，就是利用Vue的插槽实现，这种方式也适合ant-design的可配置表单的实现。

ps: 注意插槽名称不要带数字，最好不要

下面是利用插槽实现可配置的例子，这里以ant-design为例：

form.json

然后是编写通用表单组件：

分为两个文件：baseForm.vue和commonForm.vue，对外使用commonForm.vue即可：

baseForm.vue

commonForm.vue

ps: 这里需要注意v-bind和v-on，平时我们都是用:以及@，而这里属性和事件并不是固定的，通过v-bind="props"以及v-on="events"可以批量的不固定的设置属性和事件

3. 关于手动文件上传

注意，ant-design中，file对象可以通过绑定的beforeUpload方法得到。

4. Ant Design表单自定义组件，且支持校验

实际上这个很好做：

这里需要注意，属性只能是value，这样也同时支持了value和v-model。然后假设有自定义组件demo.vue，则该表单组件可以这样写：

5. store文件夹下的状态管理中，modules文件夹下所有文件的自动引入

这个可以采纳vue-element-admin中的写法：

替换strore/index.vue文件：

这里需要注意，strore/modules下的文件不一定都是状态文件，所以可以对于value进行进一步判断，比如说判断value是否存在，是否有state这个属性。