只需三步，Vue3 组件名称自定义轻松搞定！

vite-plugin-vue-setup-extend 这个插件可以让我们在 Vue 3 中使用更加简洁而优雅的语法来定义组件名称。

1. 安装 vite-plugin-vue-setup-extend

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

2. 在 vite.config.js 文件中配置该插件。

// vite.config.js
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default {
  plugins: [VueSetupExtend()]
}

3. 在 <script setup> 标签中使用 name 属性为组件定义名称

<script setup name="CustomComponentName">
import { ref } from 'vue'

const someData = ref('Hello, Vue 3!')
</script>

<template>
  <div>
    {{ someData }}
  </div>
</template>

通过这种方式，Vue 组件名称将被定义为 CustomComponentName。