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

赞 (0)

相关推荐

  • 详解使用nodeJs安装Vue-cli

    详解使用nodeJs安装Vue-cli

    前提:nodeJs本地已安装. 1.执行npm install --global vue-cli ,全局安装vue-cli ----因为默认是从国外服务器下,可以使用阿里巴巴在国内的镜像服务器. 产生通过config命令设置默认下载路径: npm config set registry https://registry.npm.taobao.org 然后再执行: npm install --global vue-cli 2.安装后,检查是否安装成功 vue -V (在此注意V为大写) 3.使用v

  • 使用node+vue.js实现SPA应用

    业务需求 最近公司要求开发web版的app,由于app是偏向内容方面,而且带了一个聊天模块,所以一般的多页开发不是很适合,而且主要是手机浏览,对加载速度或者用户体验来说都比较苛刻.调研了很多框架和模式,最后自己东拼西凑搞出来了这么一个玩意. 服务端 毫无疑问使用node,使用typescript可以有效的在编码同时查错,强类型语言写服务端毫无压力. #app.ts 只贴重要代码 var webpack = require('webpack') var webpackDevMiddleware =

  • Vue 中如何正确引入第三方模块的方法步骤

    方法一:配置 webpack ProvidePlugin 全局引入 假设要使用到 jquery,那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入: https://webpack.js.org/plugins/provide-plugin/ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) 方法二:包装成插件在 Vue 中调用 use 方法安装 另外一种比较靠谱的方法是将第三方模块打包成插件

  • 用vue和node写的简易购物车实现

    项目介绍 这是用vue写前端,用node来接收前端发来的请求,然后进行相应的数据操作,例如数据的存取和删除等.这是个人的练习项目,目前功能做的比较简单,主要是展示商品列表,把商品加入购物车,从购物车删除商品三个小功能. 搭建本地环境 因为是用vue,需要用babel把es6语法转为es5语法. 1.配置.babelrc文件 { "presets": [ "es2015", "stage-2" ], "plugins": [&q

  • 利用Vue.js+Node.js+MongoDB实现一个博客系统（附源码）

    前言 这篇文章实现的博客系统使用 Vue 做前端框架,Node + express 做后端,数据库使用的是 MongoDB.实现了用户注册.用户登录.博客管理(文章的修改和删除).文章编辑(Markdown).标签分类等功能. 前端模仿的是 hexo 的经典主题 NexT,本来是想把源码直接拿过来用的,后来发现还不如自己写来得快,就全部自己动手实现成 vue components. 实现的功能 1.文章的编辑,修改,删除 2.支持使用 Markdown 编辑与实时预览 3.支持代码高亮 4.给文

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

    最近用vue在做一个项目,github用上找了一个日历插件,intall到了本项目中,配好以后发现插件的样式风格和项目总体风格相差较大,所以就像这个改一下插件风格, 第一种方法:我直接在父组件中将style标签的scoped的属性去掉了,在父组件中直接写了想要的样式,重叠样式全部!important,结果确实生效了 第二种方法:本想这个要是样式这么改,还有路可走:要是插件的底层方法呢,如果有对外开发的修改入口还行,要是没有,可咋办,于是想着能不能直接去改下这个插件,这样直接一锤子到底, 在nod

  • Python中如何引入第三方模块

    Python中怎么使用第三方模块? 在Python可以在代码中导入模块,然后就可以使用第三方模块了. import 语句 想使用Python源文件,只需在另一个源文件里执行import语句,语法如下: import module1[, module2[,... moduleN] 当解释器遇到import语句,如果模块在当前的搜索路径就会被导入. 搜索路径是一个解释器会先进行搜索的所有目录的列表.如想要导入模块hello.py,需要把命令放在脚本的顶端: #!/usr/bin/python # -

  • 改变vue请求过来的数据中的某一项值的方法(详解)

    由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 在 <template> <div> <ul> <li v-for = " (item,index) in list" v-text='`${item} - ${index} `'>&

  • vue中引用swiper轮播插件的教程详解

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件:  npm install swiper --save-dev 在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里 Slider.vue源码: <template> <div class="swiper-container"> <div

  • vue中各选项及钩子函数执行顺序详解

    在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. vue的生命周期如下图: 在页面首次加载执行顺序有如下: beforeCreate //在实例初始化之后.创建之前执行 created //实例创建后执行 beforeMounted //在挂载开始之前调用 filters //挂载前加载过滤器 computed //计算属性 directives-bind //只调用一次,在指令第一次绑定到元素时调用 directives-inserted //被绑定元素插入父

  • 在vue项目中优雅的使用SVG的方法实例详解

    1.基础介绍 本文旨在介绍如何在项目中配置和方便的使用svg图标. 本文以vue项目为例,当然在react中的使用原理基本相似. svg图标可以直接通过img标签来使用,也可当做icon来使用. 本文是参考了鑫旭大佬的文章:SVG Sprite技术介绍. 2.配置 安装svg-sprite-loader.通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理,所以需要处理下: { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, l

  • vue中keep-alive、activated的探讨和使用详解

    在修改公司的一个项目的时候发现了activated这个东西,一直觉得很疑惑,之前也没怎么用过啊!官网的生命周期那也没说过这东西啊!生命周期不就create mount update 和destory这几个东东么,怎么多了个activate出来. 百思不得其解,于是去问了下度娘和查了下文档!恍然大悟,原来这东东是结合keep-alive这东东使用的,下面顺便记录一下. keep-alive <keep-alive>包裹动态组件的时候,会缓存不活动的组件实例,而不是摧毁他们.其是一个抽象的组件,自

  • python中模块的__all__属性详解

    python模块中的__all__属性,可用于模块导入时限制,如: from module import * 此时被导入模块若定义了__all__属性,则只有__all__内指定的属性.方法.类可被导入. 若没定义,则导入模块内的所有公有属性,方法和类 # kk.py class A(): def __init__(self,name,age): self.name=name self.age=age class B(): def __init__(self,name,id): self.nam

  • Vue中的组件及路由使用实例代码详解

    1.组件是什么 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用 全局组件 <body> <div id="app"> <!-- 用全局组件的名称作为HTML的标签 --> <myzujian></myzujian> </div> </body> <script>

  • 对vue中的事件穿透与禁止穿透实例详解

    在开发过程中经常遇到的一个场景,就是,页面弹窗,弹窗上有一个确定或者关闭按钮,这时,如果下方有一个按钮,那你点击弹窗的时候,也会触发弹窗下层的按钮事件,vue提供的解决方法就是直接在click.stop //阻止单击事件继续传播 <a v-on:click.stop="doThis"></a> js的解决办法是,直接在事件的方法中添加event.stopPropagation() //html <button>关闭</button> //

随机推荐