前端工程化之组件批量注册使用（无需引入注册）

连连看

1、创建 global.js

global.js

import Vue from 'vue';

// 死代码,拿到的就是 require.context('.', false, /\.vue$/) 匹配到的vue结尾文件名字 child1 child2
function changeStr(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}


//require.context('.', false, /\.vue$/)
//三个参数 分别表示 1.指定路径（.指当前路径） 2.是否使用子目录 false/true 3.使用正则匹配
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)
})

2、main.js 引入 global.js

3、使用