Vue组件中引入jQuery

￡神魔★判官ぃ 2021-11-04 17:44 462阅读 0赞

如果想在普通的HTML页面引入jQuer库的话，直接使用`<script src="jQuery.js"></script>`即可。但是如果要在Vue组件中使用jQuery库的话，使用这样的方式就不行了，需要使用以下方法。

# 一、安装jQuery依赖 #

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

npm install jquery --save
    
    # 如果你更换了淘宝镜像，可以使用cnpm来安装，速度更快
    cnpm install jquery --save

# 二、修改配置文件 #

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

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

const webpack = require('webpack')

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70][]

其次是在下图的位置，添加代码配置jQuery插件：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70 1][]

# 三、在组件中引入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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70]: /images/20211104/890b94afa610414787264323223f80b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70 1]: /images/20211104/1aa0294a4bed49868d00eac236b2166d.png