Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to run vue components in a react project". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Let's first look at the implementation effect.

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

How to achieve it?

Realization principle

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

Wait until the componentDidMount phase and mount it.

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

Import Vue from 'vue/dist/vue.min.js' / / introduce the full version Otherwise, the vue component object syntax export default class App extends Component {constructor (props) {super (props)} componentDidMount () {const Foo = {template: `I am vue: {{aaa}} button` Data () {return {aaa: 2222}} new Vue ({render: h = > h (Foo),}). $mount ('# vueApp')} render () {return (currently within the react project and within the react project)}

Note:

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

The component option object of vue refers to:

Const Foo = {template: `I am vue: {{aaa}} Button`, data () {return {aaa: 2222} Premium Edition

The Premium version here refers to the need to support .vue files / components (demo above, which is directly a component option object, no .vue file)

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

Changed to introduce the .vue file: import Foo from ". / Foo.vue"

Import Vue from 'vue/dist/vue.min.js' / / introduces the full version, otherwise vue's component object syntax 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

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

Pay attention

It is recommended that when you test, do not use the scaffolding project of react, but use the react project of configuring webpack.config.js from scratch.

When I am currently using the latest version of scaffolding, I will report an error when I write in webpack.config.js after run eject, because VueLoaderPlugin is not compatible with an oneOf syntax.

If you don't have to parse the .vue file and use vue's component option object syntax directly, then you don't have to configure vue-loader

Summary

It is recommended that when you test, do not use the scaffolding project of react, but use the react project of configuring webpack.config.js from scratch.

If you don't have to parse the .vue file and use vue's component option object syntax directly, then you don't have to configure vue-loader

Finally, compare the configuration difference between using the react component in the vue project and using the vue component in the react project!

Is it necessary to configure loader for webpack.config.js? In the vue project to use the react component yes, you need to configure babel-loader, compile the .jsx file, you need to pay extra attention to the option option of babel-loader to use the vue component no in the react project, if you do not have to parse the .vue file, directly use the vue component option object syntax, then you do not need to configure vue-loader. If you need to support .vue files, you need to match vue-loader.

This is the end of the content of "how to run vue components in the react project". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.