给每个组件添加name属性，可以方便我们在调试工具中识别是哪个组件，当然只是其中一个好处，还有很多就不一一说了。

vue2中name属性,很方便：

<script>
  export default {
    name:'Home'
  }
</script>

vue3中name属性：

第一种方式，需要两个script标签：

<script lang="ts">
  export default {
    name: 'My',
  }
</script>
<script setup lang="ts"></script>

第二种方式，通过第三方插件 vite-plugin-vue-setup-extend-plus

// 安装
yarn add vite-plugin-vue-setup-extend-plus -D

// 在vite.config.ts引入
import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus'

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

在组件中使用：

<script setup lang="ts" name="My">
</script>