如图：两个组件在页面上不显示

原因：

< template> （将要渲染的HTML）必须是包含在一个标签里面的。

解决：

最外层加个div包起来就行

代码示例：

在App.vue中引入一个组件
App.vue

<template>
  <div>
    <addition></addition>
    <p>--------------------</p>
  </div>
</template>

<script>
import Addition from "./components/Addition.vue";

export default {
  data() {
    return {};
  },
  components: {
    "addition": Addition,
  },
};
</script>

components/Addition.vue

<template>
<div>
  <h3>当前最新的count值为：</h3>
  <button>+1</button>
</div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>