解决Vue问题：Uncaught ReferenceError Vue is not defined

用vue-cli 命令：vue init webpack-simple my-app创建了一个新项目，在新项目中在默认创建的App.vue组件中导入vue-router，但是Vue抛出错误:’Uncaught ReferenceError: Vue is not defined’，下面是main.js文件：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue文件：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  import Vue from 'vue';   //**why I need to import it again? I already imported it in main.js
  import VueRouter from 'vue-router';
  Vue.use(VueRouter);

  import QuestionOne from './components/QuestionOneTemplate';

  const routes = [
    { path: '/', name: 'QuestionOne', component: QuestionOne },
  ];

  const router = new VueRouter({
    routes
  });

  window.router = router;

  export default {
    router,
    name: 'app',
    data () {
      return {
      }
    }
  }
</script>

<style lang="scss">
</style>

解决办法

是否有办法使用main.js导入的vue ?没有，你需要将它导入到使用Vue的每个文件中，可使用import/require链接。每个导入都是相同的单例实例，因此你可以这样获取路由：从Vue组件的javascript使用$router和route，这样就不用使用import，或者只在模板中使用$router和route（不推荐使用），但是你可以将Vue分配给main中的全局遍历，这样使用全局变量就不用使用导入，如下：

main.js文件：

import Vue from 'vue';
global.MyVue = Vue

App.vue文件：

import VueRouter from 'vue-router';

MyVue.use(VueRouter);

为什么呢？这就是ES6的链接方式，考虑到它的布线，如果有超过1个Vue库可用，链接器如何知道使用哪一个？如果另一个库定义了一个名为Vue的变量或函数，该怎么办？可能lib将自己的内部Vue用于事件总线或其他特性。