部分项目中组件的名称需要的是类似若以那种,组件上级是文件夹,其次是一个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>