Vite自动全局注册组件!

简介: Vite自动全局注册组件!

因为在Vite中不能使用webpack的require.context()方式来读取文件所以之前使用webpack注册全局组件的方式就不能使用了。

Webpack注册全局组件的方式

import Vue from 'vue'
const requireComponent = require.context(
// 其组件目录的相对路径
'./',
// 是否查询其子目录
false,
// 匹配基础组件文件名的正则表达式
  /[A-Z]\w+\.(vue|js)$/,
)
requireComponent.keys().forEach((fileName) => {
// 获取组件配置
const componentConfig = requireComponent(fileName)
// 获取组件的 PascalCase 命名
const componentName = upperFirst(
    camelCase(
// 获取和目录深度无关的文件名
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, ''),
    ),
  )
// 全局注册组件
  Vue.component(
    componentName,
// 如果这个组件选项是通过 <code>export default</code> 导出的,
// 那么就会优先使用 <code>.default</code>,
// 否则回退到使用模块的根。
    componentConfig.default || componentConfig,
  )
})

Vite注册全局组件的方式

1、import.meta.glob()
2、import.meta.globEager()
// 这里根据实际情况设置路径
const components = import.meta.glob('./组件目录名/*/*.vue')
export default function install (app) {
for (const [key, value] of Object.entries(components)) {
const name = key.split('/')[1] 
    app.component(name, defineAsyncComponent(value))
  }
}

在main.js文件中import并use

# main.js
import { createApp } from 'vue'
import App from './App.vue'
import components from './components/index.js'
createApp(App).use(components).mount('#app')
相关文章
|
JavaScript 数据安全/隐私保护
Vue封装全局注册弹窗组件,实现全局调用。
前言 很多网站都会有权限控制,比如一些博客网站的评论系统,必须要用户登录后才能发起评论,如果未登录想要评论,网站则会弹出登录弹窗。这个登录弹窗可以任何需要权限的地方弹出,所以这个弹窗组件我们就必须封装为共有的,共全局调用。
1476 0
|
18天前
|
监控 数据可视化 索引
四个组件配置说明
官方文档!!!!!!!!! 1.在Filebeat中配置info.log日志文件的路径,以及要将日志发送到Logstash的地址和端口,可以在Filebeat的配置文件 filebeat.yml中添加如下配置: Copy filebeat.inputs: - type: log paths: - /usr/logs/info.log fields: log_type: info output.logstash: hosts: ["localhost:5044"] 这里使用filebeat.inputs指定要监控的日志文件路径
38 5
|
4天前
如何在 Vue3 项目配置全局方法
本文介绍了在Vue3项目中配置全局方法的几种方式,包括如何将Moment.js日期处理类库和字符串颜色值生成方法设置为全局可访问的属性。
10 0
|
1月前
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
47 1
|
1月前
|
JavaScript
vue 自动注册路由
vue 自动注册路由
23 1
|
2月前
|
JavaScript
Vue全局注册与局部注册异同点
Vue全局注册与局部注册异同点
26 6
Vue3组件,注册全局组件和局部组件
Vue3组件,注册全局组件和局部组件
|
3月前
|
JavaScript
【vue】如何抽取公共组件并全局注册
【vue】如何抽取公共组件并全局注册
28 1
|
3月前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
28 0
|
10月前
|
JavaScript 编译器
50Vue - 组件的使用(全局注册)
50Vue - 组件的使用(全局注册)
58 0