web-dev-qa-db-ja.com

Uncaught ReferenceError：$が定義されていません（VueJS）

私はVueJSプロジェクトを始めました：

vue init webpack my-project

そして、npmでjQueryを取得しました：

npm install jquery

そして、私はこの行を私のmain.jsファイルに入れます：

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

どちらにしても、このコードは使用できません：（セマンティックUIから）

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

私はこのエラーを受け取るので：

Uncaught ReferenceError: $ is not defined

なぜこれが起こっているのですか？

jqueryvue.jssemantic-ui
5
Enrique Bermúdez

Npm経由でjQueryをインストールしている場合は、次のようにインポートします。

import $ from 'jquery'

そして、メソッド内で、$ なので：

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

jQueryコードをVueコードから分離することをお勧めします。アセットでjQueryファイルを作成してECMAScriptexportおよび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()
        }
    }
0
Abdelsalam Shahlol