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

        <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中使用jsx报错

免责声明

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