怎样在vue中使用jquery

最新推荐文章于 2024-09-19 21:38:15 发布

你的美，让我痴迷

最新推荐文章于 2024-09-19 21:38:15 发布

阅读量2.2w

点赞数 4

分类专栏： vue 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45932157/article/details/124189826

版权

vue 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

该博客介绍了如何在Vue项目中集成并使用jQuery。首先，通过npm或cnpm安装jQuery为项目依赖。接着，需要修改webpack配置文件，将jQuery配置为全局变量。最后，在Vue组件内部通过import引入jQuery，并在created钩子中展示其使用，例如通过选择器获取DOM元素。

摘要由CSDN通过智能技术生成

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

一、安装jQuery依赖

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

npm install jquery --save

 //如果你更换了淘宝镜像，可以使用cnpm来安装，速度更快

cnpm install jquery --save

二、修改配置文件

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

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

在这里插入图片描述
其次是在下图的位置，添加代码配置jQuery插件：

在这里插入图片描述
三、在组件中引入jquery，进行使用

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

<template>

  <div id="app">

    

  </div>

</template>

<script>

  import $ from 'jquery'

  export default {

    name: 'App',

    components: {},

    data: function () {

      return {}

    },

    created:function(){

      console.log($('#app'));

    }

  }

</script>

<style>

</style>