title: Automatic global register vue single file components from folder
body: <p>I collect all my simple global components in ./components/basic folder and I want to auto register it globally.</p>
  
  <p><strong>Here is the code:</strong></p>
  
  <pre><code>import Vue from "vue";
  import upperFirst from 'lodash/upperFirst';
  import camelCase from 'lodash/camelCase';
  
  
  const requireComponent = require.context('./components/basic/', true, /[A-Z]\w+\.(vue|js)$/); 
  
  requireComponent.keys().forEach(fileName =&gt; {
      const componentConfig = requireComponent(fileName)
      const componentName = upperFirst(camelCase(fileName.split('/').pop().replace(/\.\w+$/, '')));
      Vue.component(componentName, componentConfig.default || componentConfig);
    });
  
  new Vue({
      el: "#app"
  });
  </code></pre>
  
  <p><strong>index.html fragment:</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="app"&gt;  
          &lt;MyBasic&gt;&lt;/MyBasic&gt;
      &lt;/div&gt;
      &lt;script src="./dist/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>And finally a component MyBasic.vue:</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;h1&gt;My basic component&lt;/h1&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'MyBasic',
          data(){   
              return{
                  header: "Hi!"
              }
          }
      }
  &lt;/script&gt;
  
  &lt;style&gt;&lt;/style&gt;
  </code></pre>
  
  <p>Evething seems right, but in fact it throws warning to console and my component doesn't works:</p>
  
  <blockquote>
    <p>[Vue warn]: Unknown custom element: &lt;mybasic&gt; - did you register the
    component correctly? For recursive components, make sure to provide
    the "name" option. (found in Root)</p>
  </blockquote>
  
  <p>What is going wrong with the register script?</p>