最近很火的Vue Vine是如何实现一个文件中写多个组件

Vue Vine是一个使用Vue.js框架的项目，它可以在单个文件中定义多个Vue组件。这是通过使用单文件组件（Single File Components, 简称SFC）实现的。每个SFC都包含三个主要部分：<template>、<script>和<style>。

以下是一个简单的例子，展示了如何在一个.vue文件中定义两个组件：

// ComponentA.vue
<template>
  <div>{{ message }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello from Component A!'
    }
  }
}
</script>
 
<style scoped>
div {
  color: blue;
}
</style>

// ComponentB.vue
<template>
  <div>{{ greeting }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      greeting: 'Hello from Component B!'
    }
  }
}
</script>
 
<style scoped>
div {
  color: red;
}
</style>

在主入口文件（如main.js）中你可以这样使用这两个组件：

import Vue from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
 
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
});

在HTML中：

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
</div>

这样就可以在同一个.vue文件中定义和使用多个Vue组件了。