个性化阅读
专注于IT技术分析

解决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用于事件总线或其他特性。

赞(0) 打赏
未经允许不得转载:srcmini » 解决Vue问题:Uncaught ReferenceError Vue is not defined
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏