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封装全局注册弹窗组件,实现全局调用。
前言 很多网站都会有权限控制,比如一些博客网站的评论系统,必须要用户登录后才能发起评论,如果未登录想要评论,网站则会弹出登录弹窗。这个登录弹窗可以任何需要权限的地方弹出,所以这个弹窗组件我们就必须封装为共有的,共全局调用。
1444 0
|
10天前
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
19 1
|
13天前
|
JavaScript
vue 自动注册路由
vue 自动注册路由
18 1
|
20天前
|
JavaScript
Vue全局注册与局部注册异同点
Vue全局注册与局部注册异同点
21 6
Vue3组件,注册全局组件和局部组件
Vue3组件,注册全局组件和局部组件
|
2月前
|
JavaScript 开发工具 CDN
Vue2.0 -- 组件局部注册
Vue2.0 -- 组件局部注册
38 3
|
2月前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
23 0
|
9月前
|
JavaScript 编译器
50Vue - 组件的使用(全局注册)
50Vue - 组件的使用(全局注册)
53 0
|
2月前
|
JavaScript
描述 Vue 中的组件注册和全局/局部组件的区别。
描述 Vue 中的组件注册和全局/局部组件的区别。
49 0
|
2月前
|
JavaScript
Vue定义全局组件的三种方式
Vue定义全局组件的三种方式
28 0