想让 Element Plus 在 Vue 项目中正常使用，必须完成三项关键配置：样式引入、组件启用、图标全局注册。首先导入并 use Element Plus，同时确保 CSS 样式文件的引入顺序在 use 之前；接着遍历注册 @element-plus/icons-vue 中的全部图标组件；最后在 App.vue 中通过 el-button 进行效果验证。

在 Cursor 中创建 Vue 项目后，如果希望 Element Plus 组件可以正常渲染、编辑器类型提示生效、图标组件能够直接调用，那么这三步配置必须全部完成，任何一步缺失都可能导致组件样式异常或图标报错。

安装Element Plus及相关依赖

在 Cursor 内置终端中执行以下安装命令：

npm install element-plus @element-plus/icons-vue --sa ve

如果你的项目启用了 TypeScript，还建议确认类型声明已安装完整（大多数新建项目通常已默认包含）：

npm install -D @types/node

配置main.ts实现全局引入

打开 src/main.ts 文件，按照下面的顺序替换原有内容：

第一步：导入 createApp、App，以及 Element Plus 核心库和样式文件

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

第二步：创建应用实例，并通过 app.use 启用 Element Plus

const app = createApp(App)
app.use(ElementPlus)

第三步：挂载 Vue 应用

app.mount('#app')

【注意】必须确保import 'element-plus/dist/index.css'这一行写在app.use(ElementPlus)之前，否则 Element Plus 样式可能无法正确生效。

注册图标组件（避免报错）

继续在 main.ts 中补充以下代码（位置放在 app.use(ElementPlus) 之后、app.mount('#app') 之前）：

引入 @element-plus/icons-vue 中的全部图标组件：
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
随后通过遍历 ElementPlusIconsVue 的每一项，将对应图标组件统一注册到 app 实例中：
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}

完成这一步之后，你就可以在任意 .vue 文件中直接使用 这样的写法，而不需要单独 import 图标组件，大幅提升 Element Plus 图标调用效率。

验证是否成功

打开 App.vue，在 template 中加入一行测试代码：

测试按钮

保存并刷新浏览器后，如果配置成功，页面中应显示为蓝色的 Element Plus 按钮，并具备悬停交互效果。若仍然显示为普通 HTML 按钮，请重点检查 main.ts 中 CSS 引入路径是否拼写正确，或确认 node_modules/element-plus/dist/index.css 文件是否真实存在。