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>

未捕获的ReferenceError：Vue未在.vue文件中定义

1 个答案: