How to run vue components in react project? Method introduction

How to quickly get started with VUE3.0: The background to learning

this article came from an interview. I was asked, if vue and react components need to interoperate and reuse, how to implement it elegantly?

Except that developers manually transfer the code. Currently, I can think of only two solutions.

• Solution 1: Convert vue code and react code (component library synchronization).

• Solution 2: Directly let vue components run in the React project, and vice versa.

Let’s look at the implementation first

The vue component was rendered normally in react, and I also clicked the button 3 times . The response and render of vue were also normal .

How to achieve this?

The implementation principle is

• to introduce the full version of vue (if you consider performance, you can introduce it on demand)

• wait until the componentDidMount stage, mount <div id="vueApp" /> and then

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

import Vue from 'vue/dist/vue.min.js' //Introduce the complete version, otherwise vue's component object syntax cannot be parsed export default class App extends Component {
  constructor(props) {
    super(props)
  }
  
  componentDidMount() {
    const Foo = {
      template: `
        <div>
          <h1>I am vue: {{aaa}}</h1>
          <h1>I am vue: {{aaa}}</h1>
          <h1>I am vue: {{aaa}}</h1>
          <button @click="aaa++">Button</button>
        </div>
      `,
      data () {
        return {
          aaa: 2222
        }
      }
    }
    newVue({
      render: h => h(Foo),
    }).$mount('#vueApp')
  }

  render() {
    return (
      <div>
        <h1>Currently in the react project</h1>
        <h1>Currently in the react project</h1>
        The following will render the vue component <div id="vueApp" />
      </div>
    )
  }
}

Note:

If you only need to support vue's component option object, then you don't need to configure webpack.

Vue's component option object refers to:

const Foo = { 
    template: ` 
        <div> 
            <h1>I am vue: {{aaa}}</h1>
            <h1>I am vue: {{aaa}}</h1> 
            <h1>I am vue: {{aaa}}</h1> 
            <button @click="aaa++">Button</button> 
        </div> 
    `, 
    data () { 
        return { 
            aaa: 2222 
        } 
    } 
}

Advanced version The

advanced version here refers to: need to support .vue files/components (the demo above is directly the component option object, there is no .vue file).

For example: (continue to use the demo above and change a few lines)

• to Import .vue file: import Foo from "./Foo.vue";

import Vue from 'vue/dist/vue.min.js' //Introduce the full version, otherwise vue's component object syntax cannot be parsed import Foo from "./ Foo.vue";
export default class App extends Component {
  ...
  
  componentDidMount() {
    newVue({
      render: h => h(Foo),
    }).$mount('#vueApp')
  }

  ...
}

For this to take effect, you need to configure the vue-loader

• official website: https://vue-loader.vuejs.org/guide/#manual-setup

// In 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()
  ]
}

Note:

• It is recommended that when testing, do not use react scaffolding projects , but use react projects that configure webpack.config.js from scratch.

• When I use the latest version of scaffolding, after running eject, go to webpack.config.js Writing in it will report an error because VueLoaderPlugin is not compatible with a oneOf syntax.

• If you do not need to parse the .vue file and directly use vue's component option object syntax, then there is no need to configure additional vue-loader.

In summary,

• it is recommended that you do not use react when testing.

For

• a scaffolded project , use a react project that configures webpack.config.js from scratch.

• If you don’t need to parse the .vue file and directly use vue’s component option object syntax, then there is no need for additional configuration of vue-loader.

Finally, for comparison, the vue project React components are used in react projects, and vue components are used in react projects. The difference in configuration!

This article is reproduced from: https://juejin.cn/post/7083303446161391623

Author: bigtree