假使你是一個剛起步學習Vue的前端工程師，你很有可能在官方教程學到如何在網頁中導入Vue框架：在 <script> 標籤中直接引用。這確實是最有效率的Vue導入方式。

上述的方式有著簡單易用的優點，同時也存在著難以管理的缺點。當我們想要擴展成超大型專案時，你會開始思考如何把 Vue 組件化，這也是我們接下來所要介紹的內容 - 單檔案組件(Single File Components — or SFCs)。

單檔案組件 (SFC) 規範

以 Vue框架開發的前端項目裡，我們通常會使用一個自定義的檔案類型 .vue 來封裝每一個組件。每個 .vue 檔案包含三種類型的頂級語言區塊： <template> 、 <script> 和 <style> ，此外 .vue 檔案也允許用戶添加自定義的類型區塊。

<!-- Hello.vue -->
<template>
  <div class="hello"></div>
</template>

<script>
export default {
  data () {
    return {
      msg: '嗨，這是自定義的歡迎訊息'
    }
  }
}
</script>

<style>
.hello {
  color: red;
}
</style>

<custom1>
  custom1是一個用戶自定義的語言區塊!
</custom1>

其中，三種頂級語言區塊存放的內容如下，文章後面會再詳細介紹每個頂級語言區塊。

template: HTML
script: Javascript/Typescript code
style: styling code (預設為 CSS)

Vue項目在編譯打包時，我們會使用 vue-loader 解析 .vue 檔案，提取每一個語言區塊，最後將它們封裝成一個 ES Module，默認輸出會是一個 Vue.js組件對象。

假使我們想自定義新的語言區塊或是使用非預設的 loader 解析我們的 .vue檔案，可以通過設置語言區塊的 lang屬性。
例如，以下是用Sass編寫樣式的範例。

<style lang="sass">
  /* write Sass! */
</style>

語言區塊

template 模板區塊

每個 .vue 檔案最多包含一個 <template> 區塊。
樣板不再要求只有一個根元素

<!-- Vue3 不再要求只有一個根元素，此寫法在 Vue2 編譯會報錯-->
<template>
  <div> Div 1</div>
  <div> Div 2</div>
</template>

預設使用 HTML 解析器。

script 腳本區塊

每個 .vue 檔案最多包含一個 <script> 區塊，且最終必須匯出一個 Vue Object。
預設為 JavaScript， Vue3 提供了對於 Typescript 更友好的支持。
可以在 <script> 中使用 require或是ES2015的from import關鍵字引用其他 JS 套件或是 Vue 組件。

style 樣式區塊

一個 .vue 檔案可以包含多個 <style> 語言區塊
預設匹配: /.css$/
預設是全域的，如果想限制 <style> 區塊只作用在該 .vue 檔案的組件裡，可以加上 scoped 屬性。

<style scoped>
...
</style>

自定義區塊

Vue 框架允許在 .vue 檔案中添加額外的自定義標籤來實現項目的特定需求。 vue-loader 將會使用標籤名稱、 lang 屬性以及你在 webpack 裡的配置來進行解析。
當自定義區塊有匹配到 loader 時才會被 vue-loader 處理，否則 .vue 檔案中的自定義區塊將會被忽略。

範例

以下是一個在 .vue 檔案裡頭自定義一個 <custom1> 區塊，以及在 webpack中指定解析用的 loader 的範例。

<!-- Custom.vue -->
<template>
  <div> Custom Section Example</div>
</template>
<custom1>
  這是一個用戶自定義的語言區塊!
</custom1>

// wepback.config.js
module.exports = {
  module: {
    rules: [
      {
        resourceQuery: /blockType=custom1/,
        loader: require.resolve('./custom1-loader.js')
      }
    ]
  }
}

再次強調，單檔案組件 SFC 的解析需要配置對應的 loader ，若是前端項目打包編譯出現問題，除了檢查 .vue 的語法是否書寫正確之外，還要確認 webpack.config.js 裡的 loader 配置是否無誤。

結論

在這篇文章裡，你學到了

什麼是單檔案組件SFC
SFC規範
三種頂級語言區塊 template、script和sytle
vue-loader 與 loader 的配置
自定義區塊

Vue3: Single file component