Bagaimana cara menjalankan komponen vue di proyek reaksi? Pengenalan metode

Cara cepat memulai VUE3.0: Latar belakang mempelajari

artikel ini berasal dari sebuah wawancara. Saya ditanya, jika komponen vue dan react perlu diinteroperasikan dan digunakan kembali, bagaimana cara mengimplementasikannya dengan elegan?

Kecuali pengembang mentransfer kode secara manual. Saat ini, saya hanya dapat memikirkan dua solusi.

• Solusi 1: Konversi kode vue dan kode reaksi (sinkronisasi pustaka komponen).

• Solusi 2: Biarkan komponen vue berjalan secara langsung di proyek React, dan sebaliknya.

Mari kita lihat implementasinya terlebih dahulu

Komponen vue dirender secara normal dalam reaksi, dan saya juga mengklik tombol tersebut sebanyak 3 kali . Respons dan render vue juga normal

.

Prinsip implementasinya adalah

• dengan memperkenalkan vue versi lengkap (jika Anda mempertimbangkan kinerja, Anda dapat memperkenalkannya sesuai permintaan)

• tunggu hingga tahap komponenDidMount, mount <div id="vueApp" /> dan kemudian

• new Vue(..).$mount('#vueApp')

import Vue from 'vue/dist/vue.min.js' //Perkenalkan versi lengkap, jika tidak, sintaksis objek komponen vue tidak dapat diuraikan ekspor kelas default App extends Component {
  konstruktor(alat peraga) {
    super (alat peraga)
  }
  
  komponenDidMount() {
    konstanta Foo = {
      templat: `
        <div>
          <h1>Saya vue: {{aaa}}</h1>
          <h1>Saya vue: {{aaa}}</h1>
          <h1>Saya vue: {{aaa}}</h1>
          <button @click="aaa++">Tombol</button>
        </div>
      `,
      data(){
        kembali {
          aaa: 2222
        }
      }
    }
    Vue baru({
      render: h => h(Foo),
    }).$mount('#vueApp')
  }

  memberikan() {
    kembali (
      <div>
        <h1>Saat ini dalam proyek reaksi</h1>
        <h1>Saat ini dalam proyek reaksi</h1>
        Berikut ini akan merender komponen vue <div id="vueApp" />
      </div>
    )
  }
}

Catatan:

Jika Anda hanya perlu mendukung objek opsi komponen vue, maka Anda tidak perlu mengkonfigurasi webpack.

Objek opsi komponen Vue mengacu pada:

const Foo = { 
    templat: ` 
        <div> 
            <h1>Saya vue: {{aaa}}</h1>
            <h1>Saya vue: {{aaa}}</h1> 
            <h1>Saya vue: {{aaa}}</h1> 
            <button @click="aaa++">Tombol</button> 
        </div> 
    `, 
    data(){ 
        kembali { 
            aaa: 2222 
        } 
    } 
}

Versi lanjutan

langsung

merupakan objek opsi komponen, tidak ada file .vue).

beberapa baris)

• untuk Mengimpor file .vue: import Foo from "./Foo.vue";

import Vue from 'vue/dist/vue.min.js' //Perkenalkan versi lengkap, jika tidak, sintaks objek komponen vue tidak dapat diurai import Foo dari "./ Foo.vue";
ekspor kelas default Aplikasi extends Komponen {
  ...
  
  komponenDidMount() {
    Vue baru({
      render: h => h(Foo),
    }).$mount('#vueApp')
  }

  ...
}

Agar hal ini dapat diterapkan, Anda perlu mengkonfigurasi

• situs resmi vue-loader: https://vue-loader.vuejs.org/guide/#manual-setup

// Di webpack.config.js const { VueLoaderPlugin } = require ('vue -loader')

modul.ekspor = {
  mode: 'pengembangan',
  modul: {
    aturan: [
      {
        tes: /.vue$/,
        pemuat: 'vue-loader'
      }
    ]
  },
  plugin: [
    // pastikan untuk menyertakan plugin ajaibnya
    Plugin VueLoader baru()
  ]
}

Catatan:

• Disarankan saat pengujian, jangan gunakan proyek react scaffolding , tetapi gunakan proyek reaksi yang mengkonfigurasi webpack.config.js dari awal.

• Saat saya menggunakan scaffolding versi terbaru, setelah menjalankan eject, buka webpack.config. js Penulisan di dalamnya akan melaporkan kesalahan karena VueLoaderPlugin tidak kompatibel dengan sintaks oneOf.

• Jika Anda tidak perlu mengurai file .vue dan langsung menggunakan sintaks objek opsi komponen vue, maka tidak perlu mengkonfigurasi vue-loader tambahan.

Singkatnya,

• disarankan agar Anda tidak menggunakan reaksi saat pengujian. Untuk proyek scaffold , gunakan proyek reaksi yang mengonfigurasi webpack.config.js dari awal.

• Jika Anda tidak perlu mengurai file .vue dan langsung menggunakan vue sintaks objek opsi komponen, maka tidak diperlukan konfigurasi tambahan pada vue-loader.

Terakhir, sebagai perbandingan, komponen React proyek vue digunakan dalam proyek reaksi, dan komponen vue digunakan dalam proyek reaksi.

Artikel ini diambil dari: https://juejin.cn/post/7083303446161391623

Penulis: bigtree.