未捕获的引用错误：未定义 Vue（尽管文件中包含直接脚本）

Question

我一直在尝试将这个 vue.js 模板实现到我的 vue 项目中，尽管在第一行设置了直接脚本，但它一直返回“未捕获的 ReferenceError: Vue is not defined”。

<script type="text/javascript" src="https://vuejs.org/js/vue.min.js"</script>

<template>
  <div id="app" class="wrapper">
      <fullcalendar class="full-Calendar" :events="events" :editable="true"></fullcalendar>
  </div>
</template>


<script>
  Vue.component('full-calendar', {
  template: '<div></div>',

  props: {
    events: {
      type: Array, 
      required: true
    },

    editable: {
      type: Boolean,
      required: false,
      default: false
    },

    droppable: {
      type: Boolean,
      required: false,
      default: false
    }
  },

  data: function()
  {
    return {
      cal: null
    };
  },

  ready: function()
  {
    var self = this;
    self.cal = $(self.$el);


    var args = {
      lang: 'en',
      header: {
        left:   'prev,next today',
        center: 'title',
        right:  'month,agendaWeek,agendaDay'
      },
      height: "auto",
      allDaySlot: false,
      slotEventOverlap: false,
      timeFormat: 'HH:mm',

      events: self.events,

      dayClick: function(date)
        {
            self.$dispatch('day::clicked', date);
            self.cal.fullCalendar('gotoDate', date.start);
            self.cal.fullCalendar('changeView', 'agendaDay');
      },

      eventClick: function(event)
        {
                self.$dispatch('event::clicked', event);
        }
    };

    if (self.editable)
    {
      args.editable = true;
      args.eventResize = function(event)
      {
        self.$dispatch('event::resized', event);
      }

      args.eventDrop = function(event)
      {
        self.$dispatch('event::dropped', event);
      }
    };

    if (self.droppable)
    {
      args.droppable = true;
      args.eventReceive = function(event)
      {
        self.$dispatch('event::received', event);
      }
    };

    this.cal.fullCalendar(args);

  } 

});

new Vue({
  el: '#app',

  data: {    
    events: [
        {
            title: 'Event1',
            start: '2018-08-10 12:30:00',
          end: '2018-08-10 16:30:00'
        },
        {
            title: 'Event2',
            start: '2018-08-07 17:30:00',
          end: '2018-08-07 21:30:00'
        }
    ]
  },
  events: {
    'day::clicked': function(date)
    {
      console.log(date);
    }
  }
});
</script>

<style>
.wrapper {
  margin: 2rem;
}
</style>

我也尝试将直接脚本添加到 index.html 并导致“[Vue warn]: Unknown custom element”

Answer 1

您只能在组件中使用一个<script> 标签。 由于存在 2 个，它将优先考虑默认语法流

<templete></templete>
<script></script>
<style></style>

看看这个 https://github.com/vuejs/vue-loader/issues/228

和

https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8