前言
在 Vue.js 开发过程中,ElementUI 是一个常用的组件库。但是,很多时候默认主题无法满足我们的需求,需要进行主题的定制。本文将介绍如何在 Vue.js 项目中引入 ElementUI 并进行主题的定制,希望对正在使用 Vue.js + ElementUI 进行开发的同学有所帮助。
引入 ElementUI
首先需要在项目中引入 ElementUI。可以通过 npm 安装最新的 ElementUI:
npm install element-ui -S
然后在 main.js 中引入 ElementUI:
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
通过以上代码,我们就可以在项目中使用 ElementUI 提供的组件了。
ElementUI 定制主题
使用默认主题
使用默认主题十分简单,只需在 main.js 中引入 ElementUI 的默认主题即可。
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
修改主题颜色
修改主题颜色需要用到 ElementUI 自带的主题生成器 - theme-chalk。
首先需要下载 theme-chalk:
npm install element-theme -g
然后在项目根目录下执行以下命令:
et -i
执行命令后会提示选择使用的主题,选择 ElementUI 默认主题。接着会要求输入颜色值,其中 $--color-primary 是 ElementUI 主色,也是最常修改的地方。
? Which theme do you want to generate? element ? vue? no ? primary color #409EFF ? Use gray? no
输入完成后,执行以下命令:
et
此时,ElementUI 会自动根据新的主题生成新的样式,会存放在项目根目录下的 element-variables.scss 文件中。
将以下代码加入到 src/styles/element-variables.scss 文件中:
@import "element-theme-chalk/exports";
然后在 main.js 文件中加入以下代码:
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import '@/styles/element-variables.scss' Vue.use(ElementUI)
现在,为主色赋予其它颜色值的操作已经完成了。因此,我们可以根据自己的需求修改主题颜色了。
修改自定义样式
我们可以通过修改 element-variables.scss 文件中,相关内容区域修改主题扩展样式。
比如,我们借助 Sass 的 @mixin 来定义样式,并在 element-variables.scss 中进行调用,以作为自定义的样式。
-- -------------------- ---- ------- -- -- ---------- --- ------- ------------------------------ -- ------ ------ ------ - ----------------- ----- ----------------- ----- - -- ------ ------ ------ - ----------------- ----- ----------------- -- - -- ---- ------- - -------- ------- -------- -------------------- - ------- - -------- ------- -------- -------------------- -展开代码
然后在 main.js 文件中引入以上样式:
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import '@/styles/element-variables.scss' import '@/styles/theme.scss' Vue.use(ElementUI)
现在,在 html 页面中添加 .theme1 或 .theme2 样式即可应用到对应的主题样式,比如:
<el-button class="theme1">自定义主题1</el-button> <el-button class="theme2">自定义主题2</el-button>
总结
通过以上实践,我们学会了如何定制 ElementUI 主题。在 Vue.js 开发过程中,ElementUI 是常用的组件库,具有丰富的组件和使用方便的特点,定制主题也是其又一个重要的特点。掌握了主题定制的方式,可以极大地提升产品界面设计和开发效率。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6481999848841e989411314c