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中最多一個其內容將被提取為字串傳遞給vue-template-compiler ，然後webpack將其編譯為js渲染函數，並最終注入到從<script> 導出的元件中；</script>

2. <script>腳本區塊</script>

一個SFC最多一個<script>區塊；<br/>它的預設匯出應該是一個Vue.js 的元件選項對象，也可以匯出由Vue. extend() 所建立的擴充物件。 <br/>思考：Vue.extend() 中data 必須是函數，所以在.vue SFC的script中，export中的data是函數</script>

3.

一個.vue 檔案可以包含多個

4. 自訂語言區塊

vue-loader 將會使用區塊名稱來尋找對應的 loader 進行處理，需要設定webpack.config

5. 所有語言區塊支援src導入

導入路徑遵循和webpack 模組請求相同的路徑解析規則
//  相對路徑需要以../開始

vue-loader特性概述

• 支援元件的各個template，script，style模組使用其他非預設語言，例如：

• 除了預設的

• #為元件中的css模擬局部作用域，直接

• #將style和template中的靜態資源（圖片等）當作模組依賴，並透過webpack loader處理

• 在開發模式下的熱重載

##預處理

Vue支援各類型的預處理器，這些預處理可以編譯語言區塊，例如Vue預設使用PostCSS處理css，你可以用sass，less，stylus等， 對於js部分Vue預設使用babel處理，還可以用coffee、typescript等，只需要安裝對應的loader載入器，Vue會根據語言區塊的lang屬性和webpack配置的option rules推斷對應的loader。

小栗子：css使用sass預處理

$ npm install sass-loader node-sass  --save-dev

// webpack.config.js -> module.rules
{
    test: /\.sass$/,
    use: [
        'vue-style-loader',
        'css-loader',
        {
            loader: 'sass-loader',
            options: {
                indentedSyntax: true  //sass-loader 默认解析 SCSS 语言
            }
        }
    ]
}

<!--  .vue -> style 增加lang属性并赋值 -->
<style>
/* write SASS here */
</style>

對於模版

以上是Vue中SFC和vue-loader的具體分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！