vue中使用JSX报错，如何解决
2024-10-16 07:56:04
Support for the experimental syntax 'jsx' isn't currently enabled (32:12):
30 | },
31 | render() {
> 32 | return <><div class="title">八皇后问题</div></>
| ^
33 | }
34 | };
35 |
Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.从上面报错可以看出需要在项目中.babelrc 配置文件添加@vue/babel-preset-jsx
1.下载依赖包
Install the dependencies:
# for yarn:
yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
# for npm:
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save2.在.babelrc文件中添加@vue/babel-preset-jsx
{
"presets": ["@vue/babel-preset-jsx"]
}3.jsx代码模板
<script>
const grids = new Array(8).fill(1).map((_, r) => {
return new Array(8).fill(1).map((_, c) => {
return {
key: `key-${r * 8 + c}`,
ok: true
}
})
})
export default {
render() {
return (
<div>
<div class='title'>八皇后问题</div>
<div class='grid'>
{grids.map((row, i) => {
return (
<div class='row' key={i}>
{row.map((cell) => {
return (
<div class='cell' key={cell.key}>
{cell.ok ? <div>Q</div> : null}
</div>
)
})}
</div>
)
})}
</div>
</div>
)
}
}
</script>参考
免责声明
本文只是在学习Vue 基础的一些笔记，文中的资料也会涉及到引用，具体出处不详，商业用途请谨慎转载。
最新文章
- 如何把select默认的小三角替换成自己的图片
- [大数据之Spark]——快速入门
- matlab linux 安装
- 针对Xcode的警告忽略消除处理
- [问题2015S03] 复旦高等代数 II（14级）每周一题（第四教学周）
- JAVA·多线程：线程优先级
- PetaPoco使用要点
- js学习笔记之：数组（二）
- mysql 查询每个分组前N条记录
- 从零开始用 Flask 搭建一个网站（一）
- STL容器的reserve()函数和resize()函数解析
- 缓冲区 subprocess 黏包 黏包的解决方案
- JS事件基础
- 安装ORACLE高可用RAC集群11g校验集群安装的可行性输出信息
- git 查看/修改用户名、密码
- 多线程操作的方法（sleep,）setPriority(Thread.MIN_PRIORITY);yield();
- Centos7系统下修改主机名操作笔记
- 推荐系统之协同过滤的原理及C++实现
- 简单了解一下php的迭代生成器yield
- Jmeter（十三）Debug Sampler