登录  /  注册
首页 > web前端 > js教程 > 正文

怎样在vue中使用jquery

藏色散人
发布: 2021-01-27 10:00:18
原创
21136人浏览过

vue中使用jquery的方法:首先通过cnpm命令安装jquery依赖;然后修改“webpack.base.conf”文件配置;最后在组件中引入jquery进行使用即可。

怎样在vue中使用jquery

本教程操作环境:windows7系统、jquery1.2.6&&Vue2.9版本、Dell G3电脑。

相关推荐:《js基础教程

如果想在普通的HTML页面引入jQuer库的话,直接使用即可。但是如果要在Vue组件中使用jQuery库的话,使用这样的方式就不行了,那么怎样在vue中使用jquery?下面给大家介绍一下。

一、安装jQuery依赖

在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖:

npm install jquery --save
# 如果你更换了淘宝镜像,可以使用cnpm来安装,速度更快
cnpm install jquery --save
登录后复制

二、修改配置文件

完成安装jQuery依赖之后,我们要修改 webpack.base.conf 文件配置文件。注意我现在的Vue版本是2.9,如果你使用的是Vue3.x版本的话,这个配置文件的位置可能不一样,需要你在项目中找一下。

首先添加一行代码,引入webpack,如下图所示:

f2a19f2788b0f2db86ec6ef20e28e4f.png

其次是在下图的位置,添加代码配置jQuery插件:

efa53fcad641350f1a4221569719999.png

三、在组件中引入jquery,进行使用

我们想在哪个组件中使用jQuery库,首先要使用如下命令引入jquery,然后就可以正常使用了

import $ from 'jquery'
登录后复制

比如我们要在 App.vue组件中使用jQuery,实例代码如下:


<script>
  import $ from &amp;#39;jquery&amp;#39;
  export default {
    name: &#39;App&#39;,
    components: {},
    data: function () {
      return {}
    },
    created:function(){
      console.log($(&#39;#app&#39;));
    }
  }
</script>
登录后复制

以上就是怎样在vue中使用jquery的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
vue
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号