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 27 Javascript
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
Java 生成随机字符的示例代码
Jan 13 Javascript
从原生JavaScript到React深入理解
Jul 23 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 JSON格式数据交互实例代码详解
2011/01/13 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
实现vuex原理的示例
2020/10/21 Javascript
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
TensorFlow实现模型评估
2018/09/07 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
python复合条件下的字典排序
2020/12/18 Python
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
计算机专业大学生的自我评价
2013/11/14 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
工商干部先进事迹
2014/05/14 职场文书
数学教研活动总结
2014/07/02 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
二审代理词范文
2015/05/25 职场文书
催款函范本大全
2015/06/24 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL