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 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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+mysql一个名片库程序
2006/10/09 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
javascript json2 使用方法
2010/03/16 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
checkbox在vue中的用法小结
2018/11/13 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
python制作一个桌面便签软件
2015/08/09 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
python 三元运算符使用解析
2019/09/16 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
python中元组的用法整理
2020/06/15 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
如何进行有效的自我评价
2013/09/27 职场文书
日语专业毕业生自荐信
2013/11/11 职场文书
2014升学宴答谢词
2014/01/26 职场文书
高一新生军训方案
2014/05/12 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang