vue中如何更改element-ui主題色
更新時間：2022年08月10日 11:24:49 作者：CherryLee_1210
這篇文章主要介紹了vue中如何更改element-ui主題色，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue更改element-ui主題色
第一步
打開“elementUI官網(wǎng)“
點擊“自定義主題“，
找到“在線主題生成工具“
第二步
點擊“在線主題生成工具“，會進到一個新的頁面，點擊“切換主題色“，點完之后，會出現(xiàn)一個彈出層，可以自己選擇顏色，也可以自己輸入自己的主題色，選擇好之后，點擊“確定“，最后記得點擊“切換“，你就會看見主題色已經(jīng)已經(jīng)切換了。
例如我設(shè)置的主題色是“#4FCC19“。
第三步
點擊“下載主題“。
下載到你想要的位置，然后解壓，更改文件名“element“(我取名是這個，畢竟是elementUI嘛)。
第四步
將文件引入到項目中，直接上圖吧，我引入位置如下。。。
在外層新建一個文件夾命名“theme“，再引入其中。
最后一步
那當(dāng)然是引入到main.js中了哦。
import ElementUI from 'element-ui' import './theme/element/index.css' Vue.use(ElementUI);
使用element-ui自定義主題色
每個項目都有自己的主題色，接下來看看如何改變主題色。
效果圖
1、element-UI的theme-chalk是使用scss編寫的，所以要先安裝sacc
npm i sass-loader -D //sass-loader依賴于node-sass npm i node-sass -D
2、在項目的靜態(tài)文件夾下創(chuàng)建一個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、在項目入口文件引入剛剛創(chuàng)建的文件：
然后就可以實現(xiàn)效果了
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解vue3中渲染函數(shù)的非兼容變更，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
這篇文章主要介紹了記錄vue做微信自定義分享的一些問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
在Vue3中watch特性進行了一些改變和優(yōu)化,與computed不同,watch通常用于監(jiān)聽數(shù)據(jù)的變化,并執(zhí)行一些副作用,這篇文章主要給大家介紹了關(guān)于VUE3數(shù)據(jù)偵聽的相關(guān)資料,需要的朋友可以參考下2023-12-12
在本篇文章中小編給大家分享了關(guān)于vue源碼架構(gòu)的相關(guān)知識點內(nèi)容，有需要的朋友們學(xué)習(xí)下。2019-01-01
使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能
這篇文章主要介紹了使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能,需要的朋友可以參考下2019-04-04
淺談vue中computed屬性對data屬性賦值為undefined的原因
本文主要介紹了淺談vue中computed屬性對data屬性賦值為undefined的原因，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
用vue2.0實現(xiàn)點擊選中active其他選項互斥的效果
這篇文章主要介紹了用vue2.0實現(xiàn)點擊選中active其他選項互斥的效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
babel7.x和webpack4.x配置vue項目的方法步驟
這篇文章主要介紹了babel7.x和webpack4.x配置vue項目的方法步驟,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
vue-router的安裝不是理想化的,會出現(xiàn)問題,需要靜下心認(rèn)真研究,熬過去就會懂得更多,這篇文章主要給大家介紹了關(guān)于vue2安裝vue-router報錯的解決方法,需要的朋友可以參考下2022-03-03
vue2.0采用了虛擬DOM來代替對真實DOM的操作，最后通過某種機制來完成對真實DOM的更新，渲染視圖。這篇文章主要介紹了vue2.0的虛擬DOM渲染,需要的朋友可以參考下2018-08-08