vue3 tsx语法如何构建项目

要在 Vue 3 中使用 TSX 语法构建项目，可以按照以下步骤进行设置：

1. 创建一个新的 Vue 3 项目：

vue create my-project

在创建项目时，选择配置预设，并选择 TypeScript 作为语言。

2. 安装 `@vue/babel-preset-jsx`：

npm install --save-dev @vue/babel-preset-jsx

3. 在项目根目录下创建一个 `.babelrc` 文件，并添加以下内容：

{
  "presets": [
    "@vue/babel-preset-jsx"
  ]
}

4. 创建一个 `.tsx` 文件，例如 `App.tsx`，并在其中使用 TSX 语法编写组件：

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    return () => (
      <div>
        <h1>{props.msg}</h1>
      </div>
    );
  },
});

5. 在主入口文件 `main.ts` 中使用 `.tsx` 文件：

import { createApp } from 'vue';
import App from './App';

createApp(App, {
  msg: 'Hello Vue 3 with TSX',
}).mount('#app');

6. 运行项目：

npm run serve

这样，你就可以使用 TSX 语法来构建 Vue 3 项目了。你可以在 `.tsx` 文件中编写组件，并在主入口文件中使用它们。需要注意的是，Vue 3 中的 `defineComponent` 函数用于定义组件，并且使用 `setup` 函数来设置组件的逻辑。