Vue3 setup语法糖写法给组件添加name属性

其实在vue3 setup语法糖写法下有多种方式添加name属性。比如：

1. 新增一个script标签，在这个script标签定义一个name属性；
2. 使用 unplugin-vue-define-option 插件；
3. 使用 vite-plugin-vue-setup-extend 插件；

我个人比较喜欢第三种,用法如下：

• 安装插件: npm install vite-plugin-vue-setup-extend -D
• 集成插件: 在vite.config.ts文件引入vite-plugin-vue-setup-extend

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'

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

• .vue(SFC)单文件组件添加name属性

<script setup lang="ts" name="userInfo">

</script>

<template>
  <div></div>
</template>

<style lang="less" scoped>
</style>