Vue3怎么使用element-plus

最新推荐文章于 2025-05-21 17:19:58 发布

听听那晚风

最新推荐文章于 2025-05-21 17:19:58 发布

阅读量2w

点赞数 20

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/GongWei_/article/details/109986596

vue 专栏收录该内容

57 篇文章

订阅专栏

本文介绍如何在Vue3项目中引入并使用Element Plus组件库。通过简单三步：安装依赖、配置main.js文件以及使用组件，快速搭建美观且交互丰富的用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3出来一段时间了，element也更新了版本去兼容vue3，在这里简单的介绍一下如何使用element-plus吧

1、安装

npm install element-plus --save

2、在main.js引入

import { createApp, Vue } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

3、使用
这里使用的是按钮

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>