Saya menjadi gila mencoba untuk merekonsiliasi output Vue 3 CLI menjadi sesuatu yang bekerja dengan berbagai tutorial dan plugin yang semuanya menggunakan objek Vue, seperti pada Vue.createApp(.... Dalam proyek saya, saya dapat menggunakan

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

Tetapi import Vue from 'vue'; menghasilkan Vue masih belum terdefinisi. Saya telah menginstal Vue 3 melalui NPM. Jelas ada sesuatu yang penting yang saya tidak mengerti tentang impor NPM, bagaimana impor {createApp} bisa berfungsi jika mengimpor seluruh modul tidak berfungsi?

Dari 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"
  },

Ini main.js sementara saya. Ini mencetak 'tidak terdefinisi' diikuti dengan definisi fungsi createApp yang benar:

import Vue from 'vue';
import {createApp} from 'vue';
console.log(Vue);   
console.log(createApp);   
4
Gregorio246 3 November 2020, 00:10

1 menjawab

Jawaban Terbaik

Jika Anda bekerja dengan CDN Vue tersedia sebagai variabel global yang dapat digunakan untuk membuat instance dengan memanggil metode createApp seperti Vue.createApp({...}), tetapi jika Anda bekerja dengan bundler yang menggunakan modul npm, tidak ada objek Vue yang diimpor dari modul vue jadi Anda harus mengimpor createApp darinya untuk membuat instance baru seperti:

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

Untuk detail selengkapnya, lihat panduan migrasi API global

2
Boussadjra Brahim 2 November 2020, 21:18