Vue JS组件未捕获ReferenceError：未定义Vue

Question

我是vue js的新手，正在学习组件。我创建了一个包含组件的基本程序。以下是我的文件

project / src / main.js

import Vue from 'vue'
window.Vue = Vue;

import ButtonCounter from './components/ButtonCounter.vue'

new Vue({
    el: '#components-demo',
    render: h => h(ButtonCounter)
})

project / src / components / ButtonCounter.vue

<template>
<div id="components-demo">
<button-counter></button-counter>
</div>
</template>

<script>
// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
</script>

执行此操作时，即使在main.js中全局声明了Vue，我也会收到以下错误消息

Answer 1

此行中有错误

window.Vue = Vue;

只需导入并创建Vue的新实例

import Vue from 'vue'
import ButtonCounter from './components/ButtonCounter.vue'

new Vue({
    el: '#components-demo',
    render: h => h(ButtonCounter)
})

Answer 2

因此，看起来您已经采用了组件定义并将其移至另一个文件。如果移至另一个文件，则不需要使用Vue.component。您只需export一个对象，其中包含要附加到组件的数据，方法等。在Vue实例中，您可以通过components属性附加导入的组件。即

主要index.html

<div id="components-demo">
  <button-counter></button-counter>
</div>

Component.vue

<template>
  <button v-on:click="count++">You clicked me {{ count }} times.</button>
</template>

<script>
export default {
  data: function () {
    return {
      count: 0
    }
  }
})
</script>

然后在您的主文件中

import Vue from 'vue'
// window.Vue = Vue; -- don't need this anymore

import ButtonCounter from './components/ButtonCounter.vue'

new Vue({
    el: '#components-demo',
    render: h => h(ButtonCounter),
    components: {ButtonCounter}
})