Vue中引入jQuery两种方式可在vue中引入jQuery

第一种:普通html中使用jquery

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

第二种:vue组件中使用jquery

1、安装依赖

cnpm install jquery --save 或者 npm install jquery --save;

2、此处也有两种方式

一、组件中直接使用jquery

二、使用全局变量

2.1 组件中直接使用

我们想在哪个组件中使用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>

2.2 使用全局变量

若每一个组件中都可以使用jquery,必须在每个组件中写:import $ from 'jquery';

比较麻烦,所以使用全局变量

1)webpack.base.conf.js文件中引入

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

let webpack = require('webpack')

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

// 添加代码

plugins: [

new webpack.ProvidePlugin({

$: "jquery",

jQuery: "jquery",

jquery: "jquery",

"window.jQuery": "jquery"

})

],

3)避开eslint 检查

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

env: {

// 原有

browser: true,

// 添加

jquery: true

}

4)重新启动项目 npm run dev,可直接使用$

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

console.log($('选择器')) ,你会发现成功使用jQuery获取到了DOM

相关推荐
代码煮茶5 分钟前
Vue3 插件开发实战 | 从 0 开发一个全局通知组件(Toast/Message)并发布到 npm
javascript·vue.js
程序员Ctrl喵10 分钟前
Flutter 第三阶段:基础 Widget 全面指南
开发语言·javascript·flutter
韭菜炒大葱15 分钟前
事件捕获、事件冒泡、事件源对象、事件委托
javascript·面试
品克缤19 分钟前
Vue3 + Router 页面切换时滚动条闪烁问题记录
前端·javascript·css·vue.js
冰暮流星24 分钟前
javascript之dom方法访问内容
开发语言·前端·javascript
竹林81825 分钟前
React + wagmi 实战:从零构建一个能“读”能“写”的 DeFi 前端,我踩了这些坑
前端·javascript
我命由我1234526 分钟前
在 React 项目中,配置了 setupProxy.js 文件,无法正常访问 http://localhost:3000
开发语言·前端·javascript·react.js·前端框架·ecmascript·js
俺不会敲代码啊啊啊28 分钟前
封装 ECharts Hook 适配多种图表容器
前端·vue.js·typescript·echarts
J2虾虾32 分钟前
在Vue3中推荐使用的函数定义方法
前端·javascript·vue.js
辻戋36 分钟前
从零手写mini-react
javascript·react.js·ecmascript