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 22 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
JavaScript中的LHS和RHS分析详情
Apr 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中stdClass的用法分析
2015/02/27 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
python安装以及IDE的配置教程
2015/04/29 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Python获取邮件地址的方法
2015/07/10 Python
Python3实现Web网页图片下载
2016/01/28 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
python如何生成网页验证码
2018/07/28 Python
python3 深浅copy对比详解
2019/08/12 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
Python之多进程与多线程的使用
2021/02/23 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
儿媳婚宴答谢词
2014/01/14 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python