Element UI 是一款基于 Vue.js 的前端 UI 组件库，它提供了丰富的组件和便捷的 API，极大地提升了 Vue.js 项目的开发效率和界面质量。然而，随着项目需求的多样化，原生的 Element UI 主题可能无法完全满足个性化定制的需求。本文将详细介绍如何在 Vue.js 与 Element UI 中轻松打造个性化自定义主题。
1. 引入 Element UI
首先，在 Vue.js 项目中引入 Element UI。可以通过 npm 或 yarn 安装 Element UI：
npm install element-ui
# 或者
yarn add element-ui
然后，在 main.js 中全局引入 Element UI 和默认样式：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
现在，项目中可以使用 Element UI 的所有组件。
2. 定制化主题
Element UI 支持自定义主题，使得我们可以根据项目需求调整组件样式。以下介绍几种定制化主题的方法：
方法一：在项目中改变 SCSS 变量
如果你的项目使用 SCSS，可以创建自定义的 SCSS 文件，写入以下内容：
/* 改变主题色变量 */
--color-primary: teal;
/* 改变 icon 字体路径变量，必需 */
--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：
import Vue from 'vue';
import Element from 'element-ui';
import './[自定义的scss文件名].scss';
Vue.use(Element);
需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。
方法二：命令行主题工具
如果你的项目没有使用 SCSS，可以使用命令行主题工具进行深层次的主题定制：
// 安装主题工具
npm i element-theme -g
// 安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
# 从 npm
npm i element-theme-chalk -D
# 从 GitHub
npm i https://github.com/
方法三：在线主题编辑器
Element UI 提供了在线主题编辑器，可以方便地选择颜色、边框、字体等参数，生成并下载自定义样式文件。
3. 预设主题
Element UI 通常会提供一些预设的主题，用户可以直接选择使用，无需从头开始定制。这些预设主题通常包含了不同配色的 SCSS 文件，可以方便地引入到项目中。
4. 按需引入
为了优化性能，Element UI 允许开发者按需引入组件，避免加载未使用的样式。这可以通过配置 babel-plugin-component 插件实现。
npm install babel-plugin-component -D
然后，在 .babelrc 中配置：
{
"presets": [["es2015", "modules": false]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
import Button, Select from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
5. 总结
通过以上方法，可以轻松地在 Vue.js 与 Element UI 中打造个性化自定义主题。根据项目需求选择合适的方法，让你的项目更具特色。