tsx在vue3中的应用

# 步骤1

pnpm install @vitejs/plugin-vue-jsx

# 步骤2

babel.config.js文件中

module.exports = {
  plugins: ['@vue/babel-plugin-jsx'],
};

1
2
3

# 步骤3

tsconfig.json

{
  "compilerOptions": {
    "jsx": "preserve",
    "allowJs": true,
  },
}

1
2
3
4
5
6

# 具体使用

<script lang="tsx" setup>
  const columns = computed<TableColumnData[]>(() => [
    {
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      width: 200,
      render: (h) => {
        return (
          <a-space>
            <a-button
              size="small"
              type="dashed"
              onClick={() => add(h)}
            >
              新增
            </a-button>
            <a-button
              size="small"
              type="dashed"
              onClick={() => edit(h)}
            >
              修改
            </a-button>
          </a-space>
        );
      },
    },
  ]);
  </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

上次更新: 2024/11/04, 09:43:55

← 修改npm包 109video播放视频流→