安装 Element Plus
首先，确保你已经安装了 Vue.js。然后，你可以使用 npm 或 yarn 安装 Element Plus：
# 使用 npm 安装
npm install element-plus
# 或者使用 yarn 安装
yarn add element-plus
引入样式
在你的项目中，你需要引入 Element Plus 的样式文件。你可以在项目的入口文件（通常是 main.js 或 main.ts）中添加以下代码：
import { createApp } from '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 的主题，可以通过引入一个 SCSS 文件并进行相应的配置。首先，创建一个 SCSS 文件，比如 theme.scss，然后在入口文件中引入它：
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import './theme.scss'; // 引入自定义主题文件
const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');
在 theme.scss 文件中，你可以重写 Element Plus 的样式变量，以达到定制主题的效果。详细的变量可以在 Element Plus 的源码中的 _variables.scss 文件中找到。
全局配置
Element Plus 提供了一个全局配置的对象，你可以在使用组件前进行全局配置。例如，你可以设置全局的提示框持续时间：
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
const app = createApp(App);
const options = {
// 设置全局提示框持续时间为 5 秒
toast: {
duration: 5000,
},
};
app.use(ElementPlus, options);
app.mount('#app');
在上述例子中，我们通过 options 对象设置了全局的提示框持续时间。
按需引入
如果你希望减小打包体积，可以使用按需引入的方式。在 babel.config.js 文件中，配置 Element Plus 的按需引入：
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
'component',
{
libraryName: 'element-plus',
styleLibraryName: 'theme-chalk',
},
],
],
};
在配置完成后，你可以在需要使用的组件中直接引入，而不必引入整个 Element Plus 库：
import { createApp } from 'vue';
import { ElButton, ElInput } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
const app = createApp(App);
app.component(ElButton.name, ElButton);
app.component(ElInput.name, ElInput);
app.mount('#app');
以上是一些常见的 Element Plus 配置信息。具体配置可以根据项目的需求进行调整。详细的配置选项和全局配置可以在 Element Plus 的[官方文档](https://element-plus.org/#/en-US/component/installation)中找到。
转载请注明出处：http://www.zyzy.cn/article/detail/5527/ElementPlus