前言

• Vue3组合式API中，在 Vue Devtools 中展示的 组件名字 就是 组件文件的文件名；

解决方法

• 常用的三种解决方法；
• 推荐第一种，很方便，后面两种看看就行了，了解一下就可以了；

✅ 使用 vite-plugin-vue-setup-extend 插件

• 安装插件 vite-plugin-vue-setup-extend，该插件的作用就是使 vue script setup 语法支持 name属性；
• 第一步：
  • 安装插件：yarn add vite-plugin-vue-setup-extend -D；
• 第二步：
  • 在 vite.config.js 中配置插件：

  import vueSetupExtend from `vite-plugin-vue-setup-extend`;
  export default defineConfig({
      plugins: [
          ...
          vueSetupExtend(),
          ...
      ],
      ...
  });
  

• 第三步：
  • 完成配置之后，便可以在 script 标签上指定 name属性；
  • 代码展示：

    <script setup name="Test">
        // 相关逻辑
    </script>
    

❌ 使用双 script

• 在原有的 script 标签的基础上新增加一个 script 标签，在这个新增加的标签内，默认导出一个对象，增加一个 name属性，属性值 为 组件的名字；
• 代码展示：

  <!-- 原有的标签 -->
  <script setup>
      import { defineComponent } from 'vue';
  </script>
  
  <!-- 新增加的标签 -->
  <script>
      export default defineComponent({
          name: '组件名字'
      })
  </script>
  

❌ 传统方式 - 选项式API

• 传统方式是使用 defineComonent()方法定义组件，通过对象形式设置 name属性 和 setup()函数传递给该方法；
• 代码展示：

  <script>
      import { defineComponent, ref } from 'vue';
      export default defineCOmponent({
          name: '组件名字',
          setup: () => ({
              const boolean = ref(true);
              return {
                  boolean
              };
          });
      });
  </script>