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宝典学习笔记
Feb 07 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 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
PHP实现递归无限级分类
2015/10/22 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
python实现简单日期工具类
2019/04/24 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
大整数数相乘的问题
2012/07/22 面试题
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书