日常开发中可能会遇到在 vue 中使用 react 组件的需求, 那么怎么在 vue 中使用 react 组件呢? 本篇文章将为你介绍.
Vue 中引用 React 组件的步骤:
1, 安装依赖
- NPM i -S vuera
- NPM install --save react react-dom
2, 编辑 main.JS:
- import {
- VuePlugin
- } from 'vuera'
- Vue.use(VuePlugin)
3, 加入需要引用的 react 组件 (相关课程推荐: vue.js 教程 https://www.html.cn/jskuangjia/vue/ )
import MyReactComponent from './MyReactComponent'
4, 编辑 webpack.base.conf.JS, 加入对 jsx 的支持
test: /\.(JS|jsx)(\?.*)?$/
5, 在. babelrc 文件中, 用 transform-react-jsx 替换 transform-vue-jsx
NPM install --save-dev babel-plugin-transform-react-jsx
.babelrc 文件
"plugins": ["transform-react-jsx"]
至此, 我们便完成了在 vue 项目中引入 react 组件的目的
本文来自 Vue.JS 答疑 https://www.html.cn/qa/vue-js/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/vue-js/16080.html