在 Vue 3 中引入 Element UI 需要使用 Element Plus，因为 Element UI 是为 Vue 2 设计的，而 Element Plus 是专为 Vue 3 设计的版本。以下是详细步骤：

安装 Element Plus

1. 创建 Vue 3 项目（如果还没有）

如果你还没有创建 Vue 3 项目，可以使用 Vue CLI 或 Vite 来创建一个：

# 使用 Vue CLI
npm install -g @vue/cli
vue create my-project

# 或使用 Vite
npm create vite@latest my-project --template vue

2. 安装 Element Plus

进入你的项目目录，然后安装 Element Plus：

npm install element-plus

或者使用 yarn：

yarn add element-plus

引入 Element Plus

方式一：完整引入（推荐新手使用）

在 main.js 或 main.ts 中完整引入 Element Plus：

import { createApp } 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')

方式二：按需引入（推荐生产环境使用）

为了减少打包体积，可以使用按需引入。首先安装 unplugin-vue-components 和 unplugin-auto-import：

npm install -D unplugin-vue-components unplugin-auto-import

然后在 vite.config.js 或 vue.config.js 中配置：

// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

对于 Vue CLI 项目，修改 vue.config.js：

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }
})

使用 Element Plus 组件

现在你可以在 Vue 组件中使用 Element Plus 的组件了。例如：

<template>
  <div>
    <el-button type="primary">主要按钮</el-button>
    <el-date-picker v-model="date" type="date" placeholder="选择日期" />
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const date = ref('')
    return {
      date
    }
  }
}
</script>

国际化（可选）

如果需要使用中文语言包：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus, {
  locale: zhCn,
})
app.mount('#app')

主题定制（可选）

Element Plus 支持主题定制。你可以通过以下方式自定义主题：

1. 安装 sass：

npm install sass -D

2. 创建一个 SCSS 文件（如 element-variables.scss）来覆盖变量：

/* element-variables.scss */
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    'primary': (
      'base': #409eff,
    ),
  ),
);

3. 在 vite.config.js 或 vue.config.js 中配置：

// vite.config.js
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element-variables.scss" as *;`,
      },
    },
  },
})

总结

• 安装：使用 npm install element-plus 安装 Element Plus
• 引入：可以选择完整引入或按需引入
• 使用：直接在组件中使用 Element Plus 组件
• 高级功能：支持国际化、主题定制等

通过以上步骤，你就可以在 Vue 3 项目中成功集成并使用 Element Plus 了。