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 相关文章推荐
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
javascript解析json数据的3种方式
May 08 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
js实现登录与注册界面
Nov 01 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
我的论坛源代码(二)
2006/10/09 PHP
PHP的引用详解
2015/02/22 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
用Python进行基础的函数式编程的教程
2015/03/31 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
Python面向对象之继承代码详解
2018/01/29 Python
python使用生成器实现可迭代对象
2018/03/20 Python
简单介绍python封装的基本知识
2019/08/10 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
flask框架中的cookie和session使用
2021/01/31 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
金融行业务员的自我评价
2013/12/13 职场文书
企业法人授权委托书
2014/09/25 职场文书
建议书格式
2015/02/04 职场文书
考研导师推荐信范文
2015/03/27 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
高三数学教学反思
2016/02/18 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python