VueはJSX構文をサポートする

Vueのレンダリング関数はJSX構文をサポートしますが、次のような構成が必要です.
もっと素晴らしい

その他のテクニカルブログは、asing 1 elife’s blog

に移動してください.
公式サイト
レンダリング関数&JSX-Vue.js
プロジェクトへの依存関係の追加

まず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"]
}

以上の2点が完了するとVue for JSXの構文に従って作成できますが、コンパイラでエラーが発生する可能性があります.以下の変更が必要です.

スクリプトタイプをtype="text/jsx"

に

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