Element Plus 对比 Arco design本文主要是对 Element Plus 和 Arco Design

本文主要是对 Element Plus 和 Arco Design Vue 两个组件库的简单对比，可能对你的技术选型有帮助，本文的主观成分比较多

CSS设计变量

Element Plus

--el-text-color-primary: #303133;
--el-text-color-regular: #606266;
--el-text-color-secondary: #909399;
--el-text-color-placeholder: #a8abb2;
--el-text-color-disabled: #c0c4cc;

Arco Design Vue

--color-text-1: #121314; // 标题、重点文本
--color-text-2: #5c5c5c; // 常规正文
--color-text-3: #909399; // 次要正文、提示文本
--color-text-4: #c2c2c2; // 辅助文本、禁用文本、占位符placeholder、提示文本

相比之下，个人比较喜欢arco的命名方式，简单、易记、简短、优雅

按钮 Button 对比

先简单对比下各自按钮的props，按钮能大概看出两者的设计理念和规范性

Element Plus

屏幕截图 2023-10-26 232537.png

Arco Design Vue

屏幕截图 2023-10-26 232733.png

Element一直以简单易用受欢迎，通过上面对比，个人感觉Arco的更简洁，更易用，Element Plus的props显得有些混乱，很容易写成以下代码：

<template>
  <el-button type="primary" circle round text link> 按钮 </el-button>
</template>

按钮形状没有进行归集，而且要经常性看文档，再来看看arco的

屏幕截图 2023-10-26 233557.png

对形状等进行了归类，对ts提示友好很多，你不需要记有什么形状，你只需要记住shape就行了，详细点的自己去对比下

还有就是扩展性，比如以后我想加个菱形的形状，像element来说要新增一个属性，会造成props属性越来越多，对于arco来说，只需要在shape多加一个属性值就行，而且这对于组件内部的封装逻辑也会清晰很多，也更容易去维护

看过太多的第三方组件库，以及一些个人开发的组件库，大部分都是仿element的设计，可见element影响太广了，不过还是觉得arco的按钮设计棒一些

Row/Col 组件对比

Element Plus

屏幕截图 2023-10-26 234445.png

Arco

说实话，我不太喜欢element对align的值篡改，css的align的值就是 start | center | end | stretch，如果我给row加了flex-direction: column;属性，那align就不是top或者bottom的含义了

Card 组件对比

Element Plus

Arco

header一般指的是头部的意思，Element Plus在这里把它当做标题，标题我觉得用title更合适一些，header表示整个头部

描述列表 Descriptions 组件对比

Element Plus

Arco

Arco支持data属性，同时也支持插槽形式, 且支持align文字对齐，这个很方便，更多细节和功能自己研究，Element Plus的DescriptionsItem有align和label-align，不过我认为放在Descriptions上更合适

表格 Table 组件对比

Element Plus

这个不多说了，熟悉的人都比较了解，Element 表格是没有自带分页的

Arco

通过下面例子，可以看出Arco支持columns属性，通过配置形式生成，自带分页，pagination属性完全继承分页组件的props(组件库很多用到了继承思维，这个很好)，pagination里面可以写onChange和onPageSizeChange事件，这对hooks封装非常合适

hooks封装具体可以看看这篇文章： useTable表格hooks封装和使用(Vue3)