javascript - How to include jquery in a vuejs webpack cli project? - Stack Overflow

admin管理员组

文章数量:1221413

Hello there i used to vuejs cli to generate a project (). The cli uses webpack and im having trouble using jquery inside of the vue files. Im always getting a.

  '$' is not defined

I have tried editing my webpack.dev.config to include the provide plugin block as follows:

var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

module.exports = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: '#cheap-module-eval-source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    }),
    // 
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    // 
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new FriendlyErrorsPlugin(),
    new webpack.ProvidePlugin({
      $ : "jquery",
      jQuery : "jquery"
    })
  ]
})

However when trying to use jquery i run into the same issues time and time again. Im not against using a cdn for this i really just cant get this think to include jquery no matter what i try.

If the vue file is helpful its i try to console.log $ like so inside the script block

<script>
export default {
  name: 'how_can_we_help_you',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
console.log($)
</script>

Please help im very stuck and have been trying to fix this for quite a wile now. Thanks in advance.

Hello there i used to vuejs cli to generate a project (https://github.com/vuejs/vue-cli). The cli uses webpack and im having trouble using jquery inside of the vue files. Im always getting a.

http://eslint.org/docs/rules/no-undef  '$' is not defined

I have tried editing my webpack.dev.config to include the provide plugin block as follows:

var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

module.exports = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: '#cheap-module-eval-source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new FriendlyErrorsPlugin(),
    new webpack.ProvidePlugin({
      $ : "jquery",
      jQuery : "jquery"
    })
  ]
})

However when trying to use jquery i run into the same issues time and time again. Im not against using a cdn for this i really just cant get this think to include jquery no matter what i try.

If the vue file is helpful its i try to console.log $ like so inside the script block

<script>
export default {
  name: 'how_can_we_help_you',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
console.log($)
</script>

Please help im very stuck and have been trying to fix this for quite a wile now. Thanks in advance.

• javascript
• jquery
• webpack
• vue.js

Share Improve this question Follow asked Jun 12, 2017 at 10:13 MorphasisMorphasis 1,43311 gold badge1313 silver badges2727 bronze badges 6

• why do u require jquery within Vue? Its considered a very bad practice to use jquery+ vue or jquery + angular. whatever u can achieve in jquery, u should be able to write it in vue as well – Plankton Commented Jun 12, 2017 at 10:16
• @Plankton not really. some operations are way easier with jquery – John Commented Jun 12, 2017 at 10:18
• You may find this link interesting: vuetips.com/bootstrap – Arj Commented Jun 12, 2017 at 10:19
• @john Not usually. jQuery is just more familiar. The real issue with using jQuery is that it is generally used for dom manipulation, which is also being handled by Vue, so if you're not careful you can end up in a mess, which is why it's considered bad practice. If you are careful, it's fine. – craig_h Commented Jun 12, 2017 at 10:40
• @craig_h i know this. but there are some parts that jquery handles better and and easier than vue can. What I'm saying is that instead of dispatching events through components and writing methods, you can simply use 1 line of jquery ---- given that you don't interfere with vue's rendered data. I hope you understand what I'm trying to say here – John Commented Jun 12, 2017 at 10:47

 |  Show 1 more comment

4 Answers 4

Sorted by: Reset to default 8

After two days of searching. Its eslintrc.js

add this to the following and it will fix the provide plugin.

env: {
  browser: true,
  jquery: true
},

go into main.js and do

window.$ = window.jQuery = require('jquery')

or

Vue.use({
    install: function(Vue, options){
        Vue.prototype.$jQuery = require('jquery'); // you'll have this.$jQuery anywhere in your vue project
    }
})

Another approach for those who are not using webpack is using expose-loader:

yarn add expose-loader

and the in your main.js

import "expose-loader?$!jquery";

I found my solution. I put my changes in webpack.dev.conf.js instead of webpack.dev.config and eslintrc.json instead of eslintrc.js.

本文标签： javascriptHow to include jquery in a vuejs webpack cli projectStack Overflow