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初学者的编写开发的七个细节
Jan 11 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
理顺8个版本vue的区别(小结)
Sep 17 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 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+js iframe实现上传头像界面无跳转
2014/04/29 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python中方法链的使用方法
2016/02/23 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
Python实现按中文排序的方法示例
2018/04/25 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
大型活动策划方案
2014/01/12 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
关于召开会议的通知
2015/04/15 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python