Vue.js 3:无法导入 Vue 全局对象 [英] Vue.js 3: Cannot import Vue global object

问题描述

我疯狂地试图将 Vue 3 CLI 输出调和成适用于各种教程和插件的东西，这些教程和插件都使用 Vue 对象，如 Vue.createApp(....在我的项目，我可以使用

I'm going crazy trying to reconcile the Vue 3 CLI output into something that works with various tutorials and plugins that all use the Vue object, as in Vue.createApp(.... In my project, I can use

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

但是 import Vue from 'vue'; 导致 Vue 仍未定义.我通过 NPM 安装了 Vue 3.很明显，我对 NPM 导入有一些关键的地方不了解，如果导入整个模块不起作用，{createApp} 导入如何工作?

but import Vue from 'vue'; results in Vue still being undefined. I have Vue 3 installed via NPM. Clearly there is something critical that I don't understand about NPM imports, how could the {createApp} import work if importing the whole module does not work?

来自 package.json:

From 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 函数定义:

Here is my temporary main.js. This prints 'undefined' followed by the correct createApp function definition:

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

推荐答案

如果您正在使用 CDN Vue 可用作全局变量，可用于通过调用方法 createApp 类似于 Vue.createApp({...})，但如果您使用的是使用 npm 模块的打包器，则没有 Vue 对象从 vue 模块导入，因此您应该从中导入 createApp 以创建一个新实例，例如:

If you're working with CDN Vue is available as global variable which could be used to create instance by calling the method createApp like Vue.createApp({...}), but if you're working with a bundler which uses npm modules, there no Vue object imported from vue module so you should import createApp from it to create a new instance like :

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

更多细节请查看全局API的迁移指南

这篇关于Vue.js 3:无法导入 Vue 全局对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！