Logo

Logo

怎样在vue中使用jquery

Pastore Antonio
Pastore Antonio 2023年09月25日
541 阅读 0 评论 约 1054 字 阅读约 3 分钟

在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,实例代码如下:

<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>
登录后复制

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

查看完整代码

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它

附件下载

共 3 个文件
怎样在vue中使用jquery
JPG 16.1 KB
f2a19f2788b0f2db86ec6ef20e28e4f.png
PNG 166.9 KB
efa53fcad641350f1a4221569719999.png
PNG 148.0 KB
部分文章可能存在转载,如果涉及到侵权,请联系删除文章。

探索AIGC相关的精彩内容,共 15 篇文章

Azure AI 服务之语音识别

简介 Azure AI 服务中的语音识别 API 是微软提供的一项先进技术,旨在帮助开发者轻松实现语 ... 怎样在vue中使用jquery

2026-02-17 · Xzavier Aaron
MCP | 一文详解什么是 MCP以及 MCP 可以做什么

一、什么是 MCP MCP(Model Context Protocol)是一个专为大型语言模型(L ... 怎样在vue中使用jquery

2026-02-14 · Shen, Luke
你的工作流程,值得一个“全自动数字分身”:录制、截图、成文,一气呵成

一、一句话认识 TestFlow Recorder 在数字化工作环境中,如何准确记录操作步骤并生成清 ... 怎样在vue中使用jquery

2026-02-14 · Xzavier Aaron
Flowise 前端框架配置指南

用户需求 问题:有没有适合配置 Flowise 的前端框架? 目标:寻找类似 Open WebUI ... 怎样在vue中使用jquery

2026-02-14 · Xzavier Aaron