Vue.js 与 ElementUI 集成实践:如何定制主题

阅读时长 5 分钟读完

前言

在 Vue.js 开发过程中,ElementUI 是一个常用的组件库。但是,很多时候默认主题无法满足我们的需求,需要进行主题的定制。本文将介绍如何在 Vue.js 项目中引入 ElementUI 并进行主题的定制,希望对正在使用 Vue.js + ElementUI 进行开发的同学有所帮助。

引入 ElementUI

首先需要在项目中引入 ElementUI。可以通过 npm 安装最新的 ElementUI:

然后在 main.js 中引入 ElementUI:

通过以上代码,我们就可以在项目中使用 ElementUI 提供的组件了。

ElementUI 定制主题

使用默认主题

使用默认主题十分简单,只需在 main.js 中引入 ElementUI 的默认主题即可。

修改主题颜色

修改主题颜色需要用到 ElementUI 自带的主题生成器 - theme-chalk。

首先需要下载 theme-chalk:

然后在项目根目录下执行以下命令:

执行命令后会提示选择使用的主题,选择 ElementUI 默认主题。接着会要求输入颜色值,其中 $--color-primary 是 ElementUI 主色,也是最常修改的地方。

输入完成后,执行以下命令:

此时,ElementUI 会自动根据新的主题生成新的样式,会存放在项目根目录下的 element-variables.scss 文件中。

将以下代码加入到 src/styles/element-variables.scss 文件中:

然后在 main.js 文件中加入以下代码:

现在,为主色赋予其它颜色值的操作已经完成了。因此,我们可以根据自己的需求修改主题颜色了。

修改自定义样式

我们可以通过修改 element-variables.scss 文件中,相关内容区域修改主题扩展样式。

比如,我们借助 Sass 的 @mixin 来定义样式,并在 element-variables.scss 中进行调用,以作为自定义的样式。

-- -------------------- ---- -------
-- -- ---------- ---
------- ------------------------------

-- ------
------ ------ -
  ----------------- -----
  ----------------- -----
-

-- ------
------ ------ -
  ----------------- -----
  ----------------- --
-

-- ----
------- -
  -------- -------
  -------- --------------------
-

------- -
  -------- -------
  -------- --------------------
-
展开代码

然后在 main.js 文件中引入以上样式:

现在,在 html 页面中添加 .theme1 或 .theme2 样式即可应用到对应的主题样式,比如:

总结

通过以上实践,我们学会了如何定制 ElementUI 主题。在 Vue.js 开发过程中,ElementUI 是常用的组件库,具有丰富的组件和使用方便的特点,定制主题也是其又一个重要的特点。掌握了主题定制的方式,可以极大地提升产品界面设计和开发效率。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6481999848841e989411314c

纠错
反馈

纠错反馈