Vue 没有在组件中定义答案

【问题标题】：Vue is not defined in componentsVue 没有在组件中定义
【发布时间】：2019-02-14 19:53:19
【问题描述】：

我有文件：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' 呢？

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

但是我怎样才能全局添加 Vue，而不在每个组件中添加 import Vue from 'vue'

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

现在，如果您仍想使用，请使用 global 而不是 window。并确保首先加载该文件。或者，您可能希望在您的 html 文件中设置 window=，并将其保留在每个文件之外。

【讨论】：

如果我在每个组件中都导入 Vue，性能会不会好？
在多个组件中导入 Vue 并不意味着您最终会在构建中使用多个 vue 副本；它只是告诉 webpack 每个组件的依赖关系。

【解决方案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);

【讨论】：