tsx

安装配置

向军大叔每晚八点在 抖音 和 bilibli 直播

使用jsx　以可编程的方式构建组件模板。不过需要安装vite插件来支持jsx 语法

yarn add @vitejs/plugin-vue-jsx -D

在vite.config.js 中配置插件

import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
	plugins: [vueJsx()]
})

我们可以查看 @vitejs/plugin-vue-jsx 与 babel-plugin-jsx 学习细节的使用，babel-plugin-jsx插件不需要安装。

编写组件

可以使用 .tsx 、.vue 的方式开发组件。

tsx

首先介绍使用.jsx的扩展名组件，下面创建render.tsx文件，内容如下

export default defineComponent({
  setup() {
      return () => <div>houdunren.com</div>
  },
})

也可以直接导出函数

export default (props: any) => {
  return <div> houdunren </div>
}

vue

下面创建.vue 扩展名组件，这种方式可以在页面中定义css样式

<script lang="tsx">
export default {
  setup() {
    return () => <div>houdunren.com</div>
  },
}
</script>

<style lang="scss" scoped>
div {
  background-color: red;
}
</style>