卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 工具箱
  • 关于
  • 3

Vite自动全局注册组件!

坚果大叔
2022-07-07 14:05:48

文章目录[隐藏]

  • Webpack注册全局组件的方式
  • Vite注册全局组件的方式
    • 在main.js文件中import并use

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

评论已关闭

坚果大叔

255
文章
66
评论
207
喜欢

近期文章

  • instanceof和typeof的区别
  • 嗖嗖嗖
  • 镜头下的一点记录!
  • React实现打字机效果~
  • 一晃又周三了

猜你喜欢

instanceof和typeof的区别

2023-09-26 17:20:33
56 0 0

React实现打字机效果~

2023-08-22 17:31:49
300 0 1

Mac更换node版本切换工具n模块的镜像源

2023-07-13 13:21:45
279 2 2

Md5引发的血案

2023-07-03 16:45:00
412 0 1
3

博主

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

友链

Lieme

公众号

坚果大叔 执行上下文 卖坚果的怪叔叔
Copyright © 2017-2023 卖坚果的怪叔叔. Designed by nicetheme.

萌ICP备20230818号 苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 工具箱
  • 关于

搜索

  • 微信机器人
  • CSS
  • js
  • git

坚果大叔

255
文章
66
评论
207
喜欢