vue 如何引入jsx及实践过程中遇到的问题

作者: tww844475003 分类: 前端开发 发布时间: 2023-01-10 23:17

这里笔者是直接拿的一个 vue-cli 脚手架生成的一个工程

vue-cli 安装请参考官方文档

https://cli.vuejs.org/zh/guide/installation.html

安装 jsx 插件

npm @vue/babel-helper-vue-jsx-merge-props @vue/babel-preset-jsx -D

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    '@vue/babel-preset-jsx'
  ]
}

配置完成,下面来写一个基础的 jsx 语法组件

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  render() {
    return <div>hello {this.msg}</div>
  }
}
</script>
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <p>hello vue.js</p>
    <HelloWorldJSX msg="jsx component" />
  </div>
</template>

<script>
import HelloWorldJSX from '@/components/HelloWorldJSX.vue'

export default {
  name: 'App',
  components: {
    HelloWorldJSX
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

代码完成,运行试试,看上否能正常渲染。

Module parse failed: Identifier ‘h’ has already been declared (8:10)
File was processed with these loaders:

  • ./node_modules/babel-loader/lib/index.js
  • ./node_modules/@vue/vue-loader-v15/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | render() {
    | const h = arguments[0];
const h = arguments[0];

| return h(“div”, [“hello “, this.msg]);
| }

糟糕,居然报错了。

不要急,这样配置一下就正常了。

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      '@vue/babel-preset-jsx',
      {
        'injectH': false
      }
    ]
  ]
}
前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注