javascript - Vue js - 获取 Uncaught ReferenceError : jQuery is not defined

Question

我是 Vue.js 的新手，正在尝试创建一个使用 jQuery 的自定义组件 formBuilder插入。当我将组件文件包含在另一个组件中时，出现错误:

Uncaught ReferenceError: jQuery is not defined in /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
});

这是我使用 formbuilder 组件的组件文件

  <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>

我已附上错误

你们能帮我找出我哪里做错了吗？

提前致谢。

Answer 1

将对象导入 Vue 的应用程序 JS 不会自动生成该对象以供其他组件使用。

至少有两种方法可以做到这一点(尽管我建议避免所有这些并且只在需要它的组件中导入 jQuery):

选项 1:Vue.prototype

在您的应用 JS 中，在导入后将 jQuery 添加到 Vue 原型(prototype)，这将使​​每个组件都可以使用语法 this.jQuery 访问它:

Vue.prototype.jQuery = jQuery

选项 2:window 对象

或者，您可以在导入后将其添加到 window 对象并像 window.jQuery 一样使用它:

window.jQuery = jQuery

选项 3:单独进口

简单地将它导入到使用它的组件中可能更具可读性/可维护性:

import jQuery from 'jquery'

然后您可以将它与示例中的语法一起使用。