ts中定义组件名字

方法一：定义组件的名字,，没有安装下面的插件，不可以将组件名字定义到setup与lang='ts'中

<script lang="ts">
export default {
  name: 'Person234'
}
</script>

<script setup lang="ts">
import { ref } from 'vue'

const userName = ref('张三')
</script>

<template>
  <h1>{{ userName }}</h1>
</template>

方法二：安装插件

npm i vite-plugin-vue-setup-extend -D

修改配置文件vite.config.ts，引用该新安装的插件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), VueSetupExtend()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

定义组件名字

<script setup lang="ts" name="Person234">
import { ref } from 'vue'

const userName = ref('张三')
</script>

<template>
  <h1>{{ userName }}</h1>
</template>

然后重启项目，重新打开，可以在谷歌安装vue.js插件查看组件名字是否修改成功