Vue里可以引入jQuery吗？Vue里引入jQuery方法是什么？

正如标题提问，vue 里是可以引入 jQuery 的。

但是不同版本的 jQuery 和 Vue 可能存在兼容性问题，还有 Vue 使用虚拟 DOM 进行高效的 DOM 更新，而 jQuery 直接操作真实 DOM。当两者同时操作同一个 DOM 元素时，可能会导致更新不一致，从而引发渲染问题，还有维护成本高等问题，如果在非必要的情况下，不建议在 vue 里引入 jQuery 哈。

vue 里引入 jQuery 有两种方法：

1. 直接引入 cdn；
2. 安装依赖，全局引入。

基于 vue/cli：vue2 里引入 jQuery

1. 安装 jQuery

npm install jquery --save

2. 配置 Vue.js

在 main.js 中，将 jQuery 作为全局变量引入：

import Vue from'vue'
import $ from'jquery'
Vue.prototype.$ = $

3. 使用 jQuery

在 Vue 组件中，可以使用 $ 访问 jQuery：

<template>
  <div id="app">
    <div ref="text" class="myStyle" style="color: red">前端晨话</div>
    <div>
      <button @click="Click">点我</button>
      <p id="c1">是我</p>
    </div>
  </div>
</template>
// js 部分
<script>
export default {
    name: 'App',
    methods:{
        Click(){
            $("#c1").toggle()
        }
    }
}
</script>

基于 vue/cli：vue3 里引入 jQuery

1. 安装同上。

2. 在项目根目录下找到 vue.config.js 文件(没有就手动创建)添加如下内容：

const { defineConfig } = require('@vue/cli-service')
// 定义 webpack 变量
const webpack = require("webpack")
module.exports = defineConfig({
    transpileDependencies: true,
    // 就是下面的配置搞上就行了
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery",
                "windows.$": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
   }
})

3.使用

<template>
  <div id="app">
    <div>
      <button @click="Click">点我</button>
      <p id="c1">是我</p>
    </div>
  </div>
</template>
<script>
exportdefault {
    name: 'App',
    methods:{
        Click(){
            $("#c1").toggle()
        }
    }
}
</script>

如果运行报如下错误，可以在项目根目录下新建一个.eslintignore 文件：

文件内容就写个*就可以了：

然后重新运行项目就应该没问题了。

基于 vite：vue2 和 vue3 全局引入 jQuery

vite 中，vue2 和 vue3 全局引入 jQuery 的方式是一样的。

1. 安装依赖

npm i jquery @rollup/plugin-inject -S

2.在项目根目录下找到 vite.config.js 文件(没有就手动创建)添加如下内容

注意是 vite.config.js 不是 vue.config.js，千万别搞混了。

import {fileURLToPath, URL} from'node:url'

import {defineConfig} from'vite'
import legacy from'@vitejs/plugin-legacy'
import vue2 from'@vitejs/plugin-vue2'
// 1. 先引入插件
import inject from'@rollup/plugin-inject'
export default defineConfig({
    plugins: [
        vue2(),
        legacy({
            targets: ['ie >= 11'],
            additionalLegacyPolyfills: ['regenerator-runtime/runtime']
        }),
// 2. 就下面 inject 的配置
        inject({
            $: "jquery",  // 这里会自动载入 node_modules 中的 jquery
            jQuery: "jquery","windows.jQuery": "jquery"
        })
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

3.在需要地方直接this.$使用，这里以 App.vue 为例

<template>
  <div id="app">
    <div>
      <button @click="Click">点我</button>
      <p id="c1">是我</p>
  </div>
</div>
</template>
<script>
export default {
    name: 'App',
    methods:{
        Click(){
            $("#c1").toggle()
        }
    }
}
</script>

最后注意：

• 确保 jQuery 版本与 Vue.js 版本兼容。
• 这种方法会将 jQuery 作为全局变量引入，可能会与其他库或插件产生冲突。
• 如果需要按需加载 jQuery，请考虑使用第三方库，例如 vue-jquery。

以上关于Vue里可以引入jQuery吗？Vue里引入jQuery方法是什么？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。