广州市企业网站建设平台_抖音推广方案和推广方式_网站域名查询地址_怎样做seo搜索引擎优化

Glob 导入

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块：

const modules = import.meta.glob('./dir/*.js')

以上将会被转译为下面的样子：

// vite 生成的代码
const modules = {'./dir/foo.js': () => import('./dir/foo.js'),'./dir/bar.js': () => import('./dir/bar.js')
}

可以遍历 modules 对象的 key 值来访问相应的模块：

for (const path in modules) {modules[path]().then((mod) => {console.log(path, mod)})
}

匹配到的文件默认是懒加载的，通过动态导入实现，并会在构建时分离为独立的 chunk。

更多 Glob 导入方式，点击传送门 Go…

Glob 完成组件的引入与注册

components目录结构

baseSelect/index.vue
index.ts

在components目录下 index.ts

import {type App} from 'vue'
import { defineAsyncComponent, type AsyncComponentLoader } from "vue";
// 导入当前目录下所有.vue后缀文件 或者 子级目录下的.vue文件
const componentss = import.meta.glob("./**/*.vue");
/*** 全局组件引用管理*/
export default {install(app: App) {for (let [key, value] of Object.entries(componentss)) {// 字符串截取，作用于注册组件使用的组件名称let name = key.slice(key.indexOf('/') + 1, key.lastIndexOf("/"));// 注册组件app.component(name, defineAsyncComponent(value as AsyncComponentLoader));}      }
}

在main.ts 内直接引入并注册

// 引入ts文件对应的全局注册的组件的配置
import components  from './pages/components'

在全局使用组件

<base-select  v-model="downAction" @change="downChangeFun" />

如有帮助，请留下你的脚印，点个赞，收藏一下哈。欢迎留言交流。