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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 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
APMServ使用说明
2006/10/23 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
python selenium登录豆瓣网过程解析
2019/08/10 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
文秘专业自荐信
2013/10/14 职场文书
药学专业个人自我评价
2013/11/11 职场文书
医学检验专业个人求职信范文
2013/12/04 职场文书
管理心得体会
2013/12/28 职场文书
小学教师国培感言
2014/02/08 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
四年级学生评语大全
2014/04/21 职场文书
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript