vue.js - vite怎么做到创建一个组件就能在网页中查看呢，不用在App.vue里引入使用才能显示到页面上？

Question

写一个组件还得在App.vue里面使用才能显示到页面上太麻烦了，直接创建一个组件文件夹就能在页面上查看了最方便

Answer 1

vite 有一个方法 import.meta.glob 可以导入多个模块，可以用它导入多个 vue 组件

// App.vue
<script setup lang="ts">
const modulesFiles = import.meta.glob('./views/test/*.vue', { eager: true,  }) // 导入 views/test 文件夹下所有的组件
</script>
<template>
<component v-for="(comp, path) in modulesFiles" :key="path" :is="comp.default" />
</template>

你也可以在 main.js 中引入然后注册成全局组件