Vue单文件组件，如何挂载多个？

// 创建组件构造器
const MyComponent = Vue.extend({
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});

// 实例化多个组件对象并挂载
new MyComponent().$mount('#app1');
new MyComponent().$mount('#app2');

// 注册多个组件
Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});

// 创建Vue实例并挂载
new Vue({
  el: '#app',
  template: `
    <div>
      <my-component></my-component>
      <my-component></my-component>
    </div>
  `
});

// 定义多个组件
const Component1 = {
  template: '<div>Component 1</div>'
};

const Component2 = {
  template: '<div>Component 2</div>'
};

// 配置路由
const routes = [
  { path: '/component1', component: Component1 },
  { path: '/component2', component: Component2 }
];

// 创建Vue Router实例
const router = new VueRouter({
  routes
});

// 创建Vue实例并挂载
new Vue({
  router,
  el: '#app',
  template: `
    <div>
      <router-link to="/component1">Component 1</router-link>
      <router-link to="/component2">Component 2</router-link>
      <router-view></router-view>
    </div>
  `
});