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 --save

2.在.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 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} </script>

vue中使用jsx报错

本文只是在学习Vue 基础的一些笔记，文中的资料也会涉及到引用，具体出处不详，商业用途请谨慎转载。

本文来自博客园，作者： 只做你的向日葵 ，转载请注明原文链接： https://www.cnblogs.com/likme/p/15732045.html