Vue支持JSX语法

Vue中的渲染函数可以支持JSX语法,但需要进行如下配置

官网

渲染函数 & JSX — Vue.js

为项目添加依赖

  1. 首先需要引入 babel-plugin-transform-vue-jsx 插件
    • 在::package.json::中的 devDependencies 加入如下配置
    • 插件官网中提到的 babel-preset-env 可能已经存在,所以未指出
1
2
3
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-helper-vue-jsx-merge-props": "^2.0.3",

在.babelrc中加入如下配置

  • transform-vue-jsx 是上述操作中导入的插件名称
1
2
3
4
5
6
7
8
9
{
  "presets": [
    ["env", {
      "modules": false
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime", "transform-vue-jsx"]
}

完成以上两点后即可按照Vue for JSX的语法进行编写,但编译器中可能会报错,需要做如下更改

  • <script/> 脚本类型改为 type="text/jsx"
1
2
3
<script type="text/jsx">
	...
</script>