vue2中使用jquery

Question

想在vue2中使用jquery 参照网上的教程 修改webpack.base.conf.js

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': resolve('src/assets'),
      'jquery': resolve('src/assets/js/jquery.min.js')
    }
  },
  // 增加一个plugins
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ],

但是在组件中调用$时候 仍然会报错

<template>
  <div>
    <h1 id="msg"></h1>    
  </div>
</template>

<script>
export default {
  mounted () {
    console.log($('#msg'))
  }
}
</script>

<style scoped>
</style>

TypeError: $ is not a function

如果调用的时候import

<template>
  <div>
    <h1 id="msg"></h1>    
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  mounted () {
    console.log($('#msg').size())
  }
}
</script>

则会报错

TypeError: __webpack_require__.i(...) is not a function

Answer 1

import $ from 'jquery';

Answer 2

我们没有弄那么复杂，直接以模块形式调用不好么。。。

npm install --save jquery

import $ from "jquery"

然后就能用了

Answer 3

还是要先写import才可以啊。

Answer 4

plugins: [

        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "windows.jQuery": "jquery"
        })
    ]

试试这个！朋友

Answer 5

直接引入srcript标签或者import都可以吧

Answer 6

这朋友你这种做法是想引入把jquery用cdn引入吧，但是觉得既然使用vue，jquery不是必要的东西了，很多插件也都不必依赖jquery的，感觉不是很有必要。

Answer 7

或者在index.html 页面直接引用
<script type="text/javascript" src="./static/jquery.min.js"></script>