javascript - vue 文件未捕获引用错误 : Vue is not defined in .

Question

嗨，我是 vue 新手，我已经在全局范围内安装了 vue-cli，想知道为什么会收到此错误:

Uncaught ReferenceError: Vue is not defined
at eval (Hello.vue?13ca:73)
at Object.<anonymous> (main.js:1061)
at __webpack_require__ (main.js:679)
at fn (main.js:89)
at eval (Hello.vue?549c:1)
at Object.<anonymous> (main.js:1049)
at __webpack_require__ (main.js:679)
at fn (main.js:89)
at eval (index.js?fc04:1)
at Object.<anonymous> (main.js:1035)

我的 main.js 看起来像这样:

import 'bootstrap';
import Vue from 'vue';
import App from './App';
import router from './router';


Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App,
  },
});

由于还引用了index.js，我也发布了它的代码:

import Vue from 'vue';
import Router from 'vue-router';
import Hello from '../components/Hello';


Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
    },
  ],
});

错误是由于 Hello.vue 文件中的这部分引起的，当我删除此部分时，一切似乎都正常:

<script>

  var nav = new Vue({  
  el: '#loginButtons',
  methods: {
    open: function(which, e) {
      // Prevents clicking the link from doing anything
      e.preventDefault();
    }
  }
});
</script>

Answer 1

<script>单文件组件的标签必须为 export通常传递给 new Vue() 的对象构造函数。您也不需要 el属性，因为 Vue 将使用 <template>作为根元素。

<script>
export {
  methods: {
    open: function(which, e) {
      // Prevents clicking the link from doing anything
      e.preventDefault();
    }
  }
};
</script>