首先從這說起 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中
對,就這樣