Vue3自定义组件名字

在使用setup语法糖的时候没办法直接定义组件的名字，有两种解决方法

写两个script标签

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
//script1：用来定义name
export default defineComponent({
  name: '自定义name'
})
</script>

<script lang="ts" setup>
 //script2：用来定义setup语法糖
</script>

使用vite-plugin-vue-setup-extend

安装

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

配置vite.config.js

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

export default defineConfig({
  // 配置
    plugins: [vue(), VueSetupExtend()],
})

使用

<script lang="ts" setup name="自定义name">
// 使用vite-plugin-vue-setup-extend插件
</script>

https://blog.csdn.net/SunFlower914/article/details/126579209