使用vite，在调式工具中展示组件的名字配置配置vite，让调试工具中展示组件名字的两种方式。方式一直接写在组件中，方

方式一：

<script>
    export default {
        name: 'Layout',
    }
</script>
<script lang="ts" setup name="Layout"></script>
<template>
    <div>顶部</div>
    <div>导航</div>
    <div>路由出口</div>
    <div>底部</div>
</template>

方式二： 步骤一：

yarn add vite-plugin-vue-setup-extend -D

步骤二：配置 vite.config.js

import vueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
    plugins: [vue(), vueSetupExtend()],
})

注意：作为路由组件适应时，script 标签内部要写点内容（注释也行），script name 才能生效