vue中node_modules中第三方模块的修改使用详解


Posted in Javascript onMay 31, 2019

最近用vue在做一个项目,github用上找了一个日历插件,intall到了本项目中,配好以后发现插件的样式风格和项目总体风格相差较大,所以就像这个改一下插件风格,

第一种方法:我直接在父组件中将style标签的scoped的属性去掉了,在父组件中直接写了想要的样式,重叠样式全部!important,结果确实生效了

vue中node_modules中第三方模块的修改使用详解

第二种方法:本想这个要是样式这么改,还有路可走;要是插件的底层方法呢,如果有对外开发的修改入口还行,要是没有,可咋办,于是想着能不能直接去改下这个插件,这样直接一锤子到底,

 

在node_modules中直接找到了这个插件,查阅了这

vue中node_modules中第三方模块的修改使用详解

刚开始直接啥也没管,直接改了src下的文件死活不生效

vue中node_modules中第三方模块的修改使用详解

最后看了下这个插件的package.json;一看,靠,原来主文件,是dist目录下的index.js;这个是已经打好的用于生产环境的包,我改的src下的测试环境的文件,当然无效

vue中node_modules中第三方模块的修改使用详解

怎么办才能有效呢,当然是重新打包,问题的关键是怎样在node_modules下在这个插件下重新build,查了这个插件下,根本没有这个插件的node_modules依赖(插一句git文件到github时node_moudles文件是忽略的),所以在插件下直接npm run build各种报错,

后来想了下,我把这个插件包拷出来,然后vs打开,不是没有node_modules依赖吗,有package.json。直接npm install ;这样的package.json里面的标写的依赖全部安装,然后有了依赖,这时去改这个插件src下的文件;

改好所有的一切后直接npm run build;重新生成了新的dist 下的index.js;把这个新生成的index.js拷贝覆盖到原来那个项目下对应的位置,覆盖,这样最后的效果妥妥额成功了!哈哈哈!!!

vue中node_modules中第三方模块的修改使用详解

总结一下:

可以看下要修改的node_modules项目中的package.json,里面会有一个属性,类似:

"main": "dist/index.min.js",

表示的是该项目的入口文件,我们日常开发的项目中引用的其实就是这一个文件,若是直接改这个index.min.js,重启一下就能生效。

PS: 不过一般入口文件都是打包后的js,很难直接改,都是改src目录下的文件后重新build。

--------------------问题的关键是怎样在node_modules下在这个插件下build,查了这个插件下根本没有这个插件的node_modules依赖,所以在插件下直接npm run build各种报错,解决方法是拷贝出来改好后直接去覆盖,

--------------------一般不建议这么干,太暴力了,另外团队协助时,其他队友和服务器上的代码不能保持一致

 总结

以上所述是小编给大家介绍的vue中node_modules中第三方模块的修改使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
小程序如何构建骨架屏
May 29 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
Vuex新手的理解与使用详解
May 31 #Javascript
一文快速了解JQuery中的AJAX
May 31 #jQuery
gulp构建小程序的方法步骤
May 31 #Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 #jQuery
自定义javascript验证框架示例【附源码下载】
May 31 #Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 #Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 #Javascript
You might like
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
js同源策略详解
2015/05/21 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
python画微信表情符的实例代码
2019/10/09 Python
python实现简单颜色识别程序
2020/02/19 Python
Python实现AI换脸功能
2020/04/10 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
创先争优活动党员公开承诺书
2014/08/29 职场文书
健康状况证明书
2014/11/26 职场文书
2016年公司新年寄语
2015/08/17 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript