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 相关文章推荐
jQuery 使用手册(三)
Sep 23 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
element-ui点击查看大图的方法示例
Dec 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
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
Python 元类使用说明
2009/12/18 Python
Python描述器descriptor详解
2015/02/03 Python
python传递参数方式小结
2015/04/17 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
大学自主招生自荐信
2013/12/16 职场文书
表扬信格式
2014/01/12 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
教师素质教育心得体会
2016/01/19 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
Golang Web 框架Iris安装部署
2022/08/14 Python