我们平时可能这样引入注册组件。每次都得需要在头部引入，然后注册，最后在模板上使用。

    1. <template>
    2.   <div id="app">
    3.     <comp-one></comp-one>
    4.   </div>
    5. </template>
    7. <script>
    8.   import compOne from './components/comp-one.vue'
    10.   export default {
    11.     name: 'App',
    12.     components: {
    13.       compOne
    14.     }
    15.   }
    16. </script>

    那么，有没有更加方便快捷的方法呢？我们不妨这样。
    创建一个名为 globalComp.js 文件，假设我们这里与组件平级，即存放在组件文件夹中。
    目录结构如：

    1. -src
    2. --components
    3. ---comp-one.vue
    4. ---globalComp.js

    globalComp.js

    1. import Vue from 'vue'
    3. function changeStr (str){
    4.     return str.charAt(0).toUpperCase() + str.slice(1);
    5. }
    7. const requireComponent = require.context('./',false,/\.vue$/); // './'操作对象为当前目录
    9. requireComponent.keys().forEach(element => {
    10.     const config = requireComponent(element);
    12.     const componentName = changeStr(
    13.         element.replace(/^\.\//,'').replace(/\.\w+$/,'')
    14.     )
    16.     Vue.component(componentName, config.default || config)
    17. });

    然后，我们需要在 main.js 文件中引入。

    1. import './components/globalComp.js'

    最后，我们只需要在模板直接使用就可以了。

    2. <template>
    3.   <div id="app">
    4.     <comp-one />
    5.   </div>
    6. </template>
    8. <script>
    9.   export default {
    10.     name: 'App'
    11.   }
    12. </script>

    注意，require.context 是 webpack 的一个 API，所以，需要基于 webpack 环境才可以使用。