How to run vue components in react project? Method introduction

reactHow to run the vue component in the project? The following article will introduce you to the method of running vue components in react projects through examples. I hope it will be helpful to you!

The background of this article comes from an interview. I was asked, If vue and react components need to interoperate and be reused, how can they be implemented elegantly?

Except that developers manually transfer the code. At present, I can think of only 2 solutions

• Solution 1: Vue code and react code mutual conversion (component library synchronization)

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

【Related recommendations: Redis video tutorial, vuejs tutorial】

Let’s first look at the implementation effect

The vue component was rendered normally in reat, and I alsoclicked the button 3 times,vue’s response and render are also normal

How to implement it specifically?

Implementation principle

• 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"></div>After that

• 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 id="我是vue-nbsp-nbsp-aaa">我是vue : {{aaa}}</h1>
          <h1 id="我是vue-nbsp-nbsp-aaa">我是vue : {{aaa}}</h1>
          <h1 id="我是vue-nbsp-nbsp-aaa">我是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 id="当前是react项目内">当前是react项目内</h1>
        <h1 id="当前是react项目内">当前是react项目内</h1>
        以下将渲染vue组件
        <div id="vueApp" />
      </div>
    )
  }
}

Note:

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

Vue's component option object refers to:

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

Advanced version

The advanced version here refers to: Requires support for .vue files/components (the demo above is directly the component option object, without .vue files)

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

• Changed to import the .vue file: 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')
  }

  ...
}

To take effect at this time, you need to configure vue-loader

• Official website: 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()
  ]
}

Notes

• ##Suggestions When you test, don’t use react scaffolded projects, use react projects that configure webpack.config.js from scratch

• I currently use In the latest version of scaffolding, after run eject, an error will be reported when writing in webpack.config.js because VueLoaderPlugin is not compatible with a oneOf syntax

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

Summary

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

• If you don’t need to parse For .vue files, if you directly use vue's component option object syntax, then there is no need to configure vue-loader

Finally, for comparison, use it in the vue project React components, and Vue components used in react projects, the difference in configuration!

Do I need to configure the loader of webpack.config.js? Using react components in vue projectsUse the vue component in the react project

	yes, you need to configure babel-loader ,Compile the .jsx file, you need to pay extra attention to the option option of babel-loader
	no, if you do not need to parse the .vue file and directly use vue's component option object syntax, then no additional configuration vue-loader is required. If you need to support .vue files, you need to configure vue-loader

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

Author: bigtree

For more programming-related knowledge, please visit:

Programming Video

! !

The above is the detailed content of How to run vue components in react project? Method introduction. For more information, please follow other related articles on the PHP Chinese website!