vue 注册全局基础组件

全局注册组件

在当前目录如下

1. 使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context
2. 在src/main.js写入以下关键代码
3. 必须在根 Vue 实例 (通过 new Vue) 创建之前发生

       import Vue from 'vue'
       import App from './App.vue'
   
       Vue.config.productionTip = false
   
       const requireComponent = require.context(
       // 其组件目录的相对路径
       './components/base',
       // 是否查询其子目录
       false,
       // 匹配基础组件文件名的正则表达式 
       /Base[A-Z]\w+\.(vue|js)$/
       )
   
       requireComponent.keys().forEach(fileName => {
       // 获取组件配置
       const componentConfig = requireComponent(fileName)
   
       // 获取组件的 PascalCase 命名
       const componentName = upperFirst(
           camelCase(
           // 获取和目录深度无关的文件名
           fileName
               .split('/')
               .pop()
               .replace(/\.\w+$/, '')
           )
       )
   
       // 全局注册组件
       Vue.component(
           componentName,
           // 如果这个组件选项是通过 `export default` 导出的，
           // 那么就会优先使用 `.default`，
           // 否则回退到使用模块的根。
           componentConfig.default || componentConfig
       )
       })
       new Vue({
   
       render: h => h(App)
       }).$mount('#app')
   
   

4. 在src/views/Home.vue直接调用，无须注册组件

   <template>
       <div class="home">
           <base-title/>
       </div>
   </template>