淺談vue中改elementUI默認(rèn)樣式引發(fā)的static與assets的區(qū)別
首先從這說起 vue項目中的elementUI的默認(rèn)樣式怎么改
由于elementUI的樣式太單調(diào)，比如這個slider滑塊
elementUI中的API是沒辦法改變這個slider的顏色的，可是老板喜歡很黃，非要用yellow色。😓沒辦法。拿人錢財替人消災(zāi)。
我試著在寫的組件中直接去更改這個slider的顏色，發(fā)現(xiàn)根本不能直接改😺。有意思😁。
我們分析一下：當(dāng)我們想要更改某個元素的css樣式時，只要找到元素具體的class去更改樣式的思路肯定是沒問題，既然不生效，那么肯定是沒找到這個元素的確切位置，瀏覽器搜索不到這個class，所以直接修改才不生效。
此刻突然想到style中的scoped屬性，scoped這個屬性限制了下面css代碼的作用域只在當(dāng)前組件中生效，此時直接去更改elementUI的屬性，瀏覽器搜索不到這個元素的最外層的父級，于是這個東西就不會生效。嗯，沒錯。
那么我們可以像傳統(tǒng)的html頁面外部引入css樣式那樣，單獨(dú)建一個css文件去更改elementUI樣式就可以了。那么問題來了
這個css文件放在哪里呢？
vue中有個src下的assest文件是放靜態(tài)資源的，還有個與src文件同級的static文件也是放靜態(tài)資源的，這兩個文件有什么區(qū)別呢？
我修改的elementUI的元素的css文件應(yīng)該放在哪個文件假下面呢？
google一下之后了解到
區(qū)別一：assets文件是src下的，所以最后運(yùn)行時需要進(jìn)行打包，而static文件不需要打包就直接放在最終的文件中了
區(qū)別二：assets中的文件在vue中的template/style下用../這種相對路徑的形式進(jìn)行引用，在script下必須用@import的方式引入，而static下的文件在.vue中的任何地方都只要使用../這種相對路徑的方式引入，
總結(jié)一下
1.assets最好用來放置樣式、字體文件和圖片等公共靜態(tài)資源，只要src下面的組件中用到的資源就放在assets中
2.在項目中，經(jīng)常會用帶一些沒有npm包的第三方插件，放在static中
對，就這樣！
以上這篇淺談vue中改elementUI默認(rèn)樣式引發(fā)的static與assets的區(qū)別就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue修改數(shù)據(jù)視圖更新原理學(xué)習(xí)
這篇文章主要為大家介紹了vue修改數(shù)據(jù)視圖更新原理學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-11-11
Vue.js的組件的使用有3個步驟：創(chuàng)建組件構(gòu)造器、注冊組件和使用組件。這篇文章主要介紹了vue 注冊組件的使用,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了解決vue表單為空也能提交的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
ElementUI+命名視圖實(shí)現(xiàn)復(fù)雜頂部和左側(cè)導(dǎo)航欄
本文主要介紹了ElementUI+命名視圖實(shí)現(xiàn)復(fù)雜頂部和左側(cè)導(dǎo)航欄，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動端圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
最近在學(xué)習(xí)前端制作了一個購物車小球的動畫效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2019-09-09
這篇文章主要介紹了VSCode插件安裝完成后的配置,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
關(guān)于Vue 自定義指令實(shí)現(xiàn)元素拖動的詳細(xì)代碼
這篇文章主要介紹了Vue 自定義指令實(shí)現(xiàn)元素拖動,在使用自定義指令之前，先對自定義指令有一定的了解，主要從自定義指令定義范圍，鉤子函數(shù)方面入手，需要的朋友可以參考下2022-01-01
Vue2/3?登錄后用戶無操作半小時后自動清除登錄信息退出登錄下線(示例代碼)
這篇文章主要介紹了Vue2/3?登錄后用戶無操作半小時后自動清除登錄信息退出登錄下線,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
elementUI實(shí)現(xiàn)下拉選項加多選框的示例代碼
因產(chǎn)品需求和UI樣式調(diào)整，本文主要實(shí)現(xiàn)elementUI下拉選項加多選框的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10