Vue не определяется в компонентах

Question

У меня есть файл: components.js:

import Vue from 'vue'

import SelectCategory from './components/SelectCategoryComponent'
import CommentsManager from './components/CommentsManagerComponent'

Vue.component('select-category', SelectCategory);
Vue.component('comments-manager', CommentsManager);

В app.js я импортировал этот файл:

window.Vue = require('vue');

import './components'

Но при загрузке страницы я получаю сообщение об ошибке: Vue is not defined,Когда я добавляю import Vue from 'vue' в каждый компонент, тогда все работает хорошо.Но как я могу добавить Vue глобально, без добавления import Vue from 'vue' в каждый компонент?

Answer 1

Но как я могу добавить Vue глобально, без добавления импорта Vue из 'vue' в каждый компонент

Вы не должны использовать глобальные переменные.Поместите import Vue from 'vue' в каждый файл.

Теперь, если вы все еще хотите, используйте global вместо window.И убедитесь, что файл загружен первым.Или, возможно, вы захотите установить window= в своем HTML-файле и не указывать его в каждом файле.

Answer 2

Как я вижу в вашем components.js, вы импортировали Vue, и вы импортировали еще один Vue, и вы установили его в window object.таким образом, вы импортировали 2 разных Vue в свое приложение, и нет необходимости использовать components.js и app.js, которые могут быть перепутаны позже.поэтому я предлагаю вам поместить все ваши требования в файл app.js.поэтому файл app.js будет выглядеть так:

    import Vue from 'vue'; // es6 syntax
    window.Vue = Vue;

    import SelectCategory from './components/SelectCategoryComponent'
    import CommentsManager from './components/CommentsManagerComponent'

    Vue.component('select-category', SelectCategory);
    Vue.component('comments-manager', CommentsManager);