一、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>