vue3在使用setup优雅定义name值

## 解决方法一 

> 个人觉得这种方法很 `Low`

```html
<script>
  export default {
  	name:'Logo'
  }
</script>
<script setup lang="ts">
  // code 
</script>
```

## 解决方法二

> 使用 vite 插件 `vite-plugin-vue-setup-extend` 很优雅

1. 安装插件

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

2. 配置`vite.config.js`文件


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

3. template 中使用

```html
<script lang="ts" setup name="demo">
// code
</script>

```

## 解决方法三

> 使用插件`unplugin-vue-define-options`

1. 安装插件

```bash 
npm i unplugin-vue-define-options -D
```
2. 配置

```js
//vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import DefineOptions from 'unplugin-vue-define-options/vite';

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

//vue.config.js 
configureWebpack: {
    plugins: [
      require('unplugin-vue-define-options/webpack')()
    ]
  }
```

3. 需要ts类型的可在tsconfig中进行如下配置（未使用ts的忽略此步骤）

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

```


4. template 中使用

```html
<script lang="ts" setup  >
  defineOptions({
    name: 'AppPagination'
  })
</script>
```

---

博客描述

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