>[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)