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 相关文章推荐
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
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
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
js 调整select 位置的函数
2008/02/21 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
Extjs学习笔记之七 布局
2010/01/08 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
Python命名空间详解
2014/08/18 Python
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
基于Python os模块常用命令介绍
2017/11/03 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
解析python的局部变量和全局变量
2019/08/15 Python
对Django中内置的User模型实例详解
2019/08/16 Python
python实现微信打飞机游戏
2020/03/24 Python
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
大学生职业生涯规划书模板
2014/01/18 职场文书
项目合作协议书
2014/04/16 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
慰问信模板
2015/02/14 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫