Vue js - 수집되지 않은 참조 오류: jQuery가 정의되지 않았습니다.

Vue js - 수집되지 않은 참조 오류: jQuery가 정의되지 않았습니다.

Vue.js가 처음이라 jQuery formBuilder 플러그인을 사용하는 커스텀 컴포넌트를 작성하려고 합니다.컴포넌트 파일을 다른 컴포넌트에 포함하면 다음 오류가 발생합니다.

Uncaughed ReferenceError: jQuery가 /resources/js/form-builder.min.js에 정의되어 있지 않습니다.

이름을 사용하여 사용자 지정 구성 요소를 생성했습니다.formBuilder.vue컴포넌트 코드는 다음과 같습니다.

<template>
   <div class="content">
      <formBuilder/>
   </div>
</template>
<script>
   // import './jquery.min.js';
   // import './jquery-ui.min.js';
   // import './form-builder.min.js';
   export default {      
       created() {

       },
       data() {
           return { 

           }
       },
       mounted() {
         jQuery(this.$el).formBuilder();
       },
       methods: {
       }
   }
</script>

인app.js파일, 저장 위치resource/js/app.js이 vue를 다른 컴포넌트에서 재귀적으로 사용하기 위해 호출합니다.

window.Vue = require('vue');
require('./bootstrap');
require('admin-lte');
require('./datatable');
import router from './router';
import Datepicker from 'vuejs-datepicker';
import CKEditor from 'ckeditor4-vue';
import FullCalendar from 'vue-full-calendar';
import 'fullcalendar/dist/fullcalendar.css'
import Vue from 'vue';
import jQuery from 'jquery'
import './form-builder.min.js';
Vue.use(VueRouter)
Vue.use(FullCalendar);
Vue.use(CKEditor)
Vue.component("vue-datepicker", Datepicker);
Vue.component('FormBuilder', require('./components/tools/formBuilder.vue').default);

const app = new Vue({
  el: '#app',
  router
});

폼빌더 컴포넌트를 사용하고 있는 컴포넌트 파일입니다.

  <template>
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Questionnaire</h1>
                    </div>
                    <div class="col-sm-6"></div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <div class="card">
                            <FormBuilder/> <!--- used formbuilder component --->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        created() {
        },
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

에러도 첨부했습니다.

제가 잘못하고 있는 곳을 찾아주실 수 있나요?

잘 부탁드립니다.

개체를 Vue의 앱 JS로 가져오더라도 다른 구성 요소에서 사용할 수 있도록 해당 개체가 자동으로 생성되지는 않습니다.

적어도 두 가지 방법이 있습니다(단, 이 모든 것을 피하고 Import만 하는 것이 좋습니다).jQuery필요한 컴포넌트 내) :

옵션 1:Vue.prototype

앱 JS에서 jQuery를 추가한다.VueImport 후 프로토타입을 사용하면 구문을 사용하여 모든 컴포넌트에 액세스할 수 있습니다.this.jQuery:

Vue.prototype.jQuery = jQuery

옵션 2:window물건

또는 Import 후 창 개체에 추가하여 다음과 같이 사용할 수 있습니다.window.jQuery:

window.jQuery = jQuery

옵션 3: 개별 Import

이 컴포넌트를 사용하는 컴포넌트에 Import 하는 것만으로, 보다 읽기 쉽고 유지보수가 용이할 가능성이 있습니다.

import jQuery from 'jquery'

그런 다음 예제 구문과 함께 사용할 수 있습니다.

(Vue 3)에서는 어떤 이유로 CLI를 중지하고 재시작해야 했습니다.

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

Eslint는 "예상치 않은 최상위 속성" "$"를 반환할 수 있습니다.패키지에 예외를 삽입해야 합니다.json

"env": {
    ...
    "jquery": true,
 },

jquery는 .vue 파일에서만 사용할 수 있습니다.따라서 확장 및 라이브러리에서 오류가 보고될 수 있습니다.이 경우 다음 두 가지 옵션이 있습니다.

1. 라이브러리를 .vue 템플릿으로 변환합니다.
2. 그 위에 로컬 Import를 합니다.

import jQuery from 'jquery'

언급URL : https://stackoverflow.com/questions/60601440/vue-js-getting-uncaught-referenceerror-jquery-is-not-defined