同级目录页面快捷引入(webpack require.context)

// 动态引入
// webpack require.context
// 1.目标文件
// 2.是否匹配子目录
// 3.匹配什么类型的文件
import Vue from 'vue'
function changeStr(str){
    return str.charAt(0).toUpperCase()+str.slice(1)
}
const requireComponent =require.context('.',false,/\.vue$/)
requireComponent.keys().forEach(fileName=>{
    const config=requireComponent(fileName)
    const componentName = changeStr(
        fileName.replace(/^\.\//,'')
        .replace(/\.\w+$/,''))
    Vue.component(componentName,config.default||config)
})

在main.js中引入

import global from './components/global'

页面中直接引入

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <child1 />
    <child1 />
   </div>
   </template>