Vue3.2 name怎么使用，方便使用vue浏览器插件

在使用 Vue3.2 的 setup 语法糖后，无法优雅的定义组件的 name 值，虽然 vite 会根据组件的文件名自动生成组件名，但是需要自定义的组件名时，就很不方便。

github链接

解决方法

方案1：写两个 script 标签

最简单的方法就是写两个script 标签，一个用 setup 语法，一个不用 setup 语法，代码如下：

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

<script setup>
    // do something...
</script>

这种方法简单，但确实不够优雅

方案2：使用 vite 插件 vite-plugin-vue-setup-extend

安装

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

配置 vite.config.ts

import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
  plugins: [ VueSetupExtend() ]
})

使用

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

问题：
在使用 vite-plugin-vue-setup-extend 0.4.0 及以前版本时，会有个问题：如果 script 标签内没有内容，即使给 script 标签添加上 name 属性，其在 vue-devtools 内也不会生效。

解决办法: 不要让script标签内空着，例如：加行注释。

<script lang="ts" setup name="demo">
// test
</script>