Vue3中Element Plus使用 -附完整代码

前言

首先介绍一下什么是 Element Plus

Element Plus 是一套为构建基于 Vue 3 的组件库而设计的 UI 组件库（UI Kit）。

它为开发者提供了一套丰富的 UI 组件和扩展功能，帮助开发者快速构建高质量的 Web 应用

目前Element Plus官方的最新版本是2.9.9

---

一、安装

  我这里使用的编译器是VSCode  只需要将你的项目文件在集成终端打开输入指令即可

npm install element-plus

  下载完之后可以在 package.json中查看是否安装成功

二、使用步骤

1.引入库

我们需要在配置文件（main.js）中引入ElementPlus模块

2.使用

我们需要先去ElementPlus官网找到对应组件的代码，复制进你的代码中即可

ElementPlus官网  一个 Vue 3 UI 框架 | Element Plus

我这里选用了一个按钮组件

给外面的盒子写上对应的样式

我这里没有用到官网中的TS，用的是JS代码

<template>
 <div class="login">
    <el-button type="primary" :icon="Edit" class="app"/>
    <el-button type="primary" :icon="Share" class="app"/>
    <el-button type="primary" :icon="Delete" class="app" />
    <el-button type="primary" :icon="Search" class="app">Search</el-button>
    <el-button type="primary" class="app">
      Upload<el-icon class="el-icon--right"><Upload /></el-icon>
    </el-button>
 </div>
</template>
<script setup>

import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

</script>
<style>
@import url(/src/assets/css/userLogin.css);
</style>

3.效果展示