Vue组件中引入jQuery

两种在vue中引入jQuery的方式

1、普通html中使用jQuery

将jQuer的文件导入到项目中,然后直接使用<script src="jQuery.js"></script>即可。

复制代码
<script src="jQuery.js"></script>
2、vue组件中使用jQuery
安装依赖
复制代码
cnpm install jquery --save 

// 或者 
npm install jquery --save
组件中直接使用jQuery

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

复制代码
import $ from '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>
使用全局变量

若每一个组件中都去使用jquery,必须在每个组件中写:import $ from 'jquery';比较麻烦,所以使用全局变量

  • **webpack.base.conf.js文件中引入:**在项目中找到webpack.base.conf.js文件,在开头使用以下代码引入webpack,因为该文件默认没有引用。

    let webpack = require('webpack')

  • 在同文件:webpack.base.conf.js中,找到module.exports中添加一段代码

    plugins: [
    new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    jquery: "jquery",
    "window.jQuery": "jquery"
    })
    ],

  • 避开eslint 检查

修改根目录下.eslintrc.js 文件的env 节点,为env添加一个键值对 jquery: true 就可以了

复制代码
env: {
// 原有
browser: true,
// 添加
jquery: true
}
  • 重新启动项目 npm run dev,可直接使用$

不需要再import 引用 jQuery 了,可以 直接使用$了,

复制代码
 console.log($('选择器'))

你会发现成功使用jQuery获取到了DOM;或者按下面的,能看到jq是一个函数

相关推荐
paopaokaka_luck6 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失94939 分钟前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_42 分钟前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js