VUE单文件组件,Single-File Component,简称SFC,一种特殊的文件格式，使得能够将一个vue组件的模板、逻辑、样式封装在一个文件中，类似 HTML 语法的自定义文件格式

主要包含：<template>、<script> 和 <style>，以及其他的自定义块

<template>（视图）=>语块包裹的内容将会被提取、传递给渲染函数，并附在导出的组件上作为其 render 。

<script>（逻辑）=>将被预处理为组件的 setup函数，这意味着它将为每一个组件实例都执行

<style>（样式）=>一个或多个封装当前组件的样式

优点：

1：使用熟悉的 HTML、CSS 和 JavaScript 语法编写

2：相关的内容在一个模块

3：css作用域内，避免冲突覆盖

3：交叉分析模板和逻辑代码能进行更多编译时优化

4：模块热更新 (HMR) 支持

工作原理：特定的文件格式，因此必须交由 @vue/compiler-sfc 编译为标准的 JavaScript 和 CSS，变成标准的 JavaScript(ES) 模块

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>
 
<template>
  <p class="greeting">{{ greeting }}</p>
</template>
 
<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

引入方式

import MyComponent from'./MyComponent.vue'
 
export default {
  components: {
    MyComponent
  }
}