原因一：引入组件时多加了大括号

import  Addition  from './components/Addition' // 引入组件不需要加{}
import { deviceDetail, queryHttpLogs } from '@/api/device'  // 引入接口时才加{}

引入组件千万不要加大括号！！

import时加了{}代表引入的是书写路径内的子组件，而非路径文件。比如下面引入接口时，一个文件会export 多个子项，所以当我们引入接口时会加{}。

import { axios } from '@/utils/request'

export function queryHttpLogs (data) {
  return axios({
    url: '/queryLogs/http',
    method: 'POST',
    data
  })
}

export function queryMttpLogs (data) {
  return axios({
    url: '/queryLogs/mqtt',
    method: 'POST',
    data
  })
}

原因二：注册组件时components误写为component

export default {
  data () {
    return {}
  },
  
  // 答应我不要忘记加s好吗！！
  components: {
    'my-addition': Addition,
    'my-subtraction': Subtraction
  }
}

原因三：应用组件时没有将"驼峰"转换成"短横线加小写" 【单页面vue】

// 此组件名称为doExample
Vue.component("doExample",{
        data:function(){
            return{
                multiplierA: 0,
                multiplierB: 0,
                result: 0,
            }
        }
        template: "#example" // 挂载的template是在body定义好-的，id=example
    })

上面组件应用时应该将大写转为短横线加小写：

<do-example></do-example>

多页面（components声明）不需要遵循上面规定