vue注册全局组件

两种方式注册全局组件

第一种

import Vbase from './components/Base.vue'
Vue.component('Vbase', Vbase)

第二种

function capitalizeFirstLetter(str) {
  // 根据自己编码习惯来设置全局引入的组件名称
  let v = str.replace('./', '').replace('.vue', '')
  return 'V' + v
}
// 全局组件一般建议放在components文件夹下，所以require.context从./components/common目录开始遍历
const requireComponent = require.context('./components/common', false, /\.vue$/)
requireComponent.keys().forEach(filePath => {
  const componentConfig = requireComponent(filePath)
  const componentName = capitalizeFirstLetter(filePath)
  /* 如果这个组件选项是通过 `export default` 导出的，
    那么就会优先使用 `.default`，
    否则回退到使用模块的根 */
  Vue.component(componentName, componentConfig.default || componentConfig)
})

项目目录结构

组件引用

效果展示

看个人喜欢，第一种方法就比较简洁明了，但是如果一个项目的全局组件有N个就需要重复写N遍，这样的话相对于第二种方法代码量就会减少许多。