¿Cómo ejecutar componentes vue en un proyecto de reacción? Introducción al método

Cómo comenzar rápidamente con VUE3.0: los antecedentes para aprender

este artículo provienen de una entrevista. Me preguntaron si los componentes de Vue y React necesitan interoperar y reutilizarse, ¿cómo implementarlo de manera elegante?

Excepto que los desarrolladores transfieren manualmente el código. Actualmente, solo puedo pensar en dos soluciones:

• Solución 1: convertir el código de vue y el código de reacción (sincronización de la biblioteca de componentes).

• Solución 2: permitir que los componentes de vue se ejecuten directamente en el proyecto de React y viceversa.

Veamos primero la implementación.

El componente vue se procesó normalmente en reacción y también hice clic en el botón 3 veces . La respuesta y el renderizado de vue también fueron normales

.

El principio de implementación es

• introducir la versión completa de vue (si considera el rendimiento, puede introducirla bajo demanda)

• , esperar hasta la etapa componenteDidMount, montar <div id="vueApp" /> y luego

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

import Vue from 'vue/dist/vue.min.js' //Introduzca la versión completa; de lo contrario, la sintaxis del objeto componente de vue no se puede analizar export default class App extends Component {
  constructor(accesorios) {
    súper (accesorios)
  }
  
  componenteDidMount() {
    constante Foo = {
      plantilla: `
        <div>
          <h1>Soy vue: {{aaa}}</h1>
          <h1>Soy vue: {{aaa}}</h1>
          <h1>Soy vue: {{aaa}}</h1>
          <botón @click="aaa++">Botón</botón>
        </div>
      `,
      datos () {
        devolver {
          aaa: 2222
        }
      }
    }
    nuevaVue({
      renderizar: h => h(Foo),
    }).$mount('#vueApp')
  }

  prestar() {
    devolver (
      <div>
        <h1>Actualmente en el proyecto de reacción</h1>
        <h1>Actualmente en el proyecto de reacción</h1>
        Lo siguiente representará el componente vue <div id="vueApp" />
      </div>
    )
  }
}

Nota:

Si solo necesita admitir el objeto de opción de componente de Vue, entonces no necesita configurar el paquete web.

El objeto de opción de componente de Vue se refiere a:

const Foo = {. 
    plantilla: ` 
        <div> 
            <h1>Soy vue: {{aaa}}</h1>
            <h1>Soy vue: {{aaa}}</h1> 
            <h1>Soy vue: {{aaa}}</h1> 
            <botón @click="aaa++">Botón</botón> 
        </div> 
    `, 
    datos () { 
        devolver { 
            aaa: 2222 
        } 
    } 
}

Versión avanzada La

versión avanzada aquí se refiere a: necesidad de admitir archivos/componentes .vue (la demostración anterior es directamente el objeto de opción del componente, no hay ningún archivo .vue

Por ejemplo: (continúe usando la demostración anterior y cambie uno)

pocas líneas)

• para importar el archivo .vue: import Foo from "./Foo.vue";

import Vue from 'vue/dist/vue.min.js' //Introduzca la versión completa; de lo contrario, la sintaxis del objeto componente de vue no se puede analizar import Foo de "./ Foo.vue";
exportar clase predeterminada La aplicación extiende el componente {
  ...
  
  componenteDidMount() {
    nuevaVue({
      renderizar: h => h(Foo),
    }).$mount('#vueApp')
  }

  ...
}

Para que esto surta efecto, debe configurar el

• sitio web oficial de vue-loader: https://vue-loader.vuejs.org/guide/#manual-setup

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

módulo.exportaciones = {
  modo: 'desarrollo',
  módulo: {
    normas: [
      {
        prueba: /.vue$/,
        cargador: 'vue-loader'
      }
    ]
  },
  complementos: [
    // asegúrate de incluir el complemento para la magia
    nuevo VueLoaderPlugin()
  ]
}

Nota:

• Se recomienda que al realizar la prueba no utilice proyectos de scaffolding de reacción , sino proyectos de reacción que configuren webpack.config.js desde cero.

• Cuando uso la última versión de scaffolding, después de ejecutar eject, vaya a webpack.config. js Escribir en él informará un error porque VueLoaderPlugin no es compatible con la sintaxis oneOf.

• Si no necesita analizar el archivo .vue y usar directamente la sintaxis del objeto de opción del componente de vue, entonces no es necesario configurar vue-loader adicional.

En resumen,

• se recomienda no utilizar reaccionar durante las pruebas. Para un proyecto con scaffolding , utilice un proyecto de reacción que configure webpack.config.js desde cero

• si no necesita analizar el archivo .vue y utilizarlo directamente. Sintaxis del objeto de opción del componente, entonces no hay necesidad de configuración adicional de vue-loader.

Finalmente, a modo de comparación, los componentes de React del proyecto vue se usan en proyectos de reacción, y los componentes de vue se usan en proyectos de reacción.

Este artículo se reproduce de: https://juejin.cn/post/7083303446161391623

Autor: bigtree.