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

Vite自动全局注册组件!

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

因为在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" 』的报错~
上一篇
二维数组数据动态组合
下一篇

评论已关闭

今日天气
标签
CSS (16) Filter (2) Flex (2) Git (3) html (3) JavaScript (15) Jquery (2) JS (4) linux (2) localstorage (2) mac (1) map (2) mongoDB (1) python (3) set (2) vite (2) vue (9) websocket (1) wordpress (2) 二维码 (1) 傍晚 (2) 刷新页面 (1) 字符串 (5) 对象 (3) 小程序 (6) 年终 (1) 微信 (9) 微信机器人 (5) 总结 (1) 数据类型 (3) 数组 (5) 日常问题 (4) 服务器 (1) 朝阳 (1) 正则 (3) 生活 (6) 移动端 (2) 空地 (1) 组件 (1) 节流 (1) 记录 (3) 远方 (1) 防抖 (1) 验证码 (1) 高楼 (1)
近期文章
  • 一点
  • 微信小程序批量提交后台审核
  • 新年快乐🎉
  • Home
  • 随便转转!
归档
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 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月
  • 2012年12月
  • 2002年11月
微信小程序批量提交后台审核
2023-01-29 17:56:58
116 0 1
Home
2023-01-19 13:49:05
64 0 0
2022!充满魔幻的一年!
2022-12-31 21:09:51
142 0 0
新冠症状
2022-12-25 20:53:52
120 0 1
3
  • 3
博主

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

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

苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
# WordPress # # CSS #
坚果大叔
226
文章
59
评论
159
喜欢