Vue进阶 - 批量注册全局组件

全局组件全部放到一个目录下批量注册，然后在main.js中引入JS执行
页面中直接使用即可，无需再次重复的引入

全局.js文件管理全局组件

QQ截图20200520211111.png

动态注册该目录下的所有.vue文件

//publicComponent.js
import Vue from 'vue' // 引入vue
// 处理首字母大写 abc => Abc
function changeStr(str){
  return str.charAt(0).toUpperCase() + str.slice(1)
} 

const requireComponent = require.context('.', false, /\.vue$/)
console.log('requireComponent.keys():',requireComponent.keys())  // 打印
requireComponent.keys().forEach(fileName => {
  const config = requireComponent(fileName)
  console.log('config:',config)  // 打印
  const componentName = changeStr(
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')   // ./child1.vue => child1
  )
  Vue.component(componentName, config.default || config) // 动态注册该目录下的所有.vue文件
})

//main.js中引入js
import pub_cpnts from './pub_cpnts/publicComponent.js'

//页面中直接使用
<template>
    <view class="content">  
        pages        
        <ca></ca>
        <cb></cb>
    </view>
</template>