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'时，一切正常。但是，如何在不向每个组件添加import Vue from 'vue'的情况下全局添加Vue？

Answer 1

正如我所见，在您的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);

Answer 2

但是我如何全局添加Vue，而不必在每个组件中都从'vue'添加导入Vue

您不应使用全局变量。在每个文件中放入import Vue from 'vue'。

现在，如果您仍然愿意，请使用global代替window。并确保首先加载该文件。或者，您可能想要在HTML文件中设置window=，并将其保留在每个文件之外。

Vue未在组件中定义

2 个答案: