Vue3 组件命名

最简单的方式

无须引入插件，可直接命名（缺点，可能就是丑了）

// 组件命名
defineOptions({name: 'Menu'})

优雅的命名方式

安装 vite-plugin-vue-setup-extend 插件

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

vite-plugin-vue-setup-extend 插件的作用

vite-plugin-vue-setup-extend 是一个 Vite 插件，它允许你在 <script setup> 语法中使用 name 属性以及其他一些特性。这个插件的主要功能包括：

1. 支持在 <script setup> 中使用 name 属性：这使得你可以像在传统的 <script> 标签中那样，在 <script setup> 标签内定义组件的名字。

2. 支持在 <script setup> 中使用 inheritAttrs：这允许你控制组件是否继承父组件传递过来的未声明的属性。

3. 支持在 <script setup> 中使用 defineEmits 和 defineProps：这使得你可以在 <script setup> 中更灵活地定义组件的 props 和 emits。

配置 Vite：

在 vite.config.js 文件中添加以下代码：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// 主要是这一行
import vueSetupExtend from 'vite-plugin-vue-setup-extend';

export default defineConfig({
  // 还有这一行
  plugins: [vue(), vueSetupExtend()],
});

使用示例

现在你可以使用 <script setup> 中的 name 属性了：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script setup name="MyComponent">
import { ref } from 'vue';

const message = ref('Hello, Vue!');
</script>

注意事项

• 确保你的项目使用的是 Vue 3。
• 确保你的 Vite 版本足够新，以支持这个插件。
• 如果你使用的是 Vue CLI 创建的项目，通常不需要安装这个插件，因为 Vue CLI 通常已经支持 <script setup> 语法。