Vue支持JSX语法

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

更多精彩

• 更多技术博客，请移步 asing1elife’s blog

官网

渲染函数 & JSX — Vue.js

为项目添加依赖

1. 首先需要引入 babel-plugin-transform-vue-jsx 插件
   • 在::package.json::中的 devDependencies 加入如下配置
   • 插件官网中提到的 babel-preset-env 可能已经存在，所以未指出

"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 是上述操作中导入的插件名称

{
  "presets": [
    ["env", {
      "modules": false
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime", "transform-vue-jsx"]
}

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

• 将 <script/> 脚本类型改为 type="text/jsx"

<script type="text/jsx">
	...
</script>