Bagaimana untuk menjalankan komponen vue dalam projek bertindak balas? Pengenalan kaedah

Bagaimana untuk menjalankan komponen

vue dalam projek react? Artikel berikut akan memperkenalkan kepada anda melalui contoh cara menjalankan komponen vue dalam projek bertindak balas. Saya harap ia akan membantu anda!

Latar belakang artikel ini datang daripada temu bual saya ditanya, Jika komponen vue dan react perlu saling beroperasi dan digunakan semula, bagaimana ia boleh dilaksanakan dengan elegan. ?

Kecuali pembangun memindahkan kod secara manual. Pada masa ini, saya boleh memikirkan hanya 2 penyelesaian

• Penyelesaian 1: Penukaran bersama kod vue dan kod tindak balas (penyegerakan perpustakaan komponen)

• Pilihan 2: Biarkan komponen vue secara langsung berjalan dalam projek React, dan begitu juga sebaliknya.

[Cadangan berkaitan: Tutorial video Redis, tutorial vuejs]

Mula-mula lihat kesan pelaksanaan

Komponen vue dipaparkan seperti biasa dalam ret, dan saya juga mengklik butang 3 kali ,Respons dan pemaparan Vue juga biasa

Bagaimana untuk melaksanakannya secara khusus?

Prinsip Pelaksanaan

• Memperkenalkan versi penuh vue (jika mempertimbangkan prestasi, ia boleh diperkenalkan atas permintaan)

• Tunggu sehingga peringkat componentDidMount, selepas dipasang <div id="vueApp"></div>

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

import Vue from 'vue/dist/vue.min.js' // 引入完整版，否则不能解析vue的组件对象语法
export default class App extends Component {
  constructor(props) {
    super(props)
  }
  
  componentDidMount() {
    const Foo = {
      template: `
        <div>
          <h1>我是vue : {{aaa}}</h1>
          <h1>我是vue : {{aaa}}</h1>
          <h1>我是vue : {{aaa}}</h1>
          <button @click="aaa++">按钮</button>
        </div>
      `,
      data () {
        return {
          aaa: 2222
        }
      }
    }
    new Vue({
      render: h => h(Foo),
    }).$mount(&#39;#vueApp&#39;)
  }

  render() {
    return (
      <div>
        <h1>当前是react项目内</h1>
        <h1>当前是react项目内</h1>
        以下将渲染vue组件
        <div id="vueApp" />
      </div>
    )
  }
}

Nota:

Jika anda hanya perlu menyokong objek pilihan komponen vue, maka anda tidak perlu mengkonfigurasi pek web dan anda sudah selesai.

Objek pilihan komponen Vue merujuk kepada:

const Foo = { 
    template: ` 
        <div> 
            <h1>我是vue : {{aaa}}</h1>
            <h1>我是vue : {{aaa}}</h1> 
            <h1>我是vue : {{aaa}}</h1> 
            <button @click="aaa++">按钮</button> 
        </div> 
    `, 
    data () { 
        return { 
            aaa: 2222 
        } 
    } 
}

Versi lanjutan

Di sini versi lanjutan merujuk kepada: Memerlukan sokongan fail/komponen vue (demo di atas secara langsung adalah objek pilihan komponen, tiada fail .vue)

Contohnya: (teruskan menggunakan demo di atas dan tukar beberapa baris)

• Ditukar untuk mengimport fail .vue: import Foo from "./Foo.vue";

import Vue from 'vue/dist/vue.min.js' // 引入完整版，否则不能解析vue的组件对象语法
import Foo from "./Foo.vue";
export default class App extends Component {
  ...
  
  componentDidMount() {
    new Vue({
      render: h => h(Foo),
    }).$mount('#vueApp')
  }

  ...
}

Untuk berkuat kuasa pada masa ini, anda perlu mengkonfigurasi vue-loader

• Laman web rasmi: https://vue-loader.vuejs.org/guide/#manual-setup

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

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin()
  ]
}

Nota

• Adalah disyorkan bahawa semasa menguji, jangan gunakan projek perancah bertindak balas, tetapi gunakan projek tindak balas yang mengkonfigurasi pek web .config.js dari awal

• Apabila saya sedang menggunakan versi terbaru perancah, selepas menjalankan eject, saya akan mendapat ralat semasa menulis dalam webpack.config .js kerana VueLoaderPlugin tidak serasi dengan sintaks oneOf

• Jika anda tidak perlu menghuraikan fail .vue dan terus menggunakan sintaks objek pilihan komponen vue, maka tidak perlu lagi mengkonfigurasi vue-loader

Ringkasan

• Adalah disyorkan bahawa semasa menguji, jangan gunakan react projek perancah, tetapi gunakan projek bertindak balas yang mengkonfigurasi webpack.config.js dari awal

• Jika anda tidak perlu menghuraikan fail .vue dan terus menggunakan vue's sintaks objek pilihan komponen, maka tidak perlu mengkonfigurasi vue-loader

Akhir sekali, mari kita bandingkan perbezaan konfigurasi antara menggunakan komponen tindak balas dalam projek vue dan menggunakan komponen vue dalam projek bertindak balas!

Adakah anda perlu mengkonfigurasi pemuat webpack.config.js?

Menggunakan komponen tindak balas dalam projek vue

	一定需要配置webpack.config.js的loader吗？
在vue项目中使用react组件	yes，需配置babel-loader，编译.jsx文件，需要额外注意配babel-loader的option选项
在react项目中使用vue组件	no，如果不用解析.vue文件的话，直接用vue的组件选项对象语法的话，那么不用额外的配置vue-loader。需要支持.vue文件的话，需要配vue-loader

ya

memerlukan konfigurasi

pemuat babel

,

Kompilasi fail .jsx

, anda perlu memberi perhatian tambahan kepada pilihan babel-loader

Gunakan komponen vue dalam projek bertindak balas

tidak

, jika anda tidak perlu menghuraikan fail .vue dan terus menggunakan sintaks objek pilihan komponen vue, maka tiada konfigurasi tambahan diperlukan

vue- pemuat . Jika anda perlu menyokong fail .vue , anda perlu mengkonfigurasi vue-loader

Artikel ini diterbitkan semula daripada: https://juejin.cn/post/7083303446161391623Pengarang: bigtreeUntuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila layari: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Bagaimana untuk menjalankan komponen vue dalam projek bertindak balas? Pengenalan kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!