简介

虽然vue render()函数创建HTML代码片段很灵活，但整段整段的JS配置代码，的确阅读性很差。为了让代码更简单，我们可以使用JSX，直接在JS代码中书写HTML：

  render: function (h) {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }

以上示例是不是看起来比较优雅，但为了支持JSX，需要通过一个JSX的Babel的插件。具体配置示例代码如下：

• package.json

devDependencies: {
    "babel-helper-vue-jsx-merge-props": "2.0.3",
    "babel-plugin-syntax-jsx": "6.18.0",
    "babel-plugin-transform-vue-jsx": "3.7.0"
}

• .babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}