vue中node_modules中第三方模块的修改使用详解

 更新时间:2019年05月31日 15:47:02   作者:Yogic  
这篇文章主要介绍了vue中node_modules中第三方模块的修改使用,本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

最近用vue在做一个项目,github用上找了一个日历插件,intall到了本项目中,配好以后发现插件的样式风格和项目总体风格相差较大,所以就像这个改一下插件风格,

第一种方法:我直接在父组件中将style标签的scoped的属性去掉了,在父组件中直接写了想要的样式,重叠样式全部!important,结果确实生效了

第二种方法:本想这个要是样式这么改,还有路可走;要是插件的底层方法呢,如果有对外开发的修改入口还行,要是没有,可咋办,于是想着能不能直接去改下这个插件,这样直接一锤子到底,   

      在node_modules中直接找到了这个插件,查阅了这

      

刚开始直接啥也没管,直接改了src下的文件死活不生效

最后看了下这个插件的package.json;一看,靠,原来主文件,是dist目录下的index.js;这个是已经打好的用于生产环境的包,我改的src下的测试环境的文件,当然无效

怎么办才能有效呢,当然是重新打包,问题的关键是怎样在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拷贝覆盖到原来那个项目下对应的位置,覆盖,这样最后的效果妥妥额成功了!哈哈哈!!!

  总结一下:

      可以看下要修改的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中第三方模块的修改使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Vue press 支持图片放大功能的实例代码

    Vue press 支持图片放大功能的实例代码

    这篇文章主要介绍了 Vue press 支持图片放大功能,本文通过代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • vue3 element-plus二次封装组件系列之伸缩菜单制作

    vue3 element-plus二次封装组件系列之伸缩菜单制作

    这篇文章主要介绍了vue3 element-plus二次封装组件系列之伸缩菜单制作,是基于vue3 vite element-plus搭建的,值的注意的时候,里面的图标组件是经过处理的,结合实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • vue使用节流函数的踩坑实例指南

    vue使用节流函数的踩坑实例指南

    防抖和节流的目的都是为了减少不必要的计算,下面这篇文章主要给大家介绍了关于vue使用节流函数踩坑的相关资料,需要的朋友可以参考下
    2021-05-05
  • 一起来学习Vue的生命周期

    一起来学习Vue的生命周期

    这篇文章主要为大家详细介绍了Vue的生命周期,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • vue v-model实现自定义样式多选与单选功能

    vue v-model实现自定义样式多选与单选功能

    这篇文章主要介绍了vue v-model实现自定义样式多选与单选功能所遇到的问题,本文给大家带来了解决思路和实现代码,需要的朋友可以参考下
    2018-07-07
  • 解决Vue.js 2.0 有时双向绑定img src属性失败的问题

    解决Vue.js 2.0 有时双向绑定img src属性失败的问题

    下面小编就为大家分享一篇解决Vue.js 2.0 有时双向绑定img src属性失败的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue实现随机验证码功能(完整代码)

    vue实现随机验证码功能(完整代码)

    验证码功能在我们的身边用处极广,今天小编给大家分享基于vue实现随机验证码功能,感兴趣的朋友跟随小编一起看看吧
    2019-12-12
  • vue中的inject学习教程

    vue中的inject学习教程

    本文通过实例代码给大家介绍了vue中的inject学习教程,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-04-04
  • 基于vue1和vue2获取dom元素的方法

    基于vue1和vue2获取dom元素的方法

    下面小编就为大家分享一篇基于vue1和vue2获取dom元素的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue3中reactive和ref函数及对比分析

    vue3中reactive和ref函数及对比分析

    这篇文章主要介绍了vue3中reactive和ref函数及对比,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01

最新评论