Vue项目中使用React组件(antd组件库也可以),React中使用Vue组件
在Vue项目中使用React组件(antd组件库也可以),在React中使用Vue组件下面我写个demo教大家如何在Vue组件库中使用React组件甚至antd组件触类旁通,在React中使用Vue组件,自行解决,锻炼自己使用vue-cli创建项目这个大家应该都会,不会的话看下Vue-Cli脚手架(Vue全家桶之一详解)下载依赖下载Reactnpm install --save react rea
·
在Vue项目中使用React组件(antd组件库也可以),在React中使用Vue组件
- 下面我写个demo教大家如何在Vue组件库中使用React组件甚至antd组件
- 触类旁通,在React中使用Vue组件,自行解决.
- 不推荐企业级项目中使用。
使用vue-cli创建项目
- 这个大家应该都会,不会的话看下
下载依赖
- 下载React
- npm install --save react react-dom
- 自行下载React相关组件库
- 下载vuera,这样就可以在Vue项目中使用React组件(antd组件库也可以),在React中使用Vue组件
- npm i -S vuera
- https://www.npmjs.com/package/vuera
- https://github.com/akxcv/vuera
- npm i -S vuera
- 下载识别react-jsx语法的依赖
- npm install @babel/plugin-transform-react-jsx //识别 jsx 语法
- npm install @vue/cli-plugin-babel
- 如果package.json没有@vue/cli-plugin-babel再下
- //解决You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. -》 <\div className=“App”>
配置
- main.js文件
import { VuePlugin } from "vuera"; Vue.use(VuePlugin);
- .babelrc文件
{ "plugins": ["@babel/transform-react-jsx"] }
- babel.config.js
module.exports = { plugins: ["@babel/plugin-transform-react-jsx"] };
- vue.config.js文件
- css module
- requireModuleExtension: true//react的css,采用style-module,然后需要开启
- css module
项目中的使用
- MyReactComponent.js文件
import React from "react"; import Mode from "./mode.js";//react 组件 import Header from "./header.js";//react 组件 import "../assets/style/reset.css"; import "./App.css"; export default () => { return ( <div className="App"> <Header></Header> <div className="c_mode"> <Mode></Mode> </div> </div> ); };
- HelloWorld.vue
<template> <div class="hello"> <my-react-component @sendValue="sendValue"/> </div> </template> <script> import MyReactComponent from "./MyReactComponent.js"; export default { name: "HelloWorld", props: { msg: String, }, components: { "my-react-component": MyReactComponent }, methods: { sendValue(value) { console.log(value, "3"); }, }, }; </script>
更多推荐
已为社区贡献7条内容
所有评论(0)