vue中如何更改element-ui主題色

更新時(shí)間：2022年08月10日 11:24:49 作者：CherryLee_1210

這篇文章主要介紹了vue中如何更改element-ui主題色，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue更改element-ui主題色

第一步

打開“elementUI官網(wǎng)“

點(diǎn)擊“自定義主題“，

找到“在線主題生成工具“

第二步

點(diǎn)擊“在線主題生成工具“，會(huì)進(jìn)到一個(gè)新的頁(yè)面，點(diǎn)擊“切換主題色“，點(diǎn)完之后，會(huì)出現(xiàn)一個(gè)彈出層，可以自己選擇顏色，也可以自己輸入自己的主題色，選擇好之后，點(diǎn)擊“確定“，最后記得點(diǎn)擊“切換“，你就會(huì)看見主題色已經(jīng)已經(jīng)切換了。

例如我設(shè)置的主題色是“#4FCC19“。

第三步

點(diǎn)擊“下載主題“。

下載到你想要的位置，然后解壓，更改文件名“element“(我取名是這個(gè)，畢竟是elementUI嘛)。

第四步

將文件引入到項(xiàng)目中，直接上圖吧，我引入位置如下。。。

在外層新建一個(gè)文件夾命名“theme“，再引入其中。

最后一步

那當(dāng)然是引入到main.js中了哦。

import ElementUI from 'element-ui'
import './theme/element/index.css'

Vue.use(ElementUI);

使用element-ui自定義主題色

每個(gè)項(xiàng)目都有自己的主題色，接下來(lái)看看如何改變主題色。

效果圖

1、element-UI的theme-chalk是使用scss編寫的，所以要先安裝sacc

npm i sass-loader -D
//sass-loader依賴于node-sass
npm i node-sass -D

2、在項(xiàng)目的靜態(tài)文件夾下創(chuàng)建一個(gè)element-variables.scss文件，寫入以下內(nèi)容：

/* 改變主題色變量 */
$--color-primary: #f00;

/* 改變 icon 字體路徑變量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

3、在項(xiàng)目入口文件引入剛剛創(chuàng)建的文件：

然后就可以實(shí)現(xiàn)效果了

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3使用ResizeObserver監(jiān)聽元素的尺寸寬度變化
要監(jiān)聽 div 寬度的變化,可以使用 ResizeObserver 接口,ResizeObserver 允許你觀察一個(gè)或多個(gè)元素的尺寸變化,并在發(fā)生變化時(shí)執(zhí)行回調(diào)函數(shù),所以本文給大家介紹了Vue3如何使用ResizeObserver監(jiān)聽元素的尺寸寬度變化,需要的朋友可以參考下
2024-08-08
vue3+webpack中npm發(fā)布組件的實(shí)現(xiàn)
本文主要介紹了vue3+webpack中npm發(fā)布組件的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2025-01-01
VUE使用router.push實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和傳參方式
這篇文章主要介紹了VUE使用router.push實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
Vue使用Vue Elements實(shí)現(xiàn)文件預(yù)覽功能
在現(xiàn)代 web 開發(fā)中,用戶與系統(tǒng)的交互體驗(yàn)越來(lái)越重要,而文件上傳和文件預(yù)覽是最常見的交互場(chǎng)景之一,本文將詳細(xì)介紹如何在 Vue 項(xiàng)目中使用 Vue Elements 來(lái)實(shí)現(xiàn)文件預(yù)覽的功能,包括基本使用方法、常見實(shí)例、性能優(yōu)化以及樣式自定義等內(nèi)容,需要的朋友可以參考下
2025-01-01
公共Hooks封裝報(bào)表導(dǎo)出useExportExcel實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了公共Hooks封裝報(bào)表導(dǎo)出useExportExcel實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
使用vite構(gòu)建vue3項(xiàng)目的實(shí)現(xiàn)步驟
通過(guò)本文,您可以了解如何使用Vue CLI創(chuàng)建Vue 3項(xiàng)目,配置Vite,利用其優(yōu)勢(shì)進(jìn)行開發(fā),具有一定的參考價(jià)值,感興趣的可以了解一下
2023-08-08
vue2更改data里的變量不生效時(shí),深層更改data里的變量問(wèn)題
這篇文章主要介紹了vue2更改data里的變量不生效時(shí),深層更改data里的變量問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue之this.$router.push頁(yè)面刷新問(wèn)題
這篇文章主要介紹了vue之this.$router.push頁(yè)面刷新問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12
Vue3中集成高德地圖并實(shí)現(xiàn)平移縮放功能
隨著前端技術(shù)的不斷發(fā)展,地圖應(yīng)用在我們的項(xiàng)目中越來(lái)越常見,本文將介紹如何在Vue3項(xiàng)目中集成高德地圖,并通過(guò)簡(jiǎn)單的配置實(shí)現(xiàn)地圖的平移和縮放功能,需要的朋友可以參考下
2024-09-09
React/vue開發(fā)報(bào)錯(cuò)TypeError:this.getOptions?is?not?a?function
這篇文章主要給大家介紹了關(guān)于React/vue開發(fā)報(bào)錯(cuò)TypeError:this.getOptions?is?not?a?function的解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07