vue3.2中setup的方法 如何定义组件名称

最近一些小伙伴，私聊小编vue3.2x如何给组件命名，搞过vue2x的以及vue3.2之前的版本小伙伴，对组件命名应该是 不太重视 (用的不多)，但是到了vue3.2之后，没有之前命名那么方便了，一到用组件名称时才发现自己不会了，本文旨在介绍vue3.2x的组件命名方法，欢迎小伙伴提出建议。

先看下组件代码，这是我们最熟悉的3.2x之后的写法

<script lang="ts" setup>
  // ...代码块
</script>

首先介绍一下，比较常规的方法

新增一个script 标签，也就是3.0-3.2 使用的命名方式

<template>
    <button>demo</button>
</template>

<script lang="ts">
export default {
    name: "TButton",
};
</script>

<script lang="ts" setup>
</script>
<style scoped lang="less"></style>

上面代码执行之后，组件命名成功了，是不是很神奇？下面这种方式，可能是以后用的比较多的，需要安装一个依赖。

使用 “unplugin-vue-define-options”依赖命名组件

第一步：安装，安装的方式很常规，就是npm的安装

npm install unplugin-vue-define-options -D

第二步：集成，找到vite.config.ts文件，加入插件unplugin-vue-define-options（由于我是使用了vite作为配置工具，那么这里就演示vite中的用法）

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

import DefineOptions from 'unplugin-vue-define-options/vite';

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

第三步：集成完成之后，那么可以直接使用了，如果在TypeScript中报错了，那么调整一下就行了，比如在d.ts的配置文件中加入描述

<template>
  <button> </button>
</template>

<script lang="ts" setup>
  defineOptions({
    name: 'TButton',
  });
</script>

<style scoped></style>

上面的两种方式，是关于3.2x以后的版本的组件命名方法，不足的地方，希望各位小伙伴多多指点喔！