Vue3 配置插件实现组件名称自定义_vite-plugin 定义组件

      部分项目中组件的名称需要的是类似若以那种，组件上级是文件夹，其次是一个Index.vue 这样项目中所有的组件都叫index.vue 所以有些操作不好完成，需要配置插件完成

vite-plugin-vue-setup-extend 这个插件可以让我们在 Vue 3 中使用更加简洁而优雅的语法来定义组件名称。（这也是B站中禹神讲过的插件）

安装 vite-plugin-vue-setup-extend

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

在 vite.config.js 文件中配置该插件

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

在 <script setup> 标签中使用 name 属性为组件定义名称

<script setup name="perSion">
import { ref } from 'vue'
 
const res= ref('Hello-world')
</script>
 
<template>
  <div>
    {{ res }}
  </div>
</template>