Vue3中Setup使用Vite的插件指定组件名字

在正常使用Vue3中要想指定组件名字需要如下操作，非常繁琐

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

<script setup lang="ts">
    console.log("这里是语法糖")
</script>

我们使用vite中的插件可以简化这一繁琐步骤

打开终端，在终端输入

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

然后找到vite.config.ts 文件

加入

import VueSetupExtend from 'vite-plugin-vue-setup-extend'
   
VueSetupExtend(),

然后回到组件中就可以直接在script后边写name属性了

<script setup lang="ts" name="App">
    console.log("这里是语法糖")
</script>