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

Vue单文件组件可以通过以下几种方式来挂载多个：

使用Vue.extend()方法创建组件构造器，然后通过new关键字实例化多个组件对象，并挂载到不同的DOM元素上。例如：

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

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

在Vue实例中使用components选项注册多个组件，并在模板中使用组件标签来挂载。例如：

// 注册多个组件
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>
  `
});

使用Vue Router来实现多个组件的挂载。Vue Router是Vue.js官方的路由管理器，可以实现单页面应用的多个组件切换。例如：

// 定义多个组件
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>
  `
});

以上是三种常见的挂载多个Vue单文件组件的方式。根据实际需求和项目结构，选择适合的方式来挂载多个组件。