高频使用组件全局导入

我们先在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);

 

组件内即可直接使用。