在Vue 3项目中集成Element Plus组件库的步骤

安装Element Plus

首先，确保你的开发环境已经安装了Node.js和npm（或yarn）。然后，在你的Vue 3项目根目录下打开终端，并执行以下命令来安装Element Plus：

npm install element-plus --save
# 或者使用yarn
yarn add element-plus

配置插件

接下来，在你的Vue 3项目中配置Element Plus。通常情况下，我们会在 main.js或 main.ts（如果你使用TypeScript）文件中全局注册Element Plus。

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)app.use(ElementPlus)app.mount('#app')

如果只想按需引入部分组件以减少最终包大小，可以借助babel-plugin-import插件实现按需加载。

首先需要安装这个Babel 插件：

npm install babel-plugin-import -D 
# 或者使用yarn 
yarn add babel-plugin-import -D 

然后，在babel配置文件（通常是 .babelrc或者 babel.config.js) 中添加如下配置:

module.exports = {plugins: [["import",{"libraryName": "element-plus","customStyleName": (name) => {// 引入对应的css文件而不是scss文件, 这样可以避免自定义主题时可能出现的问题。return `element-plus/lib/theme-chalk/${name}.css`;}}]]
};

这样就可以实现按需引入了。

使用组建

一旦完成上述步骤，就可以开始在Vue单文件组建(.vue) 中直接引用 Element Plus 组件了。例如要添加一个按钮和输入框:

<template><el-button type="primary">点击我</el-button><el-input placeholder="请输入内容"></el-input>
</template><script setup>
// 如果进行了按需加载，则需要单独导入每个要用到的元素：
// import { ElButton, ElInput } from 'element-plus';
</script><style scoped></style>

以上代码展示如何将按钮和输入框加入到模板当中，并且展示如何导出特定元素(如果进行了按需加载)。

自定义主题

若需要自定义 Element Plus 的默认主题颜色等样式变量，则可通过修改scss变量来实现。首先确保已经正确地全局注册并且能够正常地运行起来之后再进行此操作。
创建一个新SCSS/SASS 文件比如 custom-theme.scss, 并覆盖相应变量:

/* custom-theme.scss */
$--color-primary: teal;@import "~element-plus/packages/theme-chalk/src/index";

然后将此SCSS 文件而不是默认CSS 文件导入到 main.js 中:

import './custom-theme.scss'const app = createApp(App)
// ...