vue项目组件全局自动注册

最新推荐文章于 2024-07-09 09:42:46 发布

毛毛虫爱吃草

最新推荐文章于 2024-07-09 09:42:46 发布

阅读量186

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/mao6666spirit/article/details/129798987

版权

该代码段展示了如何使用require.context在Vue.js项目中将复用率高的组件封装到公共文件，并自动注册为全局组件。通过指定文件目录、查找规则，可以遍历并加载所有.vue文件，然后在Vue实例上注册这些组件。

摘要由CSDN通过智能技术生成

把复用次数多的固定逻辑的组件封装到一个固定的公共文件当中,然后引入到该方法中,实现全局自动注册(我用的就是引入的components下的common公共组件)

/**
 * @function - 自动注册全局组件，组件写好后自动注册
 * @param {string} fileName - 文件目录，会根据这个路径进行查找
 * @param {bool} isfindSon - 是否查找子集
 * @param {reg} searchRule - 查找规则
 */
const requireComponent = require.context('./components/common', true, /\.vue$/)
const install = Vue => {
    // 如果组件被注册就返回,没有就注册
    if (install.installed) return
    install.installed = true
    requireComponent.keys().forEach(filename => {
        // filename 每个遍历出来的文件
        // 第i个组件
        const config = requireComponent(filename) // 组件名
        const componentName = config.default.name // 循环注册组件
        Vue.component(componentName, config.default || config)
    })
}

// 默认暴露
export default {
    install
}