Vue支持JSX语法

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

更多精彩

官网

渲染函数 & 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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容