Vue中SFC和vue-loader的具體分析
這篇文章要跟大家分享的是關於Vue中SFC和vue-loader的具體分析，內容很不錯，有需要的朋友可以參考一下，希望可以幫助到大家。
官網：https://vue-loader.vuejs.org/zh/
vue-loader是一個webpack的loader，簡單來說就是將vue檔案轉換為JS模組。在監測到babel-loader或buble-loader設定時，自動支援ES2015；
使用vue-loader就可以用Vue Single-File Component (SFC)即單一檔案元件的形式來寫一個元件。
.vue單一檔案元件(SFC) 規格
1. 範本區塊
一個SFC中最多一個< template > ;區塊;
其內容將被提取為字串傳遞給vue-template-compiler ，然後webpack將其編譯為js渲染函數，並最終注入到從<script> 導出的元件中；</p>
<h5 id="lt-script-gt-腳本區塊">2. <script>腳本區塊</h5>
<p>一個SFC最多一個<script>區塊；<br>它的預設匯出應該是一個Vue.js 的元件選項對象，也可以匯出由Vue. extend() 所建立的擴充物件。 <br>思考：Vue.extend() 中data 必須是函數，所以在.vue SFC的script中，export中的data是函數</p>
<h5 id="lt-style-gt-樣式區塊">3. <style>樣式區塊</h5>
<p>一個.vue 檔案可以包含多個<style> 標籤；<br>可以使用scope和module進行封裝；<br>具有不同封裝模式的多個<style> 標籤可以在同一個組件中混合使用； </p>
<h5 id="自訂語言區塊">4. 自訂語言區塊</h5>
<p>vue-loader 將會使用區塊名稱來尋找對應的 loader 進行處理，需要設定webpack.config</p>
<h5 id="所有語言區塊支援src導入">5. 所有語言區塊支援src導入</h5>
<p>導入路徑遵循和webpack 模組請求相同的路徑解析規則<br>// 相對路徑需要以../開始<br><template src="./template.html"> ;</template><br><style src="./style.css"></style><br><script src="./script.js"></script>
vue-loader特性概述
支援元件的各個template，script，style模組使用其他非預設語言，例如：