高频使用组件全局导入

本文介绍了一种在Vue项目中批量引入高频使用的组件的方法。通过在components文件夹下创建global.js文件,利用require.context动态加载所有.vue组件,并在main.js中进行全局注册,简化了组件的引用过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们先在components文件夹(这里面都是些高频组件)添加一个叫global.js的文件,在这个文件里使用require.context 动态将需要的高频组件统统打包进来,然后在main.js文件中引入global.js的文件。

global.js内容

import Vue from 'vue'

function changeStr(str) {

    return str.charAt(0).toUpperCase() + str.slice(1)

}

const requireComponent = require.context('../components/', false, /\.vue$/) // 可修改文件的路径位置

// 查找同级目录下以vue结尾的组件

const install = () => {

    console.log(requireComponent, 'requireComponent');

    requireComponent.keys().forEach(fileName => {

        let config = requireComponent(fileName)

        // console.log(config) // ./child1.vue 然后用正则拿到child1

        let componentName = changeStr(

            fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')

        )

        Vue.component(componentName, config.default || config)

    })

}

export default {

    install // 对外暴露install方法

}

 

main.js内容

import global from './utils/global'; // 组件全局使用

Vue.use(global);

 

组件内即可直接使用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值