vue2中使用react组件
参考:https://blog.csdn.net/Claire_cz/article/details/125257392
按照https://blog.csdn.net/Claire_cz/article/details/125257392中配置后可能出现vue中的jsx无法使用。所以babel.config.js不需要改动,需要改动webpack的配置。
安装依赖
npm i @babel/preset-react react react-dom vuera @babel/plugin-transform-react-jsx
依赖版本
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.19.0",
"@babel/preset-react": "^7.18.6",
"antd": "^5.0.0",
"axios": "^0.27.2",
"core-js": "^3.8.3",
"element-ui": "^2.15.8",
"file-saver": "^2.0.5",
"html2canvas": "^1.4.1",
"js-base64": "^3.7.2",
"lib-flexible": "^0.3.2",
"mathpix-markdown-it": "^1.0.78",
"moment": "^2.29.4",
"node-polyfill-webpack-plugin": "^2.0.1",
"pinyin-match": "^1.2.2",
"postcss-plugin-px2rem": "^0.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"style-loader": "^3.3.1",
"video.js": "^7.20.3",
"vue": "^2.6.14",
"vue-audio-better": "^3.0.1",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.6.5",
"vue-video-player": "^5.0.2",
"vue2-editor": "^2.10.3",
"vuera": "^0.2.7",
"vuex": "^3.6.2",
"vuex-persistedstate": "^4.1.0",
"xlsx": "^0.18.5"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"css-loader": "^6.7.1",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14",
"webpack-cli": "^4.10.0"
},
main.js
import { VuePlugin } from 'vuera'
Vue.use(VuePlugin)
babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
],
}
vue.config.js
configureWebpack: {
//js 分块处理
output: { // 输出重构 打包编译后的 文件名称 【模块名称.时间戳】
path: path.resolve(__dirname, "dist"),
filename: `js/[name].${version}.js`
},
plugins: [new NodePolyfillPlugin()],
module: {
rules: [
{
test: /\.jsx$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
[
"@babel/preset-react",
{
pragma: "React.createElement",
}
]
],
plugins: [`@babel/plugin-transform-react-jsx`]
}
}
],
include: path.resolve(__dirname, 'src'),
exclude: path.resolve(__dirname, "node_modules/"),
}
]
}
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本