【问题标题】: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.jsapp.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);
    

    【讨论】:

      猜你喜欢
      • 2021-02-25
      • 2017-11-07
      • 2018-01-22
      • 2020-12-09
      • 2016-07-12
      • 2018-01-05
      • 2019-04-05
      • 2018-12-04
      • 2019-09-10
      相关资源
      最近更新 更多