下面我就为大家分享一篇Vue的elementUI实现自定义主题方法，具有很好的参考价值，希望对大家有所帮助。
使用vue开发项目，用到elementUI，根据官网的写法，我们可以自定义主题来适应我们的项目要求，下面来介绍一下两种方法实现的具体步骤，（可以参考官方文档自定义主题官方文档），先说项目中没有使用scss编写，用主题工具的方法（使用的较多）
第一种方法：使用命令行主题工具
使用vue-cli安装完项目并引入element-ui（具体可参考第二种方法中的介绍）
一、安装工具
1，安装主题工具
npm i element-theme -g
2，安装chalk主题，可以从 npm 安装或者从 GitHub 拉取最新代码
# 从 npm npm i element-theme-chalk -D # 从 GitHub npm i https://github.com/ElementUI/theme-chalk -D
二、初始化变量文件
et -i [可以自定义变量文件，默认为element-variables.scss] > ✔ Generator variables file
这时根目录下会产生element-variables.scss（或自定义的文件），大致如下：
$--color-primary: #409EFF !default; $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */ $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */ $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */ $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */ $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ $--color-success: #67c23a !default; $--color-warning: #eb9e05 !default; $--color-danger: #fa5555 !default; $--color-info: #878d99 !default; ...
三、修改变量
直接编辑 element-variables.scss 文件，例如修改主题色为自己所需要的颜色（如： 紫色（purple））
$--color-primary: purple;
四、编译主题
修改完变量后，要编译主题（如果编译后，再次修改了变量，需要重新编译）
et > ✔ build theme font > ✔ build element theme
五、引入自定义主题
最后一步，将编译好的主题文件引入项目（编译的文件默认在根目录下的theme文件下，也可以通过 -o 参数指定打包目录），在入口文件main.js中引入
import '../theme/index.css' import ElementUI from 'element-ui' import Vue from 'vue' Vue.use(ElementUI)
在项目中写些样式，看下主题色是否改变：（主题色变为紫色）
默认按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮
第二种方法： 直接修改element样式变量
在项目中直接修改element的样式变量，（前提是你的文档也是使用scss编写）
一、首先用vue-cli安装一个新项目：
1，安装vue:
npm i -g vue
2，在项目目录下安装vue-cli：
npm i -g vue-cli
3，基于webpack建立新项目（ vue-project）
vue init webpack vue-project
4，依次输入以下命令行，运行vue-project
cd vue-project npm i npm run dev
二、安装elementUI以及sass-loader,node-sass(项目中使用scss编写需要依赖的插件)
1,安装element-ui
npm i element-ui -S
2,安装sass-loader，node-sass
npm i sass-loader node-sass -D
在这里说一下，不需要配置webpack.base.conf.js文件,vue-loader会根据不同类型文件来配置相应loader来打包我们的样式文件（感兴趣的可看下vue-loader的核心代码）
三、改变element样式变量
1.在src下建立element-variables.scss文件（名字可以自定义），写入如下代码：
/* 改变主题色变量 */ $--color-primary: teal; /* 改变 icon 字体路径变量，必需 */ $--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts'; @import "../node_modules/element-ui/packages/theme-chalk/src/index";
2.在入口文件main.js中引入上面的文件即可
import Vue from 'vue' import Element from 'element-ui' import './element-variables.scss' Vue.use(Element)
看下效果吧，在文件里引入些样式看看，如button
默认按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮
默认的颜色已经变为我们自定义的了，有其他的改变在element-variable.scss文件中改变变量即可
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci 在Vue中如何使用elementUI实现自定义主题方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk menyelesaikan masalah bahawa partition cakera keras tidak boleh dibuka
Apakah yang perlu saya lakukan jika komputer saya dimulakan dan skrin menunjukkan skrin hitam tanpa isyarat?
Bagaimana untuk mendapatkan Douyin Xiaohuoren
Apakah kad bebas oracle?
format flac
Cara menutup pustaka sumber apl
Bagaimana untuk mengubah suai pendaftaran
penggunaan split js
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
