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

Posted 2023-02-22

【中文标题】未捕获的 ReferenceError: $ 未定义 (VueJS)

【英文标题】：Uncaught ReferenceError: $ is not defined (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 或类似的东西才能在属性中使用它

【参考方案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()