首先從這說起 vue項(xiàng)目中的elementUI的默認(rèn)樣式怎么改

由于elementUI的樣式太單調(diào)，比如這個(gè)slider滑塊

elementUI中的API是沒辦法改變這個(gè)slider的顏色的，可是老板喜歡很黃，非要用yellow色。😓沒辦法。拿人錢財(cái)替人消災(zāi)。

我試著在寫的組件中直接去更改這個(gè)slider的顏色，發(fā)現(xiàn)根本不能直接改😺。有意思😁。

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

此刻突然想到style中的scoped屬性，scoped這個(gè)屬性限制了下面css代碼的作用域只在當(dāng)前組件中生效，此時(shí)直接去更改elementUI的屬性，瀏覽器搜索不到這個(gè)元素的最外層的父級(jí)，于是這個(gè)東西就不會(huì)生效。嗯，沒錯(cuò)。

那么我們可以像傳統(tǒng)的html頁(yè)面外部引入css樣式那樣，單獨(dú)建一個(gè)css文件去更改elementUI樣式就可以了。那么問題來了

這個(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最好用來放置樣式、字體文件和圖片等公共靜態(tài)資源，只要src下面的組件中用到的資源就放在assets中

2.在項(xiàng)目中，經(jīng)常會(huì)用帶一些沒有npm包的第三方插件，放在static中

對(duì)，就這樣！

以上這篇淺談vue中改elementUI默認(rèn)樣式引發(fā)的static與assets的區(qū)別就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論