淺談vue中改elementUI默認(rèn)樣式引發(fā)的static與assets的區(qū)別
首先從這說(shuō)起 vue項(xiàng)目中的elementUI的默認(rèn)樣式怎么改
由于elementUI的樣式太單調(diào)，比如這個(gè)slider滑塊
elementUI中的API是沒(méi)辦法改變這個(gè)slider的顏色的，可是老板喜歡很黃，非要用yellow色。😓沒(méi)辦法。拿人錢(qián)財(cái)替人消災(zāi)。
我試著在寫(xiě)的組件中直接去更改這個(gè)slider的顏色，發(fā)現(xiàn)根本不能直接改😺。有意思😁。
我們分析一下：當(dāng)我們想要更改某個(gè)元素的css樣式時(shí)，只要找到元素具體的class去更改樣式的思路肯定是沒(méi)問(wèn)題，既然不生效，那么肯定是沒(méi)找到這個(gè)元素的確切位置，瀏覽器搜索不到這個(gè)class，所以直接修改才不生效。
此刻突然想到style中的scoped屬性，scoped這個(gè)屬性限制了下面css代碼的作用域只在當(dāng)前組件中生效，此時(shí)直接去更改elementUI的屬性，瀏覽器搜索不到這個(gè)元素的最外層的父級(jí)，于是這個(gè)東西就不會(huì)生效。嗯，沒(méi)錯(cuò)。
那么我們可以像傳統(tǒng)的html頁(yè)面外部引入css樣式那樣，單獨(dú)建一個(gè)css文件去更改elementUI樣式就可以了。那么問(wèn)題來(lái)了
這個(gè)css文件放在哪里呢？
vue中有個(gè)src下的assest文件是放靜態(tài)資源的，還有個(gè)與src文件同級(jí)的static文件也是放靜態(tài)資源的，這兩個(gè)文件有什么區(qū)別呢？
我修改的elementUI的元素的css文件應(yīng)該放在哪個(gè)文件假下面呢？
google一下之后了解到
區(qū)別一：assets文件是src下的，所以最后運(yùn)行時(shí)需要進(jìn)行打包，而static文件不需要打包就直接放在最終的文件中了
區(qū)別二：assets中的文件在vue中的template/style下用../這種相對(duì)路徑的形式進(jìn)行引用，在script下必須用@import的方式引入，而static下的文件在.vue中的任何地方都只要使用../這種相對(duì)路徑的方式引入，
總結(jié)一下
1.assets最好用來(lái)放置樣式、字體文件和圖片等公共靜態(tài)資源，只要src下面的組件中用到的資源就放在assets中
2.在項(xiàng)目中，經(jīng)常會(huì)用帶一些沒(méi)有npm包的第三方插件，放在static中
對(duì)，就這樣！
以上這篇淺談vue中改elementUI默認(rèn)樣式引發(fā)的static與assets的區(qū)別就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3+vite相對(duì)路徑的處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue啟動(dòng)失敗報(bào)錯(cuò):Module?not?found:?Error:?Can‘t?resolve?&apos
這篇文章主要給大家介紹了關(guān)于Vue啟動(dòng)失敗報(bào)錯(cuò):Module?not?found:?Error:?Can‘t?resolve?'less-loader'解決的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Vue 實(shí)現(xiàn)高級(jí)穿梭框 Transfer 封裝過(guò)程
本文介紹了基于Vue2和Element-UI實(shí)現(xiàn)的高級(jí)穿梭框組件Transfer的設(shè)計(jì)與技術(shù)方案,組件支持多項(xiàng)選擇,并能實(shí)時(shí)同步已選擇項(xiàng),包含豎版和橫版設(shè)計(jì)稿,并提供了組件的使用方法和源碼,此組件具備本地分頁(yè)和搜索功能,適用于需要在兩個(gè)列表間進(jìn)行數(shù)據(jù)選擇和同步的場(chǎng)景2024-09-09
你不知道的Vue技巧之--開(kāi)發(fā)一個(gè)可以通過(guò)方法調(diào)用的組件(推薦)
這篇文章主要介紹了你不知道的Vue技巧之--開(kāi)發(fā)一個(gè)可以通過(guò)方法調(diào)用的組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue中的使用token的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue props傳值失敗 輸出undefined的解決方法
今天小編就為大家分享一篇vue props傳值失敗 輸出undefined的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue.js模擬日歷插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue數(shù)據(jù)字典取鍵值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue一個(gè)案例引發(fā)的遞歸組件的使用，本文主要給大家展示如何在項(xiàng)目中使用遞歸組件，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
vue中如何使用elementUI表格動(dòng)態(tài)行合并
這篇文章主要介紹了vue中如何使用elementUI表格動(dòng)態(tài)行合并，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10