Rumah > Artikel > hujung hadapan web > 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]
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
.
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-demi
Prinsip melaksanakan pemprosesan terbeza untuk versi vue yang berbeza adalah seperti ini.
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!