通过CDN使用VueJS：为何添加组件会替换整个模板？

这是因为Vue挂载到目标元素时，默认会完全替换目标元素的内部HTML，而不是在原有内容基础上追加组件。

你把应用挂载到#bookingApp时，Vue会清空这个div里的所有原有内容（包括那个写着“Hello there”的div），然后只渲染根组件的内容——也就是你注册的<select-service>组件。所以只有组件内容能显示，移除组件后，Vue不再替换目标元素内容，原有div才会显现。

解决办法 #

有两种简单方式实现组件和原有内容共存：

• 方式一：新增独立挂载容器
  在#bookingApp里加一个空的div作为Vue的挂载目标，让原有内容和Vue组件分离开：

  <div id="bookingApp">
    <!-- 原有内容保留 -->
    <div>Hello there</div>
    <!-- 空容器给Vue挂载 -->
    <div id="vue-app"></div>
  </div>
  

  JS代码修改挂载目标：

  const SelectService = {
    template: '<div>In Here!!</div>'
  }
  
  Vue.createApp({
    components: { SelectService }
  }).mount('#vue-app')
  

• 方式二：把原有内容纳入Vue模板
  直接将“Hello there”的内容写到根组件的模板里，让Vue统一渲染：

  const SelectService = {
    template: '<div>In Here!!</div>'
  }
  
  Vue.createApp({
    components: { SelectService },
    template: `
      <select-service></select-service>
      <div>Hello there</div>
    `
  }).mount('#bookingApp')
  

内容的提问来源于stack exchange，提问作者MG123