Vue自動登録グローバルコンポーネントスクリプト

1094 ワード

今日はidea、vueのいくつかのコンポーネントがあります.グローバルに使われるかもしれません.mainだと思います.js書き込み
Vue.component(name, instance)

それからとても命令式で、書いていても面白くなくて、1つの関数が例えばcomponentsの下のファイルをロードすることを指定することができることを考えて、自動的にグローバル化の登録を完成して、思い出してとてもかっこいいです
コード:
export function autoLoadingGlobalComponent() {
  const requireComponent = require.context(
    //           
    '../components',
    //         
    false,
    //   vue        
    /\.vue$/
  )
  //          ,        
  requireComponent.keys().forEach(fileName => {
    //       (  )
    const componentConfig = requireComponent(fileName)
    //       PascalCase   (eg: MYHeader)
    const componentName = _.upperFirst(
      //        
      _.camelCase(
        //          `./`         eg: ./food-header.vue -> foodHeader
        fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
      )
    )
      //       
    Vue.component(
      componentName,
      //             `export default`    ,
      //          `.default`,
      //            。
      componentConfig.default || componentConfig
    )
  })
}