一劳永逸的组件注册

通常在组件使用前，需要引入后再注册，但如果高频组件多了，每次都这样做，不仅新增很多代码，效率还低！我们应该如何优化呢？

其实，我们可以借助一下webpack的require.context() 方法来创建自己的（模块）上下文，从而实现自动动态require组件。

我们先在components文件夹（这里面都是些高频组件）添加一个叫global.js的文件，在这个文件里使用require.context 动态将需要的高频组件统统打包进来，然后在main.js文件中引入global.js的文件。

//  global.js文件
import Vue from 'vue'
function changeStr (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
}
const requireComponent = require.context('./', false, /\.vue$/)
// 查找同级目录下以vue结尾的组件
const install = () => {
  requireComponent.keys().forEach(fileName => {
    let config = requireComponent(fileName)
    console.log(config) // ./child1.vue 然后用正则拿到child1
    let componentName = changeStr(
      fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    )
    Vue.component(componentName, config.default || config)
  })
}
export default {
  install // 对外暴露install方法
}

最后我们就可以随时随地在页面中使用这些高频组件，无需再手动一个个引入了。

创建组件并全局注册

// main.js

// 1、传统方法
import Vue from "vue";
import button from "@/components/button";
Vue.component("qu-button", button);
// 2、循环注册components文件夹下的所有组件注册为全局组件，组件名字为 qu-组件名
const components = require.context("@/components", true, /\.vue$/);
components.keys().forEach((filename) => {
  let arr = filename
    .replace(/\.\//, "")
    .replace(/\.vue$/, "")
    .split("/");
  let componentName = "qu-" + arr[arr.length - 1];
  let componentConfig = components(filename).default;
  Vue.component(componentName, componentConfig);
});