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 模拟用户单击事件
Dec 31 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
javascript单张多张图无缝滚动实例代码
May 10 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的面试题集
2006/11/19 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
详解PHP中的Traits
2015/07/29 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
JS求平均值的小例子
2013/11/29 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
Django卸载之后重新安装的方法
2017/03/15 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
法学专业毕业生自荐信范文
2013/12/18 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
品酒会策划方案
2014/05/26 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
教师工作总结范文2014
2014/11/10 职场文书
婚宴父亲致辞
2015/07/27 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python