一、vue檔案

vue檔案是一個自定義的檔案型別，用類HTML語法描述一個vue元件，每個.vue元件包含三種類型的頂級語言快< template>< script>< style>，還允許新增自定義的模組；

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

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

<custom1>
  This could be e.g. documentation for the component.
</custom1>

如果你喜歡分隔你的.vue檔案到多個檔案中，你可以通過src屬性匯入外部檔案：

<template src='./template.html'></template>
<style src='./style.css'></style>
<script src='./script.js'></script>

二、vue-loader

vue-loader會解析檔案，提取出每個語言塊，如果有必要會通過其他loader處理，最後將他們組裝成一個commonjs模組；module.exports出一個vue.js元件物件；

1：< temlate>語言塊

（1）預設語言：html
（2）每個.vue檔案最多包含一個< template>塊
（3）內容將被提取為字串，將編譯用作VUE元件的template選項；
2：< script>
（1）預設語言：JS（在監測到babel-loader或者buble-loader配置時，自動支援ES2015）
（2）每個.vue檔案最多包含一個< script>塊
（3）該指令碼在類CommonJS環境中執行（就像通過webpack打包的正常JS模組）。所以你可以require()其他依賴。在ES2015支援下，也可以使用import跟export語法
（4）指令碼必須匯出Vue.js元件物件，也可以匯出由VUE.extend()建立的擴充套件物件；但是普通物件是更好的選擇；
3：< style>
（1）預設語言：css
（2）一個.vue檔案可以包含多個< style>標籤
（3）這個標籤可以有 scoped 或者 module屬性來幫助你講樣式封裝到當前元件；具有不同封裝模式的多個< style>標籤可以在同一個元件中混合使用
（4）預設情況下，可以使用style-loader提取內容，並且通過< style>標籤動態假如文件的< head>中，也可以配置webpack將所有的styles提取到單個CSS檔案中；
4：自定義塊
可以在.vue檔案中新增額外的自定義塊來實現專案的特殊需求；例如< docs>塊；vue-loader將會使用標籤名來查詢對應的webpack loaders來應用到對應的模組上；webpack需要在vue-loader的選項loaders中指定；

vue-loader支援使用非預設語言，比如CSS前處理器，預編譯的HTML模板語言，通過設定語言塊的lang屬性：

<style lang='sass'>
    /*sass*/
</style>