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 动态加载 css 方法总结
Jul 11 Javascript
动态样式类封装JS代码
Sep 02 Javascript
js获取height和width的方法说明
Jan 06 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 Javascript
详解实现vue的数据响应式原理
Jan 20 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
对Session和Cookie的区分与解释
2007/03/16 PHP
php2html php生成静态页函数
2008/12/08 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
python math模块的基本使用教程
2021/01/16 Python
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
日期和时间问题
2015/01/04 面试题
期末考试动员演讲稿
2014/01/10 职场文书
百度吧主申请感言
2014/01/12 职场文书
社区党员先进事迹
2014/01/22 职场文书
2014信息公开实施方案
2014/02/22 职场文书
党员干部承诺书范文
2014/03/25 职场文书
户外活动总结范文
2014/04/30 职场文书
对照四风自我剖析材料
2014/10/07 职场文书