卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
首页 › 分享 › Vite自动全局注册组件!

Vite自动全局注册组件!

坚果大叔
2022-07-07 14:05:48分享阅读 228

因为在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
赞赏 赞(2)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
element-ui 控制台 『 Prop being mutated: "placement" 』的报错~
上一篇
二维数组数据动态组合
下一篇
再想想
所有评论(1)
  • rantrism

    您好~我是腾讯云开发者社区的运营,关注了您分享的技术博客,觉得内容很棒,我们诚挚邀请您加入腾讯云自媒体分享计划。完整福利和申请地址请见:https://cloud.tencent.com/developer/support-plan 作者申请此计划后将作者的文章进行搬迁同步到社区的专栏下,你只需要简单填写一下表单申请即可,我们会给作者提供包括流量、云服务器等,另外还有些周边礼物。

    4周前 未知地区 回复
今日天气
摸鱼日历
摸鱼人日历
近期文章
  • 二维数组数据动态组合
  • Vite自动全局注册组件!
  • element-ui 控制台 『 Prop being mutated: "placement" 』的报错~
  • 猫🐱
  • Input 空格问题
归档
  • 2022年7月
  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年3月
  • 2018年2月
  • 2017年12月
  • 2017年11月
  • 2017年9月
二维数组数据动态组合
2022-07-28 10:50:47
146 0 0
element-ui 控制台 『 Prop being mutated: "placement" 』的报错~
2022-06-28 19:41:29
1,680 0 0
Input 空格问题
2022-06-22 10:52:44
243 0 1
Sort函数小Tips😁😃❤️😒😭😩😳
2022-06-20 15:09:29
198 0 0
1 2
  • 2
  • 1
博主

一枚佛系前端开发,会一丢丢摄影,喜欢折腾,爱好美食。分享点前端技巧、笔记以及各种有趣的APP和资源教程♥♥

友链
Lieme
公众号
西豆 崔欣 执行上下文 卖坚果的怪叔叔 集赞助手
Copyright © 2017-2022 卖坚果的怪叔叔. Designed by nicetheme.

苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
坚果大叔
201
文章
48
评论
121
喜欢