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 相关文章推荐
JS 图片缩放效果代码
Jun 09 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
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
?生?D片??C字串
2006/12/06 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
JS获取时间的方法
2015/01/21 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
Numpy中的mask的使用
2018/07/21 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
Python 在函数上添加包装器
2020/07/28 Python
python Timer 类使用介绍
2020/12/28 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
通用C#笔试题附答案
2016/11/26 面试题
小班开学寄语
2014/04/04 职场文书
工厂搬迁方案
2014/05/11 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
结婚通知短信大全
2015/04/17 职场文书
捐书活动倡议书
2015/04/27 职场文书
公诉意见书范文
2015/06/05 职场文书
寒假致家长的一封信
2015/10/10 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers