показывая Vue не определена ошибка при импорте vue-router - PullRequest
Новая
       6

показывая Vue не определена ошибка при импорте vue-router

0 голосов
/ 11 сентября 2018

Я создал новый проект с помощью команды vue-cli 'vue init webpack-simple my-app'. В этой свежей установочной копии я пытаюсь импортировать vue-router в компонент App.vue, который был создан по умолчанию. Но это дает мне ошибку: «Uncaught ReferenceError: Vue is not defined». Если я снова импортирую vue в App.vue, то приложение работает нормально. Но я уже импортировал vue в main.js, так почему мне нужно импортировать его снова в App.js? Можно ли как-нибудь использовать импортированный vue из main.js? Вот мой код:

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>

Ответы [ 3 ]

0 голосов
/ 12 сентября 2018

ты пробовал это?

import Vue from 'vue' import VueRouter from 'vue-router'

, затем используйте

Vue.use(VueRouter)

, поскольку сообщение об ошибке означает, что сначала вам нужно импортировать vue для использования vue-router

0 голосов
/ 12 сентября 2018

Есть ли способ использовать импортированное значение vue из main.js?

Нет, вам нужно импортировать его в каждый файл, который использует Vue. Импорт / требует, как вещи подключены. Будьте уверены, каждый импорт будет одним и тем же экземпляром.

Вы можете добраться до маршрутизатора из javascript компонента Vue, используя this.$router и this.$route без импорта, или внутри шаблона, используя просто $router и $route

Не рекомендуется, но вы можете назначить Vue глобальному в main.js и использовать глобальный без импорта.

main.js 

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

App.vue 

import VueRouter from 'vue-router';

MyVue.use(VueRouter);

Почему

Вот как ES6 связывает вещи. Считайте это wiring. Если бы было доступно более 1 Vue lib, как бы компоновщик узнал, какой использовать? Что если другая библиотека определила переменную или функцию с именем Vue? Возможно, библиотека использует свое внутреннее Vue для шины событий или другой функции.

Другие мысли

Явный импорт также улучшает автозаполнение IDE и подсветку синтаксиса. Некоторые IDE могут автоматически добавлять импорт, что облегчает жизнь.

0 голосов
/ 11 сентября 2018

Вы поступили правильно, и вам не нужно беспокоиться об импорте Vue в несколько файлов. Когда вы отправляете свое приложение и создаете его для производства, у вас будет только один «Vue import». Если вы посмотрите на папку dist и ваши файлы .js, вы увидите, что Vue импортируется только один раз.

...