前端进阶之路-从传统前端到VUE-JS（第三期-VUE-JS配套UI组件的选择）（Element Plus的构建）

经过前两期的VUE-JS介绍与分析，我们对VUE-JS已经有了一定的了解，本期内容主要内容为介绍组件

首先，什么是组件

我们来定义一下

从功能角度看

组件是实现特定功能的最小单元。它可以是一个简单的按钮、一个输入框，也可以是一个复杂的表单、一个轮播图等。例如，一个“登录按钮”组件，它的功能是响应用户的点击事件，并触发登录逻辑。用户只需要使用这个组件，而不需要关心它的内部实现细节，比如按钮的样式、点击事件的绑定等。

从代码复用角度看

组件是可以被多次复用的代码片段。在大型前端项目中，很多界面元素会多次出现。通过将这些元素封装成组件，可以在不同的地方重复使用，避免重复编写代码。比如在一个电商网站中，商品卡片组件可以在商品列表页面、购物车页面等多个地方被使用。每次使用时，只需要传递不同的数据（如商品名称、价格、图片等），就可以渲染出不同的商品卡片。

用做菜的角度通俗易懂点说就是：

前端组件就像是做饭时的各种食材，每种食材都有自己的味道和口感；而Vue框架则像是一个智能厨房，它提供了各种厨具（工具和方法），还可以把食材（组件）按照食谱（代码逻辑）组合起来，很快就可以做出一道菜（完整的网页或应用）。

先来介绍一下适用于VUE框架的主流UI组件库

组件库名称	优点	缺点
Element Plus	组件丰富，覆盖表单、表格、弹窗等后台高频场景。	组件样式定制化不如其他库灵活，可能无法满足一些个性化需求。
Ant Design Vue	遵循 Ant Design 设计规范，交互体验统一。	基础版功能较精简，复杂需求需二次开发
Naive UI	无依赖、高性能，打包体积仅 20KB+。	社区和文档支持相对较少，可能无法及时解决开发者遇到的问题。
Vuetify	严格遵循 Google 的 Material Design 指南，视觉体验一致且美观。	深度定制需要理解 Material Design 的设计理念和规范。
View UI Plus	组件丰富，设计简洁精美。	暂未发现明显缺点，但相比 Element Plus 和 Ant Design Vue，社区活跃度稍低。
Vant	专为移动端设计，轻量级。	主要适用于移动端，不适合桌面端开发。

在接下来我们使用Element Plus，因为功能比较丰富，使用频率大，方便我们理解UI组件库和就业

首先

第一个问题，我们怎么用他

很简单，直接安装到项目文件夹就行了

我们先看一下Element Plus的官方文档来了解一下

在https://element-plus.org/zh-CN/guide/installation.html介绍中，我们可以知道，可以通过

npm install element-plus --save

这条命令来安装组件

我们来实践一下

首先启动vue看一下现在的状态

还是接着上期内容的状态进行（初始状态也可以，本期内容以了解为主）

接下来我们在项目中安装Element Plus

在终端中输入

npm install element-plus --save

出现这个后就说明安装成功

但是还不能使用，我们要把它配置到我们的文件中

文档https://element-plus.org/zh-CN/guide/quickstart.html告诉了我们怎么调用

我们在main.ts中修改内容即可

接下来我们继续使用官网文档来使用UI组件：https://element-plus.org/zh-CN/component/overview.html

我们加入一个按钮试一试（切记看好再调用）

可以看到成功了

接下来就由各位自行探索，因为只要有传统前端的基础后，了解如何配置UI组件后，自行探索反而更方便

（其它UI组件库调用方式相同，如果有问题请在评论区发表或私信）