Vue3 ElementPlus 自定义主题样式教程

Vue3 ElementPlus 自定义主题样式教程

想要在Vue3项目中使用ElementPlus自定义主题样式，请按照以下步骤操作：

1. 安装ElementPlus

npm install element-plus --save

2. 安装sass和sass-loader

npm install sass sass-loader --save-dev

3. 创建自定义主题样式文件

创建一个名为'element-variables.scss'的文件，用于定义自定义主题样式。例如：

// 改变主题色
$--color-primary: #409EFF;

// 改变全局字体大小
$--font-size-base: 14px;

// 改变全局字体颜色
$--text-color: #333;

4. 在main.js中引入ElementPlus和自定义主题样式文件

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import './element-variables.scss'

createApp(App).use(ElementPlus).mount('#app')

现在，您的Vue3应用程序将使用自定义主题样式。