本文详细记录了在 Vue3 项目中引入 Element Plus 的两种主流方式。首先介绍通过 npm 进行全局注册的标准步骤，包括安装依赖、配置 main.js 及使用示例。随后重点讲解基于 Vite 的按需引入方案，利用 vite-plugin-style-import 和 vite-plugin-components 实现组件与样式的自动加载，优化项目体积。
在 Vue3 项目中集成 Element Plus 的详细操作指南
执行以下步骤前，请确保开发环境已正确安装 Node.js 及 npm，且 Vue 项目脚手架已搭建完毕。
1. 打开终端或命令行工具，导航至项目根目录。
2. 执行以下安装命令：
npm install element-plus --save3. 待安装进程完成后，打开项目根目录下的 package.json 文件，检查依赖列表。
若文件中存在 "element-plus": "^2.1.5" 记录，则表明安装成功。
4. 进入 src/main.js 文件，添加 Element Plus 的导入语句。
import { createApp } from 'vue'
import App from './App.vue'
// 导入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')5. 配置完成后即可在组件中使用。此处提供一个包含表格组件的示例，建议新建独立组件进行测试，或直接粘贴至 App.vue 文件中验证。
<template>
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
</template>
<script setup>
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>运行效果如下所示：
参考官方文档获取更多信息。
Element Plus 官方文档：一个专为 Vue 3 设计的 UI 框架。
补充：Vue3 中 Element Plus 优雅实现按需引入的方法
以下以 Vite 构建的项目为例进行演示。
需安装两个辅助插件：vite-plugin-style-import 与 vite-plugin-components。
首先执行命令下载这两个插件：npm i vite-plugin-style-import vite-plugin-components -D
接着在 vite.config.js 中进行相应配置。
//vite.config.js
import styleImport from 'vite-plugin-style-import'
import ViteComponents, { ElementPlusResolver } from 'vite-plugin-components'
export default defineConfig({
plugins: [
vue(),
//按需导入element-plus组件
ViteComponents({
customComponentResolvers: [ElementPlusResolver()],
}),
//按需导入element-plus的css样式
styleImport({
libs: [
{
libraryName: 'element-plus',
esModule: true,
resolveStyle: name => {
return `element-plus/lib/theme-chalk/${name}.css`
},
},
],
}),
})
无需再修改 main.js 文件。完成 Element Plus 安装及 vite.config.js 配置后，插件将自动处理组件挂载与样式引入。
import { createApp } from 'vue'
// import ElementPlus from 'element-plus'
// import 'element-plus/lib/theme-chalk/index.css'
import App from './App.vue'
createApp(App).mount('#app')
通过上述单次配置，后续使用任意组件时均可自动导入，从而完美实现按需加载的目标。
总结
本文介绍了 Vue3 引入 Element Plus 的相关方法，更多内容可查阅本站历史文章或浏览后续章节，感谢支持。