vue中node_modules中第三方模塊的修改使用詳解
最近用vue在做一個(gè)項(xiàng)目,github用上找了一個(gè)日歷插件,intall到了本項(xiàng)目中,配好以后發(fā)現(xiàn)插件的樣式風(fēng)格和項(xiàng)目總體風(fēng)格相差較大,所以就像這個(gè)改一下插件風(fēng)格,
第一種方法:我直接在父組件中將style標(biāo)簽的scoped的屬性去掉了,在父組件中直接寫了想要的樣式,重疊樣式全部!important,結(jié)果確實(shí)生效了

第二種方法:本想這個(gè)要是樣式這么改,還有路可走;要是插件的底層方法呢,如果有對(duì)外開發(fā)的修改入口還行,要是沒有,可咋辦,于是想著能不能直接去改下這個(gè)插件,這樣直接一錘子到底,
在node_modules中直接找到了這個(gè)插件,查閱了這

剛開始直接啥也沒管,直接改了src下的文件死活不生效

最后看了下這個(gè)插件的package.json;一看,靠,原來主文件,是dist目錄下的index.js;這個(gè)是已經(jīng)打好的用于生產(chǎn)環(huán)境的包,我改的src下的測(cè)試環(huán)境的文件,當(dāng)然無效

怎么辦才能有效呢,當(dāng)然是重新打包,問題的關(guān)鍵是怎樣在node_modules下在這個(gè)插件下重新build,查了這個(gè)插件下,根本沒有這個(gè)插件的node_modules依賴(插一句git文件到github時(shí)node_moudles文件是忽略的),所以在插件下直接npm run build各種報(bào)錯(cuò),
后來想了下,我把這個(gè)插件包拷出來,然后vs打開,不是沒有node_modules依賴嗎,有package.json。直接npm install ;這樣的package.json里面的標(biāo)寫的依賴全部安裝,然后有了依賴,這時(shí)去改這個(gè)插件src下的文件;
改好所有的一切后直接npm run build;重新生成了新的dist 下的index.js;把這個(gè)新生成的index.js拷貝覆蓋到原來那個(gè)項(xiàng)目下對(duì)應(yīng)的位置,覆蓋,這樣最后的效果妥妥額成功了!哈哈哈?。?!

總結(jié)一下:
可以看下要修改的node_modules項(xiàng)目中的package.json,里面會(huì)有一個(gè)屬性,類似:
"main": "dist/index.min.js",表示的是該項(xiàng)目的入口文件,我們?nèi)粘i_發(fā)的項(xiàng)目中引用的其實(shí)就是這一個(gè)文件,若是直接改這個(gè)index.min.js,重啟一下就能生效。
PS: 不過一般入口文件都是打包后的js,很難直接改,都是改src目錄下的文件后重新build。
--------------------問題的關(guān)鍵是怎樣在node_modules下在這個(gè)插件下build,查了這個(gè)插件下根本沒有這個(gè)插件的node_modules依賴,所以在插件下直接npm run build各種報(bào)錯(cuò),解決方法是拷貝出來改好后直接去覆蓋,
--------------------一般不建議這么干,太暴力了,另外團(tuán)隊(duì)協(xié)助時(shí),其他隊(duì)友和服務(wù)器上的代碼不能保持一致
總結(jié)
以上所述是小編給大家介紹的vue中node_modules中第三方模塊的修改使用詳解,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
手把手教你搭建一個(gè)vue項(xiàng)目的完整步驟
身為入行未深的小白前端,不斷的學(xué)習(xí)是我們不可丟失的習(xí)慣,前端流行的框架也是層出不窮,vue在眾多框架中脫穎而出,下面這篇文章主要給大家介紹了關(guān)于搭建一個(gè)vue項(xiàng)目的完整步驟,需要的朋友可以參考下2022-07-07
vue項(xiàng)目使用modbus實(shí)現(xiàn)串口通訊的示例代碼
本文主要介紹了vue項(xiàng)目使用modbus實(shí)現(xiàn)串口通訊的示例代碼,可以實(shí)現(xiàn)與Modbus設(shè)備的數(shù)據(jù)交互,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
Vue 中 toRefs() 和 toRef() 的使用方法
在 Vue 3 中,toRefs()可以將響應(yīng)式對(duì)象的屬性轉(zhuǎn)換為可響應(yīng)的 refs,主要用于在解構(gòu)響應(yīng)式對(duì)象時(shí),保持屬性的響應(yīng)性,這篇文章主要介紹了Vue 中 toRefs() 和 toRef() 的使用,需要的朋友可以參考下2025-01-01
vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑
這篇文章主要介紹了vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
vue3?setup語(yǔ)法糖下父組件如何調(diào)用子組件
這篇文章主要介紹了vue3?setup語(yǔ)法糖下父組件如何調(diào)用子組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue如何解決this.refs拿取v-for下元素undefine問題
這篇文章主要介紹了vue如何解決this.refs拿取v-for下元素undefine問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05

