Question

Vue.js 3：无法导入 Vue 全局对象

2020-11-02

30381

vue.js npm vue-cli vuejs3

我疯狂地尝试将 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。这会打印“undefined”，后跟正确的 createApp 函数定义：

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

Answer 1

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

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

有关更多详细信息，请查看全局 API 的迁移指南