简单记录一下把react内嵌到vue-cli项目的过程
-
添加
tsx的loader配置，使用babel-loader，添加@babel/prset-react与@babel/preset-typescript不使用
tsx的话，也要设置jsx的loader，用babel-loader，并添加@babel/preset-reactvue-cli中内置了对jsx的处理，不过那个编译后的结果为vue的render函数 -
添加
tsconfig.json配置文件，添加react-src目录作为react相关内容的根目录记得修改
tsconfig的ts文件目录配置、也可以配置#为react-src，在vue-cli中也需要配置 -
在
react-src中新建main.tsx与App.tsx，并在main.tsx中导出一个render函数，内容大概如下：
// ... 省略import代码
// 创建一个div元素作为react根元素
const rootElem = document.createElement('div');
ReactDOM.createRoot(rootElem).render(<App />);
// 渲染就是把rootElem放到container中
export default function render(container: HTMLDivElement) {
container.append(rootElem)
}
-
在
vue项目的合适位置增加一个div元素用于存放react根元素，给这个div元素一个设置key属性，然后使用这个元素作为参数去调用main.tsx中的render方法，这样就可以让vue中出现react渲染的内容 -
如果要使用
react-router-dom，则需要在vue中设置一个不带component属性的路由，如果vue中没有*匹配路由的话，应该也可以不设置，设置这个路由的目的是防止vue去渲染别的内容可以在路由上添加一个
showReact的meta数据，在vue组件中读取这个属性值后切换渲染vue内容与react内容这里需要注意的是，
vue与react中监听路由变化用的是popstate事件，它们各自推进路由变化所用的history.pushState方法并不会触发这个事件，所以需要分别监听vue与react中触发的路由变化，并调用window.loacion.replace方法替换一下当前链接，主要是为了触发popstate事件在
vue中可以通过watch $route来实现，在react中，可以在App.tsx中使用useEffect监听useLocation返回值的变化 -
在
react中常用到css module来实现类名不冲突，这个功能vue-cli已经自带了，但是其配置的类名不太好，可以手动设置一下，下面是vue.config.ts中的简单配置
// vue.config.ts
export default {
// ...省略其他内容
css: {
// 必须要设置
requireModuleExtension: true,
loaderOptions: {
css: {
modules: {
// 建议开发用`[path][name]__[local]`
// 建议生产用`[hash:base64]`
localIdentName: ''
}
}
}
}
}
- 大概就这个步骤吧，哈哈
