在vue项目中改变element的主题色

Dear 丶 2023-06-15 04:51 8阅读 0赞

第一步  
打开“elementUI官网“ https://element.eleme.cn/\#/zh-CN/theme/preview  
点击右上角颜色选择器选择自己喜欢的主题色，并下载。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]  
第二步 ，下载完成后解压，更改文件名“element“(我取名是这个，毕竟是elementUI嘛)。

第三步 ，在外层新建一个文件夹命名“theme“，再引入其中。  
将文件引入到项目中，直接上图吧，我引入位置如下。。。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]  
第四步 ，引入到main.js中了哦。

import './theme/element/theme/index.css'

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191120114758228.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019112011503741.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关在Vue项目中使用Element组件

0 写在前面使用组件可以快速进行开发，使用Element UI轻松制作出网页，为前端开发人员大大减轻了代码负担，即使是后端程序员也可以快速上手做出比较精美的界面。

绝地灬酷狼/ 2024年03月26日 15:47/ 0 赞/ 114 阅读

相关在vue项目中改变element的主题色

第一步打开“elementUI官网“ https://element.eleme.cn/\/zh-CN/theme/preview 点击右上角颜色选择器选择自己喜欢的

Dear 丶/ 2023年06月15日 04:51/ 0 赞/ 9 阅读

相关 element自定义主题色

修改element的主题色，提供以下两种方法 1.在项目中改变 SCSS 变量 Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了

忘是亡心i/ 2023年02月10日 11:29/ 0 赞/ 225 阅读

相关 antd 在webpack.config配置主题色

> 虽然官方提供了craco-less 来覆盖less-loader 提供的 less 变量，但自己也想试着修复config来配置一下首先需要运行 [yarn eject

末蓝、/ 2023年01月01日 13:57/ 0 赞/ 238 阅读

相关 vue 使用 css/less 动态更换主题色

.css .drak-theme { --color-primary: 000000; } .light-theme {

﹏ヽ暗。殇╰゛Y/ 2022年12月25日 08:53/ 0 赞/ 216 阅读

相关 Ant-design-vue定制主题色

Ant-design-vue定制主题色要求：框架本身使用的蓝色主题色，需要更换成UI指定的颜色。 ![在这里插入图片描述][watermark_type_ZHJv

浅浅的花香味﹌/ 2022年09月14日 13:29/ 0 赞/ 393 阅读

相关 vue项目中引入element

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5

本是古典何须时尚/ 2022年09月10日 10:11/ 0 赞/ 282 阅读

相关在vue项目中引入element，并改变主题色

写项目提高开发效率是最重要的，引入UI框架就是提高开发效率的有效途径。这里就说一下自己是如何引入UI框架的——vue中引入elementUI。（项目其实早已经开发完了，只

Dear 丶/ 2022年05月21日 06:53/ 0 赞/ 297 阅读

相关在vue项目中升级更新element ui版本

一、升级element-ui需要先卸载原先的版本,在cmd中输入 `npm uninstall element-ui` `二、`然后重新安装element-ui

电玩女神/ 2022年03月15日 15:50/ 0 赞/ 2390 阅读

相关 vue中更改 element-ui主题色

第一步打开“elementUI官网“ 点击“自定义主题“，找到“在线主题生成工具“ ![在这里插入图片描述][watermark_type_ZmFuZ3p

女爷i/ 2022年01月25日 15:57/ 0 赞/ 480 阅读