【问题标题】:Vue.js 3: Cannot import Vue global objectVue.js 3:无法导入 Vue 全局对象
【发布时间】:2021-02-15 13:43:30
【问题描述】:

试图将 Vue 3 CLI 输出调和为适用于所有使用 Vue 对象的各种教程和插件的东西,如Vue.createApp(...,我快疯了。在我的项目中,我可以使用

import {createApp} from 'vue';
createApp(...

但是import Vue from 'vue'; 导致 Vue 仍然未定义。我通过 NPM 安装了 Vue 3。显然,关于 NPM 导入,我不了解一些关键问题,如果导入整个模块不起作用,{createApp} 导入如何工作?

来自 package.json:

"dependencies": {
    "@babel/polyfill": "^7.12.1",
    "apexcharts": "^3.22.1",
    "core-js": "^3.6.5",
    "d3": "^6.2.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-rc.1",
    "vue3-apexcharts": "^1.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-transform-regenerator": "^6.26.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  },

这是我的临时 main.js。这将打印“未定义”,然后是正确的 createApp 函数定义:

import Vue from 'vue';
import {createApp} from 'vue';
console.log(Vue);   
console.log(createApp);   

【问题讨论】:

    标签: vue.js npm vue-cli vuejs3


    【解决方案1】:

    如果您使用 CDN,Vue 可用作全局变量,可用于通过调用方法 createApp(如 Vue.createApp({...}))来创建实例,但如果您使用的是使用 npm 模块的捆绑程序,没有从 vue 模块导入的 Vue 对象,因此您应该从中导入 createApp 以创建一个新实例,例如:

     import {createApp} from 'vue';
     let app=new createApp({...})
     app.use(somePlugin)
     app.mount("#app")
    

    更多详情请查看global API的迁移指南

    【讨论】:

    • 谢谢。我之所以研究这个问题是因为我使用的依赖项之一 vue3-apexcharts 抛出了一个错误,指出没有全局 Vue 对象。我想我会为那个项目提交一个问题。
    • @Gregorio246 根据这个comment 顶点图表不兼容vue 3
    • 他在那条评论中谈到的组件大约是在一周前发布的,这就是我正在使用的。
    • 你在说这个one
    • 是的,就是这个。
    猜你喜欢
    • 1970-01-01
    • 2020-12-13
    • 2020-07-08
    • 2021-01-04
    • 2021-10-18
    • 2017-10-21
    • 2019-03-14
    • 2021-05-07
    • 1970-01-01
    相关资源
    最近更新 更多