>[success] # [单文件组件](https://cn.vuejs.org/guide/scaling-up/sfc.html)(简称 SFC) 1. 后缀名为` .vue` 的**single-file components (单文件组件)**,可以让每一个组件有自己的**模板、脚本逻辑、样式**，但是需要`webpack`或者`vite`或者`rollup`等构建工具来对其进行处理 2. **单文件**，在编写时候可以利用工具提供**代码的高亮**,并且可以使用`ES6`、`CommonJS`的模块化能力，还可以使用**预处理器**`TypeScript、Babel、Less、Sass` >[danger] ##### 使用 ~~~ <script> export default { data() { return { greeting: 'Hello World!' } } } </script> <template> <p class="greeting">{{ greeting }}</p> </template> <style> .greeting { color: red; font-weight: bold; } </style> ~~~ >[info] ## 官网介绍地址 [sfc](https://cn.vuejs.org/guide/scaling-up/sfc.html#introduction) [使用](https://cn.vuejs.org/api/sfc-spec.html#src-imports)