未捕获的 ReferenceError: $ 未定义 (VueJS)答案

【问题标题】：Uncaught ReferenceError: $ is not defined (VueJS)未捕获的 ReferenceError: $ 未定义 (VueJS)
【发布时间】：2018-07-09 11:42:38
【问题描述】：

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

vue init webpack my-project

并通过 npm 获得 jQuery：

npm install jquery

我将这一行放在我的 main.js 文件中：

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

无论如何，我不能使用这段代码：（来自语义用户界面）

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

因为我得到这个错误：

Uncaught ReferenceError: $ is not defined

知道为什么会这样吗？

【问题讨论】：

Uncaught ReferenceError: $ is not defined 这个错误大多与没有安装 Jquery 或没有正确声明有关。
你可能需要 require('jquery').default 但不要引用我的话。不过，我认为你真的应该在这里使用import。
为什么 window.$ 而不是只有 $？您可能必须使用 mixin 或类似的东西才能在属性中使用它

标签： jquery vue.js semantic-ui

【解决方案1】：

如果你通过 npm 安装了 jQuery，只需像这样导入它：

import $ from 'jquery'

在你的方法中，你可以开始使用$：

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

【讨论】：

它给了我同样的问题
请注意，您需要将其导入到它所使用的文件中，而不是您的 main.js 文件（或任何您称之为起始 js 文件的文件）。所以你需要在你使用它的每个文件中导入它。

【解决方案2】：

最好将 jQuery 代码与 Vue 代码分开。您可以通过在资产中创建一个 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()
        }
    }

【讨论】：