前端vue react,简述Vue组件使用的3个步骤?
如何在react项目中运行vue组件？以下文章通过实例介绍react项目中运行vue组件的方法，希望对你有所帮助！
本文背景来自采访，被问到，vue和react组件假如需要互通和复用，如何优雅的实现？。
除了开发人员手动转移代码。目前我能想到的解决办法只有两个。
方案1: vue代码和react代码相互转换(组件库同步)
选项2:直接让vue组件在React项目中运行，反之也可以。
【相关推荐：Redis视频教程，vuejs教程】
先看实现效果
vue组件在reat中渲染正常，我还有点击了按钮 3下，vue的响应和render也都正常。
具体如何实现？
实现原理
引入vue完整版(如果考虑性能，可以按需引入)
等到componentDidMount阶段，并挂载div id=vueApp/。
在新Vue(.).$mount(#vueApp )
从 vue/dist/vue . min . js //导入vue完整版，否则无法解析vue的组件对象语法。
导出默认类应用程序扩展组件{
施工员(道具){
超级(道具)
}
componentidmount(){
const Foo={
模板：` 1
差异
H1我是vue: {{aaa}}/h1
H1我是vue: {{aaa}}/h1
H1我是vue: {{aaa}}/h1
按钮@click=aaa 按钮/按钮
/div
`,
data () {
返回{
aaa: 2222
}
}
}
新Vue({
render: h=h(Foo)，
}).$mount(#vueApp )
}
render() {
返回(
差异
H1目前在react项目/h1中。
H1目前在react项目/h1中。
vue组件将在下面呈现。
div id=vueApp /
/div
)
}
}注意：
如果只需支持vue的组件选项对象的话，那么不用配置webpack，就完了
vue的组件选项对象是指：
const Foo={
模板：` 1
差异
H1我是vue: {{aaa}}/h1
H1我是vue: {{aaa}}/h1
H1我是vue: {{aaa}}/h1
按钮@click=aaa 按钮/按钮
/div
`,
data () {
返回{
aaa: 2222
}
}
}
高级版
这里的高级版是指：需要支持 .vue文件/组件（上面的demo，直接是组件选项对象，没有.vue文件）
比如：(继续用上面的演示，改几行)
改为导入。vue文件：从导入Foo。/foo . vue ；从 vue/dist/vue . min . js //导入vue完整版，否则无法解析vue的组件对象语法。
从导入Foo。/foo . vue ；
导出默认类应用程序扩展组件{
.
componentidmount(){
新Vue({
render: h=h(Foo)，
}).$mount(#vueApp )
}
.
}此时要想生效，需要配置vue-loader
https://vue-loader.vuejs.org/guide/#manual-setup//在webpack.config.js，官网
const { VueLoaderPlugin }=require( vue-loader )
模块.导出={
模式：“开发”，
模块：{
规则：[
{
测试：/。vue$/，
装载机：“vue装载机”
}
]
},
插件：[
//确保包含魔术插件
新VueLoaderPlugin()
]
}注意点
建议大家test的时候，不要用react的脚手架起的项目，从零开始配置webpack.config.js的react项目。
当我目前使用最新版本的scaffolding时，运行eject后，在webpack.config.js中写入会给出错误，因为VueLoaderPlugin与oneOf的语法不兼容。
如果不需要解析。vue文件，直接使用vue的组件选项对象语法，那么就不需要额外配置vue-loader了。
总结
建议大家test的时候，不要用react的脚手架起的项目，从头开始配置webpack.config.js的react项目。
如果不用解析.vue文件的话，直接用vue的组件选项对象语法的话，那么不用额外的配置vue-loader
最终在对比一下，vue项目中使用react组件，和， react项目中使用vue组件，配置上的区别！
有必要配置webpack.config.js的加载器吗？要在vue项目中使用react组件yes，需要配置babel-loader，编译.jsx文件，还需要额外注意babel-loader的选项。如果不需要解析。vue文件，可以直接使用vue的no语法。如果需要组件选项对象，需要配备vue-loader，了解更多编程知识。请访问：编程视频！这就是react项目中vue组件的运行方式。更多方法详情请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。