Vue注册组件

task

把写在components/common下面的组件, 通过install和Vue.use的方法统一管理, 避免在每个页面引入并注册组件

action

参考文章:https://www.cnblogs.com/Mr-Rshare/p/11658786.html
实现思路, 在components/common文件夹下, 新建 config.js文件, 该文件实现的内容:

1. 通过require获取到当前文件夹下所有组件vue文件.
2. 通过toUpperCase()方法获取到同名的组件Name
3. 在myFunc函数中, 遍历所有组件. Vue.component(step2获取的组件name, step1获取的组件)

具体代码如下

import Vue from 'vue';

// 修改文件名首字母大写
function changeComponentName(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

// 获取当前文件夹下的的组件
// require.context 三个参数  第一个表示读取文件的路径  第二个表示是否遍历文件的子目录   第三个表示匹配的文件的正则
const requireComponent = require.context('.', false, /\.vue$/);

const myFunc = () => {
    requireComponent.keys().forEach(fileName => {
        const config = requireComponent(fileName);
        const componetName = changeComponentName(
            // 去掉开头 ./  以及后面.vue
            fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
        );
        Vue.component(componetName, config.default || config);
    })
}

export default myFunc

在main.js中引入该文件并Vue.use

import commonComponents from '@/components/common/config.js'

Vue.use(commonComponents)