Home >Web Front-end >JS Tutorial >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
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>我是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('#vueApp') } render() { return ( <div> <h1>当前是react项目内</h1> <h1>当前是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>我是vue : {{aaa}}</h1> <h1>我是vue : {{aaa}}</h1> <h1>我是vue : {{aaa}}</h1> <button @click="aaa++">按钮</button> </div> `, data () { return { aaa: 2222 } } }
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)
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
// 在 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
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!
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 |
Programming VideoAuthor: bigtree
For more programming-related knowledge, please visit:
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!