本篇内容介绍了“react项目中怎么运行vue组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
先看实现效果
vue组件在reat中正常渲染了，并且我还点击了按钮 3下，vue的响应和render也都正常
具体如何实现？
实现原理
引入vue的完整版（考虑性能的话，可以按需引入）
等到componentDidMount阶段，挂载好
<div id="vueApp" />后在
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>
<h2>我是vue : {{aaa}}</h2>
<h2>我是vue : {{aaa}}</h2>
<h2>我是vue : {{aaa}}</h2>
<button @click="aaa++">按钮</button>
</div>
`,
data () {
return {
aaa: 2222
}
}
}
new Vue({
render: h => h(Foo),
}).$mount('#vueApp')
}
render() {
return (
<div>
<h2>当前是react项目内</h2>
<h2>当前是react项目内</h2>
以下将渲染vue组件
<div id="vueApp" />
</div>
)
}
}注意：
如果只需支持vue的组件选项对象的话，那么不用配置webpack，就完了
vue的组件选项对象 指的是：
const Foo = {
template: `
<div>
<h2>我是vue : {{aaa}}</h2>
<h2>我是vue : {{aaa}}</h2>
<h2>我是vue : {{aaa}}</h2>
<button @click="aaa++">按钮</button>
</div>
`,
data () {
return {
aaa: 2222
}
}
}高级版
此处高级版指的是：需要支持 .vue文件/组件（上面的demo，直接是组件选项对象，没有.vue文件）
比如：（继续用上面的demo，改几行）
改成了引入.vue文件：
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')
}
...
}此时要想生效，需要配置vue-loader
官网：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()
]
}注意点
建议大家test的时候，不要用react的脚手架起的项目，用从零配置webpack.config.js的react项目
我当前用最新版的脚手架时，run 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的loader吗？ | |
|---|---|
| 在vue项目中使用react组件 | yes，需配置babel-loader，编译.jsx文件，需要额外注意配babel-loader的option选项 |
| 在react项目中使用vue组件 | no，如果不用解析.vue文件的话，直接用vue的组件选项对象语法的话，那么不用额外的配置vue-loader。需要支持.vue文件的话，需要配vue-loader |
“react项目中怎么运行vue组件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
