Satu artikel menerangkan secara terperinci cara membezakan projek mengikut versi vue

Bagaimana untuk membezakan mengikut versi? Artikel berikut akan memperkenalkan kepada anda kaedah pembezaan mengikut versi vue dalam projek ini. Saya harap ia akan membantu anda!

Baru-baru ini, semasa saya memulakan dan membina projek, saya menghadapi masalah ralat konsol lib_exports.getCurrentInstance is not a function, saya mempelajari beberapa pengetahuan dalam proses menyelesaikan masalah ini: Vue mempunyai banyak Versi, seperti 2.6.x, 2.7, 3.x, versi vue yang berbeza mempunyai perbezaan penggunaan, dan versi vue yang berbeza akan digunakan dalam projek yang berbeza. Katakan terdapat alat awam yang perlu disediakan untuk projek yang berbeza , kemudian Bagaimanakah alat boleh dibezakan berdasarkan versi vue dalam projek yang berbeza? Mula-mula anda boleh berfikir tentang cara untuk melaksanakannya, dan kemudian teruskan membaca dengan soalan dalam fikiran. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Penyelesaian masalah awal

Seperti yang anda boleh lihat daripada tangkapan skrin ralat, punca langsung ialah ralat konsol yang disebabkan oleh memanggil kaedah vueuse dalam kaedah useVModel getCurrentInstance. Daripada kod sumber vueuse, anda boleh melihat bahawa vueuse mengimport kaedah vue-demi daripada getCurrentInstance.

Kemudian saya melihat kod sumber vue-demi, seperti yang ditunjukkan di bawah, dan mendapati sesuatu yang salah Versi vue yang saya gunakan untuk projek ini ialah vue2 Mengapa terdapat isVue = true dalam kod tersebut? Selain itu, getCurrentInstance hanya terbina dalam vue2.7 dan vue3 Sebelum vue2.7, @vue/composition-api hanya boleh digunakan melalui getCurrentInstance.

prinsip vue-demi

vue-demi ialah alat yang menyokong kedua-dua vue2.x dan Pustaka alat vue3 .x untuk alat menulis Vueuse menggunakan perpustakaan ini untuk melancarkan beberapa perbezaan antara vue2.6.x, vue2.7 dan vue3.x.

Lihat bahagian vue-demi package.json scripts dan anda boleh melihat bahawa ia dikonfigurasikan dengan postinstall cangkuk npm script Cangkuk postinstall akan dilaksanakan selepas anda laksanakan perintah pnpm install.

Mari lihat apa yang node_modules/vue-demi/scripts/postinstall.js lakukan terlebih dahulu. Ia akan cuba memuatkan vue (require('vue')). Sila ambil perhatian di sini bahawa jika anda mengkonfigurasi alias vue dalam vite atau pek web, seperti { find: /^vue$/, replacement: '@xf/vue' },, ia tidak akan berkuat kuasa pada skrip, kerana skrip dilaksanakan serta-merta selepas memasang kebergantungan, dan projek belum dimulakan pada masa ini. masa. vite tidak berkaitan.

Selepas cuba memuatkan vue, ia menentukan keadaan dan melaksanakan kaedah switchVersion.

Perkara utama yang dilakukan oleh kaedah switchVersion ialah menyalin kandungan konfigurasi yang berbeza berdasarkan parameter nombor versi yang diluluskan dan menggantikannya dalam fail sasaran.

Jika ia vue2.5 atau vue2.6, maka ia menyalin kandungan kod sumber berikut:

Jika ia vue3, maka ia menyalin kandungan kod sumber berikut:

vue-demiPrinsip melaksanakan pemprosesan terbeza untuk versi vue yang berbeza adalah seperti ini.

Punca dan penyelesaiannya

Kembali ke masalah ralat konsol dalam projek Ini kerana vue-demi tidak dapat mengenali vue dalam projek kerana projek Apa dipasang adalah @xf/vue selepas kod sumber vue telah diubah suai, tetapi tiada pnpm add vue. Jika ia tidak dikenali, vue-demi menggunakan konfigurasi lalai (konfigurasi lalai ialah konfigurasi vue3).

Vue yang kami gunakan semasa menjalankan kod ialah vue2.5.X Jika anda mencuba import { getCurrentInstance } from 'vue', anda pasti akan mendapat ralat.

Penyelesaian ialah vue-demi menyediakan arahan untuk menukar konfigurasi versi vue secara manual Kami mengkonfigurasi skrip npm sediakan untuk projek: npx vue-demi-switch 2 Selepas konfigurasi, ia akan dilaksanakan setiap kali kebergantungan projek dipasang. dan beralih secara manual kepada konfigurasi vue2 .

(Mempelajari perkongsian video: tutorial pengenalan vuejs, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Satu artikel menerangkan secara terperinci cara membezakan projek mengikut versi vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!