未捕获的ReferenceError：$未定义（VueJS）

Question

我已经开始了一个VueJS项目有：

vue init webpack my-project

并得到了jQuery的与NPM：

npm install jquery

我把此行中我main.js文件：

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

无论哪种方式，我不能使用这一段代码：（从语义UI）

$('.ui.rating')
  .rating()
;

因为我得到这个错误：

Uncaught ReferenceError: $ is not defined

任何想法，为什么发生这种情况？

Answer 1

如果您通过NPM安装jQuery的，只是导入它是这样的：

import $ from 'jquery'

和你的方法里，你就可以开始使用$为：

methods: {
  getFoo() {
    $( "div.foo" ).html();
  }
}

Answer 2

这是更好地保持从Vue的代码分离jQuery代码。您可以通过在资产jQuery的文件，做到这一点，并使用ECMAScript的export和import功能。

 //your jQuery functions file e.g main.js
    import $ from 'jQuery //import jQuery 

    export function somethingWithjQuery(){
     console.log($)
     }

而你的Vue组件的内部，你可以这样做：

 import {somethingWithjQuery} from './assets/js/main'

    export default {
        name: 'app',
        components: {
            Hello
        },
        mounted() {
            somethingWithjQuery()
        }
    }