vue怎么使用jQuery

短命女 2021-09-24 04:16 445阅读 0赞

## vue到底怎么使用jQuery呢 ##

有时候想在vue里面使用jQuery的功能或者要用jQuery写的现有功能，就很烦，  
vue到底怎么使用jquery呢，首先vue要想使用插件需要`npm install jquery`  
但是这样是普通插件的使用方式，jquery这样用可不行，需要修改build下的

webpack.base.conf.js

需要加的内容

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

具体加的位置是在哪呢  
付一份加完的`webpack.base.conf.js`

'use strict'
    const webpack = require('webpack')
    const path = require('path')
    const utils = require('./utils')
    const config = require('../config')
    const vueLoaderConfig = require('./vue-loader.conf')
    
    function resolve (dir) { 
      return path.join(__dirname, '..', dir)
    }
    
    const createLintingRule = () => ({ 
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      enforce: 'pre',
      include: [resolve('src'), resolve('test')],
      options: { 
        formatter: require('eslint-friendly-formatter'),
        emitWarning: !config.dev.showEslintErrorsInOverlay
      }
    })
    
    module.exports = { 
      context: path.resolve(__dirname, '../'),
      entry: { 
        app: './src/main.js'
      },
      output: { 
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
          ? config.build.assetsPublicPath
          : config.dev.assetsPublicPath
      },
      resolve: { 
        extensions: ['.js', '.vue', '.json'],
        alias: { 
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
        }
      },
      module: { 
        rules: [
          ...(config.dev.useEslint ? [createLintingRule()] : []),
          { 
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
          },
          { 
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
          },
          { 
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: { 
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
          },
          { 
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            loader: 'url-loader',
            options: { 
              limit: 10000,
              name: utils.assetsPath('media/[name].[hash:7].[ext]')
            }
          },
          { 
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: { 
              limit: 10000,
              name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
          }
        ]
      },
      node: { 
        // prevent webpack from injecting useless setImmediate polyfill because Vue
        // source contains it (although only uses it if it's native).
        setImmediate: false,
        // prevent webpack from injecting mocks to Node native modules
        // that does not make sense for the client
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty'
      },
      plugins: [
        new webpack.ProvidePlugin({ 
          $: "jquery",
          jQuery: "jquery",
          jquery: "jquery",
          "window.jQuery": "jquery"
        })
      ]
    }

这样就可以直接在vue文件进行引入jquery了，象普通插件一样

import $ fron 'jquery'