【VUE3】vue3直接在script标签上定义组件的name值，使用vite插件 vite-plugin-vue-setup-extend

在Vue3中虽然 vite 会根据组件的文件名自动生成组件名，但是需要自定义的组件名时，就很不方便

以下有两种解决办法，个人推荐第二种，使用插件来进行简化，将name作为script标签的属性来设置组件名

 第一种方法：使用两个script标签，一个用于设置组件的name属性，一个用于编写setup中的代码

<script>
export default {
  name: "Children",
};
</script>

<script lang="ts" setup>
    let total = 20;
</script>

 第二种方法：使用 vite 插件 vite-plugin-vue-setup-extend

1. 安装setup-extend 

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

2. 在vite-config.ts中配置

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

 VueSetupExtend()

3. 在script标签上配置name

可以在script直接写自定义的组件名