vue-cli webpack 引入jquery的方法

下面是关于“vue-cli webpack 引入jquery的方法”的攻略：

步骤一：安装 jquery

首先，我们需要在项目中安装 jquery，可以通过 npm 包管理器来进行安装。在命令行中输入以下命令即可：

npm install jquery --save

其中的 --save 参数会将 jquery 添加到您的项目的 package.json 文件中。

步骤二：修改 webpack 配置文件

接下来，我们需要修改 webpack 配置文件（在 vue-cli 3.x 中，该文件位于 vue.config.js）。我们需要添加一个全局的 jquery 变量，同时对 webpack 的配置文件进行修改，以便使 jquery 可以被浏览器使用。

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  }
}

以上代码的意思是：当 webpack 碰到 $、jQuery 或 window.jQuery 变量时，将其转换为对 jquery 包的引用。

示例一：在 Vue 组件中使用 jquery

下面是一个示例 Vue 组件，它使用了 jquery：

<template>
  <div>
    <input type="text" v-model="searchQuery">
    <button @click="search">搜索</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchQuery: ''
    }
  },
  methods: {
    search () {
      // 使用 jquery 的 ajax 方法发送请求
      $.ajax({
        url: 'https://api.example.com/search',
        data: { q: this.searchQuery },
        success: function (response) {
          console.log(response)
        }
      })
    }
  }
}
</script>

在以上示例中，我们使用了 $ 访问了 jquery，调用了 $.ajax 方法来发送一个请求。

示例二：在 main.js 中使用 jquery

如果您希望在整个应用中使用 jquery，可以将其引入到 main.js 文件中：

import $ from 'jquery'

Vue.prototype.$ = $

new Vue({
  // ...
})

在以上示例中，我们将 jquery 引入到 main.js 文件中，然后将其设置为 Vue 实例的 $ 属性，以便在整个应用中使用。