vue全局引入和局部引入,vue添加全局方法
本文主要介绍了在vue项目中全局引入jquery的方法，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
vue项目全局介绍jqueryvue，介绍jquery遇到的坑，介绍jquery遇到的坑的解决方案。
vue项目全局引入jquery
注意：在index.html，直接用script标签引入，不会生效。正确的介绍姿势如下：
1:打开package.json文件，在依赖项中手动添加以下代码；
2:运行cnpm install，它将引入2.1.1版jquery作为依赖项；
3:打开webpack.base.conf.js文件，对其进行两处修改，如下图所示：
4:添加：在所需页面(如index.vue)从 jquery 导入$即正确引入jquery，需要的地方就可以使用jQuery；
5:只需重新运行项目(NPM run dev)；
vue引入jquery遇到的坑
引入
$ npm安装-保存jquery
#注意，这是-save而不是- save-dev，因为jquery将在联机环境中使用。
使用jquery
在src/app.js中引用
导入“jquery”；
html中应该有一个id为“hello”的元素。相信大家都知道这一点。
//这一行的作用是将元素的内容改为‘改为其他文本’
$(#hello )。文本(“更改为其他文本”)；
但是被报道错了。
好像是个错误。尝试以上方法可行吗？
从“jquery”导入$ s；
$(#hello )。文本(“更改为其他文本”)；
事实证明是可能的。
遇到的坑
当引入下一个插件时
src/jquery.changeStyle.js
$ . fn . change style=function(colorStr){
this.css(color ，colorStr)；
}
我们将其引入src/app.js
从“jquery”导入$ s；
“导入”。/jquery . change style ；
$(#hello )。文本(“更改为其他文本”)；
//将元素更改为紫色
$(#hello )。change style(“pink”)；
我发现不对，和以前一样。
然后导入。/jquery . change style ；将其更改为从导入更改样式。/jquery . change style ；试一试。
发现也没用。
发现文件src/jquery.changeStyle.js引用jquery为插件，而外面的src/app.js并不知道。
让我们更改src/jquery.changeStyle.js文件的内容。
从“jquery”导入$ s；
$ . fn . change style=function(colorStr){
this.css(color ，colorStr)；
}
起作用了。没关系。
但是有一个问题。上面的jquery插件是我们自己随意写的，想怎么改都行。如果是第三方的呢？这意味着你可以从网上下载别人写的书。
这时候就不能下载了再改了。
我们怎么做呢？
解决办法
这时候介绍一下webpack的一个插件：ProvidePlugin。
这个插件可以有这个效果。
您不必通过导入/要求来使用模块。
恢复刚才的src/jquery.changeStyle.js。
src/jquery.changeStyle.js
下一步：在webpack.config.js中
模块.导出={
插件：[
新网络包。提供插件({
$: jquery ，
jQuery:“jQuery”
}),
.
]
}
你什么意思？很好理解，以后遇到或处理jquery或$时，会自动加载jQuery库。
现在我们运行npm run dev，效果出来了。
这个插件不仅可以处理jquery，还可以处理其他库。还是等你慢慢用吧。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。