Como executar componentes vue no projeto react? Introdução ao método

Como começar rapidamente com o VUE3.0: A base para aprender

este artigo veio de uma entrevista que me perguntaram: se os componentes vue e react precisam interoperar e reutilizar, como implementá-los com elegância?

Exceto que os desenvolvedores transferem o código manualmente. Atualmente, só consigo pensar em duas soluções

• : Converter código vue e código de reação (sincronização da biblioteca de componentes).

• Solução 2: permitir que os componentes vue sejam executados diretamente no projeto React e vice-versa.

Vejamos primeiro a implementação

O componente vue foi renderizado normalmente no react, e também cliquei no botão 3 vezes . A resposta e a renderização do vue também foram normais

.

O princípio de implementação é

• introduzir a versão completa do vue (se você considerar o desempenho, você pode introduzi-lo sob demanda),

• esperar até o estágio componentDidMount, montar <div id="vueApp" /> e então

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

import Vue from 'vue/dist/vue.min.js' //Introduza a versão completa, caso contrário a sintaxe do objeto componente do vue não pode ser analisada export default class App extends Component {
  construtor(adereços) {
    super(adereços)
  }
  
  componenteDidMount() {
    const Foo = {
      modelo: `
        <div>
          <h1>Estou certo: {{aaa}}</h1>
          <h1>Estou certo: {{aaa}}</h1>
          <h1>Estou certo: {{aaa}}</h1>
          <button @click="aaa++">Botão</button>
        </div>
      `,
      dados () {
        retornar {
          aaa: 2222
        }
      }
    }
    novoVue({
      renderizar: h => h(Foo),
    }).$mount('#vueApp')
  }

  renderizar() {
    retornar (
      <div>
        <h1>Atualmente no projeto react</h1>
        <h1>Atualmente no projeto react</h1>
        O seguinte irá renderizar o componente vue <div id="vueApp" />
      </div>
    )
  }
}

Nota:

Se você só precisa oferecer suporte ao objeto de opção de componente do vue, então você não precisa configurar

o objeto de opção de componente do webpack refere-se a:

const Foo = {. 
    modelo: ` 
        <div> 
            <h1>Estou certo: {{aaa}}</h1>
            <h1>Estou certo: {{aaa}}</h1> 
            <h1>Estou certo: {{aaa}}</h1> 
            <button @click="aaa++">Botão</button> 
        </div> 
    `, 
    dados () { 
        retornar { 
            aaa: 2222 
        } 
    } 
}

Versão avançada A

versão avançada aqui se refere a: necessidade de suporte a arquivos/componentes .vue (a demonstração acima é diretamente o objeto de opção do componente, não há arquivo .vue

Por exemplo: (continue a usar a demonstração acima e altere um arquivo

algumas linhas)

• para importar o arquivo .vue: import Foo from "./Foo.vue";

import Vue from 'vue/dist/vue.min.js' //Introduza a versão completa, caso contrário a sintaxe do objeto componente do vue não pode ser analisada import Foo de "./ Foo.vue";
exportar classe padrão App estende componente {
  ...
  
  componenteDidMount() {
    novoVue({
      renderizar: h => h(Foo),
    }).$mount('#vueApp')
  }

  ...
}

Para que isso tenha efeito, você precisa configurar o

• site oficial do vue-loader: https://vue-loader.vuejs.org/guide/#manual-setup

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

módulo.exportações = {
  modo: 'desenvolvimento',
  módulo: {
    regras: [
      {
        teste: /.vue$/,
        carregador: 'vue-loader'
      }
    ]
  },
  plug-ins: [
    // certifique-se de incluir o plugin para a magia
    novo VueLoaderPlugin()
  ]
}

Nota:

• É recomendado que, ao testar, não use projetos de scaffolding react , mas use projetos react que configuram webpack.config.js do zero.

• Quando eu usar a versão mais recente do scaffolding, após executar eject, vá para webpack.config. js Escrever nele reportará um erro porque VueLoaderPlugin não é compatível com uma sintaxe oneOf.

• Se você não precisar analisar o arquivo .vue e usar diretamente a sintaxe do objeto de opção de componente do vue, não será necessário configurar o vue-loader adicional.

Em resumo,

• é recomendado que você não use react durante o teste. Para um projeto com scaffold , use um projeto react que configure webpack.config.js do zero.

• Se você não precisar analisar o arquivo .vue e usar diretamente o vue. sintaxe do objeto de opção de componente, então não há necessidade de configuração adicional do vue-loader.

Finalmente, para comparação, os componentes React do projeto vue são usados ​​​​em projetos react e os componentes vue são usados ​​​​em projetos react.

Este artigo foi reproduzido de: https://juejin.cn/post/7083303446161391623

Autor: bigtree.