vue中改elementUI默認樣式引發的static 與 assets的區別


首先從這說起 vue項目中的elementUI的默認樣式怎么改

由於elementUI的樣式太單調,比如這個slider滑塊

elementUI中的API是沒辦法改變這個slider的顏色的,可是老板喜歡很黃,非要用yellow色。😓沒辦法。拿人錢財替人消災。

我試着在寫的組件中直接去更改這個slider的顏色,發現根本不能直接改😺。有意思😁。

我們分析一下:當我們想要更改某個元素的css樣式時,只要找到元素具體的class去更改樣式的思路肯定是沒問題,既然不生效,那么肯定是沒找到這個元素的確切位置,瀏覽器搜索不到這個class,所以直接修改才不生效。

此刻突然想到style中的scoped屬性,scoped這個屬性限制了下面css代碼的作用域只在當前組件中生效,此時直接去更改elementUI的屬性,瀏覽器搜索不到這個元素的最外層的父級,於是這個東西就不會生效。嗯,沒錯。

那么我們可以像傳統的html頁面外部引入css樣式那樣,單獨建一個css文件去更改elementUI樣式就可以了。那么問題來了

這個css文件放在哪里呢?

vue中有個src下的assest文件是放靜態資源的,還有個與src文件同級的static文件也是放靜態資源的,這兩個文件有什么區別呢?

我修改的elementUI的元素的css文件應該放在哪個文件假下面呢?

 

google一下之后了解到

  區別一:assets文件是src下的,所以最后運行時需要進行打包,而static文件不需要打包就直接放在最終的文件中了

  區別二:assets中的文件在vue中的template/style下用../這種相對路徑的形式進行引用,在script下必須用@import的方式引入,而static下的文件在.vue中的任何地方都只要使用../這種相對路徑的方式引入,

 總結一下

 1.assets最好用來放置樣式、字體文件和圖片等公共靜態資源,只要src下面的組件中用到的資源就放在assets中

 2.在項目中,經常會用帶一些沒有npm包的第三方插件,放在static中

  對,就這樣

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM