当前位置：首页 > news >正文

前端-ElementPlus简介

news 2025/10/2 10:33:56

一、 ElementPlus 介绍

Element：是饿了么公司前端开发团队提供的一套基于 Vue3 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如超链接、按钮、图片、表格等等。

官方网站：https://element-plus.org/zh-CN/#/zh-CN

如下图所示就是我们开发的页面和ElementUI提供的效果对比：可以发现ElementUI提供的各式各样好看的按钮
在这里插入图片描述

二、快速入门

准备工作：

step1. 将工程解压到工作目录中，使用VSCode将其打开。

在这里插入图片描述

step2. 参照官方文档，安装ElementPlus的组件库（在当前工程的目录下），执行如下命令：

npm install element-plus --save

step3. 在main.ts 中引入ElementPlus组件库（参照官方文档），最终 main.ts 中代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

制作组件：

1）. 访问ElementPlus的官方文档，查看对应的组件源代码。

在这里插入图片描述

2). 在 views 目录下，创建Element.vue组件文件，复制组件代码，调整成自己想要的。

<script setup lang="ts"></script><template><el-row class="mb-4"><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></el-row>
</template><style scoped></style>