點(diǎn)擊“在線主題生成工具“，會(huì)進(jìn)到一個(gè)新的頁(yè)面，點(diǎn)擊“切換主題色“，點(diǎn)完之后，會(huì)出現(xiàn)一個(gè)彈出層，可以自己選擇顏色，也可以自己輸入自己的主題色，選擇好之后，點(diǎn)擊“確定“，最后記得點(diǎn)擊“切換“，你就會(huì)看見(jiàn)主題色已經(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編寫(xiě)的，所以要先安裝sacc

npm i sass-loader -D
//sass-loader依賴(lài)于node-sass
npm i node-sass -D

2、在項(xiàng)目的靜態(tài)文件夾下創(chuàng)建一個(gè)element-variables.scss文件，寫(xiě)入以下內(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中渲染函數(shù)的非兼容變更
這篇文章主要介紹了詳解vue3中渲染函數(shù)的非兼容變更，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-03-03
記錄vue做微信自定義分享的一些問(wèn)題
這篇文章主要介紹了記錄vue做微信自定義分享的一些問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
VUE3數(shù)據(jù)的偵聽(tīng)超詳細(xì)講解
在Vue3中watch特性進(jìn)行了一些改變和優(yōu)化,與computed不同,watch通常用于監(jiān)聽(tīng)數(shù)據(jù)的變化,并執(zhí)行一些副作用,這篇文章主要給大家介紹了關(guān)于VUE3數(shù)據(jù)偵聽(tīng)的相關(guān)資料,需要的朋友可以參考下
2023-12-12
實(shí)例講解vue源碼架構(gòu)
在本篇文章中小編給大家分享了關(guān)于vue源碼架構(gòu)的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們學(xué)習(xí)下。
2019-01-01
使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能
這篇文章主要介紹了使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能,需要的朋友可以參考下
2019-04-04
淺談vue中computed屬性對(duì)data屬性賦值為undefined的原因
本文主要介紹了淺談vue中computed屬性對(duì)data屬性賦值為undefined的原因，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果
這篇文章主要介紹了用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
babel7.x和webpack4.x配置vue項(xiàng)目的方法步驟
這篇文章主要介紹了babel7.x和webpack4.x配置vue項(xiàng)目的方法步驟,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
vue2安裝vue-router報(bào)錯(cuò)的解決方法
vue-router的安裝不是理想化的,會(huì)出現(xiàn)問(wèn)題,需要靜下心認(rèn)真研究,熬過(guò)去就會(huì)懂得更多,這篇文章主要給大家介紹了關(guān)于vue2安裝vue-router報(bào)錯(cuò)的解決方法,需要的朋友可以參考下
2022-03-03
vue2.0的虛擬DOM渲染思路分析
vue2.0采用了虛擬DOM來(lái)代替對(duì)真實(shí)DOM的操作，最后通過(guò)某種機(jī)制來(lái)完成對(duì)真實(shí)DOM的更新，渲染視圖。這篇文章主要介紹了vue2.0的虛擬DOM渲染,需要的朋友可以參考下
2018-08-08