vue3 element-ui

### 关于 Vue3 和 Element-UI 组件库的开发者而言，了解两者之间的兼容性和具体实现方法至关重要。需要注意的是，在早期版本中，Element-UI 主要支持 Vue2.x 版本的应用程序开发[^1]。

然而，随着社区的发展和技术的进步，出现了针对 Vue3 的适配方案以及新的基于 Vue3 构建的相似风格组件库——Element Plus。Element Plus 是由官方维护的一个全新设计体系下的组件库，它不仅继承了原有 Element-UI 设计理念的优点，还特别优化以适应 Vue3 生态环境的需求[^2]。

#### 安装依赖项
为了开始使用 Element Plus (适用于 Vue3)，可以通过 npm 或 yarn 来安装必要的包：

npm install element-plus --save

或者如果你更倾向于使用 Yarn:

yarn add element-plus

#### 初始化配置
完成上述操作之后，则可以在项目的入口文件 `main.js` 中引入整个 ElementPlus 库并注册全局组件；当然也可以按需加载特定模块来减少打包体积。

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

通过这种方式可以快速启动一个带有 Element Plus 风格界面的新应用实例。

#### 使用示例
下面给出一段简单的代码片段展示如何创建按钮和对话框两个常用控件：

<template>
  <div id="example">
    <!-- Button -->
    <el-button type="primary">Primary</el-button>

    <!-- Dialog -->
    <el-dialog :visible.sync="dialogVisible" title="提示">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: true,
    }
  },
}
</script>

此模板定义了一个主要类型的按钮以及一个可见状态受控属性管理显示与否的模态窗口。