vue 出現 Unknown custom element: ＜xxx-xx＞ - did you register the component 的可能性原因

 

身爲一個後端，由於人手不足也不得已开始写前端，虽然写起来没啥太大障碍，但是遇到问题的时候就是很抓狂，今天就因为这点小问题浪费了俩小时

定义了一个组件，但是使用的时候报错

[Vue warn]: Unknown custom element: <base-info-pledge> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

使用方式是参考之前前端大哥的做法的，搜索引擎找到的结论基本是与我的问题没关系，是的，我遇到的问题根本原因在js的 import xxx和import {xxx}的區別，我在组件里面写的export是，但是我在import的时候写的却是import {xxx} 

// 组件文件export处的写法
export default {
  name: 'BaseInfoPledge',
  props:{
    info:{
      type: Object
    }
  }
}

// import时使用了 import {xxxx},正确应该是 import xxxx
import {BaseInfoPledge} from './BaseInfoPledge.vue'

export {
    BaseInfoPledge
}

// 正确的写法
import BaseInfoPledge from './BaseInfoPledge.vue'

export {
    BaseInfoPledge
}

由于模板处export时用的export default，并没有指定export对象的名称，使用 import {xxxx} 是无法正确import的，只能是使用 import xxxx来导入这个对象

 

估计系统学习过前端的大哥是不会遇到这种问题，但是好久没被这种问题坑过，特地记录一下