坚果大叔 坚果大叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 分享 › Vite自动全局注册组件!

Vite自动全局注册组件!

坚果大叔
2022-07-07 14:05:48分享阅读 3,341

因为在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')
vite
赞赏 赞(3)
本文系作者 @坚果大叔 原创发布在 坚果大叔。未经许可,禁止转载。
element-ui 控制台 『 Prop being mutated: "placement" 』的报错~
上一篇
二维数组数据动态组合
下一篇
在小程序中查看

评论已关闭

搜你想看的
聚合文章
Home
七夕呀
解决Ubuntu下Chrome中文字体混乱问题
二维码扫码登录是什么原理
闲言碎语
Memos
npm install 出现 Error:EISDIR:illegal operation on a directory 的错误提示!
2025-03-31 19:02:11
559 0 0
PC微信多开和防撤回~
2025-02-25 20:51:26
1,775 0 0
iphone 利用 Scriptable 添加网上国网电费小组件
2025-01-06 20:40:20
5,004 6 2
在博客中加上memos记录展示。
2024-12-25 23:41:27
2,333 5 2
3
  • 3
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2025 坚果大叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
317
文章
125
评论
365
喜欢