vue项目优化-通用组件

在做项目过程中，通常会用到很多通用组件，为了方便维护通常会把通用的组件放在一个文件夹(components)里

image.png

然后定义一个js来全局引用：

// component.js
import Vue from 'vue'

import Child1 from '@/components/child1.vue'
import Child2 from '@/components/child2.vue'

Vue.component('Child1',Child1)
Vue.component('Child2',Child2)

要是几个组件这样做还可以，要是组件一多起来，几十个，那每个都要import和Vue.component就会变得很麻烦。
这时候就要对代码进行优化，require.context起到关键作用，新建一个global.js放在components文件夹里，与通用组件同级：

image.png

// global.js
import Vue from 'vue'

function strFirstCharUpper(str) {
    // 组件名首字母大写
    return str.charAt(0).toUpperCase() + str.slice(1)
}

// require.context函数接受三个参数

// directory {String} -读取文件的路径

// useSubdirectories {Boolean} -是否遍历文件的子目录

// regExp {RegExp} -匹配文件的正则

// 语法: require.context(directory, useSubdirectories = false, regExp = /^.//);
const requireComponent = require.context('.', false, /\.vue$/)

//通过keys()来取到匹配的文件的路径数组
console.log(requireComponent.keys()) // ['./child1.vue','./child2.vue']

requireComponent.keys().forEach(fileName => {
    console.log(fileName)
                        
    // 拿到对应的组件配置
    const config = requireComponent(fileName)

    const componentName = strFirstCharUpper(
        fileName.replace(/^\.\//,'').replace(/\.\w+$/,'')
    )

    // config.default 组件文件以对象方式返回
    Vue.component(componentName, config.default || config)
});

然后在main.js里面引用global.js

// main.js
import './components/global.js'

这样子写就不用一个一个的引入、组件引用了

(以上是我自己的一个总结，要是有写的不好的或者错误的可以前来指正，谢谢)