Vite自动全局注册组件!
执行上下文
共 2084字,需浏览 5分钟
·
2022-07-24 12:45
戳上方“执行上下文”,选择“置顶公众号”
关键时刻,第一时间送达!
因为在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,
// 如果这个组件选项是通过 `export default` 导出的,
// 那么就会优先使用 `.default`,
// 否则回退到使用模块的根。
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')
福利专区
前端公众号和交流群
评论
consul-retryconsul 服务自动注册工具
consul服务自动注册主要解决两个问题:解决consul做作为注册中心时,有时注册不成功问题解决c
consul-retryconsul 服务自动注册工具
0
consul-retryconsul 服务自动注册工具
consul服务自动注册主要解决两个问题:解决consul做作为注册中心时,有时注册不成功问题解决consul重启时,服务无法自动重新注册问题使用简单,只需引入依赖即可
consul-retryconsul 服务自动注册工具
0
Horsey自动完成组件
Horsey是一个逐步发展的可定制化的自动完成组件。它有以下特点:小且专注自然键盘导航性能逐步增强广泛的浏览器支持模糊搜索支持<input>和<textarea>元素
Horsey自动完成组件
0
ImagePlayerViewiOS 自动轮播组件
UIScrollView实现自动轮播,可用于广告图片轮播。主要特色:支持autolayout支持UIPageControl及位置调整支持关闭自动轮播支持调整轮播速度支持点击事件仅支持iOS6
ImagePlayerViewiOS 自动轮播组件
0
jQuery-AutocomplejQuery 自动补全组件
Ajax Autocomplete for jQueryjQuery 的自动补全组件,支持 Ajax
jQuery-AutocomplejQuery 自动补全组件
0
HttpPostman自动路由组件
HttpPostman自动路由组件,提供http路由功能。支持一般请求和rest,支持自动发现接口服务,并自动路由。当服务接口不可用时能够自动移除不可用节点,且支持轮询,能够逐个访问所有节点,一直到成
HttpPostman自动路由组件
0