vue3中添加name属性

对于 vue@3.2.34 及以上版本，在使用 <script setup> 的单文件组件时，vue 会根据组件文件名，自动推导出 name 属性。也就是名为 MyHome.vue 或 my-home.vue 的文件的， name 属性为 MyHome，而当你在组件内显示定义 name 属性时，会覆盖推导出的名称。

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

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

稍显繁琐，对此社区推出了 unplugin-vue-define-options 来简化该操作。

使用步骤：

1. 安装

npm i unplugin-vue-define-options -D

2. 配置 vite

// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [Vue(), DefineOptions()],
})

3. 使用 typescript 开发的话，需要配置 typescript 支持

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-define-options/macros-global" /* ... */]
  }
}

安装配置完成后，就能使用其提供的 defineOptions API 来定义 name 属性。

<script setup lang="ts">
defineOptions({
  name: "Home"  
})
<script>

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

// 安装
npm i 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="Home">
</script>