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 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
Vue组件的使用教程详解
Jan 05 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
vue iview实现动态新增和删除
Jun 17 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/12/31 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
jquery JSON的解析方式
2009/07/25 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
python在控制台输出进度条的方法
2015/06/20 Python
Python 防止死锁的方法
2020/07/29 Python
深入了解Python 方法之类方法 & 静态方法
2020/08/17 Python
pip install命令安装扩展库整理
2021/03/02 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
Linux文件系统类型
2012/09/16 面试题
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
网络书店创业计划书
2014/02/07 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
职务聘任书范文
2014/03/29 职场文书
优秀语文教师事迹
2014/05/18 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书