vue3 element ui

<template>
  <div id="app">
    <!-- Element UI 的按钮组件 -->
    <el-button type="primary" @click="handleClick">点击我</el-button>
  </div>
</template>

<script>
import { ElButton } from 'element-plus';

export default {
  name: 'App',
  components: {
    ElButton
  },
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
};
</script>

<style>
/* 引入 Element UI 的样式 */
@import "~element-plus/lib/theme-chalk/index.css";
</style>

解释说明：

1. 模板部分 (<template>)：

   • 使用了 el-button 组件，这是来自 Element UI 的按钮组件。
   • 按钮的 type 属性设置为 "primary"，表示这是一个主要按钮。
   • 绑定了一个点击事件 @click="handleClick"，当按钮被点击时会调用 handleClick 方法。

2. 脚本部分 (<script>)：

   • 导入了 ElButton 组件，并在 components 中注册。
   • 定义了一个 handleClick 方法，当按钮被点击时会在控制台输出一条消息。

3. 样式部分 (<style>)：

   • 引入了 Element UI 的全局样式文件，确保所有组件都能正确显示。

这个示例展示了如何在 Vue 3 项目中使用 Element UI 的按钮组件。