.vue單一檔案元件(SFC) 規格

這篇文章要跟大家分享的是關於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渲染函數，並最終注入到從 導出的元件中；

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

3. 樣式區塊 一個.vue 檔案可以包含多個 標籤； 可以使用scope和module進行封裝； 具有不同封裝模式的多個 標籤可以在同一個組件中混合使用；

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

5. 所有語言區塊支援src導入 導入路徑遵循和webpack 模組請求相同的路徑解析規則 // 相對路徑需要以../開始

vue-loader特性概述 支援元件的各個template，script，style模組使用其他非預設語言，例如： 使用less/sass編譯語言， 使用JADE（jade是高效能的模板引擎，用JS實現，也有其他語言的實作—php,scala,yuby,python,java ，可以供給node使用）

除了預設的 等語言塊，還可以加自訂區塊，然後使用自訂的loader處理他們

#為元件中的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 语言 } } ] } 登入後複製 style 增加lang属性并赋值 --> /* write SASS here */ 登入後複製 對於模版 的處理方式略有不同，因為大多數Webpack 模版處理器（例如pug-loader）會回傳模版處理函數，而不是編譯的HTML 字串，我們可以原始的pug 取代pug-loader。 template --> p h1 Hello world! 登入後複製 CSS作用域：scope 當 標籤帶scope屬性時，創造出css的“局部作用域”，css只作用於當前組件的元素，類似Shadow Dom封裝。同一個元件中可以使用scoped跟non-scoped styles，如下所示：

/* global styles */

/* local styles */ .example { color: red; } hi

登入後複製 vue-loader處理的CSS輸出，都是透過PostCSS進行作用域重寫，PostCSS處理後如下：

.example[data-v-f3f3eg9] { color: red; }

hi

登入後複製 使用scope時，子元件的根節點將受父元件作用域CSS影響 使用scope作用域時，父元件的樣式不會洩漏到子組件中。但子組件的根節點將受父級作用域CSS和子級作用域CSS的影響。這是為了父級可以設定子元件根元素的樣式以進行佈局。

讓父元件可以使用' >>> '或' /deep/ ' 此深度選擇器作用於子元件 # .a >>> .b { /* ... */ } 登入後複製 編譯為

.a[data-v-f3f3eg9] .b { /* ... */ } 登入後複製 动态生成的DOM内容不受scope style的影响，但可以使用深度选择器进行样式改变 使用scope作用域不能弃用class或id等 考虑到浏览器渲染各种 CSS 选择器的方式，当使用 scoped 时，选择属性选择器如p { color: red } 在作用域中会慢很多倍（即当与属性选择器组合时）。如果你使用 class或者 id 代替，比如 .example { color: red }，这样几乎没有性能影响

在递归组件中注意后代选择器 对于带有.a .b的CSS选择器，如果匹配.a的元素包含递归子组件，则该子组件中的所有.b将与其匹配。

小思考：在template中只包含一个外层节点，不能多个节点并列，这个设计思路遵循父组件可以操作子节点的一个根节点，即使在CSS局部作用域下依然有效 CSS模块模式：module 一个CSS Module其实就是一个CSS类型的文件，其编写方式与CSS相同，但在编译时会编译为ICSS低级交换格式。 其默认所有的类名/动画名都在本地作用域，当从JS模块导入CSS模块时，它会导出包含从本地名称到全局名称的所有映射的一个对象 在CSS Module中，所有的url和@import都是被看成模块依赖，例如url(./image.png) 会被转换为 require(‘./image.png’) CSS 模块处理是通过 css-loader，请求的资源可以是在node_modules中。 Vue loader中的CSS Module

配置 Vue loader集成了CSS Module，使用前需要在css-loader中设置modules: true，如下：

// webpack.config.js -> module.rules { test: /\.css$/, use :[ 'vue-style-loader', { loader: 'css-loader', options: { // enable CSS Modules modules: true, // customize generated class names localIdentName: '[local]_[hash:base64:8]' } } ] } 登入後複製 然后就在 中增加module属性

.red { color: red; } 登入後複製 使用 这样Vue loader会将css module本地对象编译为计算属性注入到组件中，默认值为$style。template可以通过动态类绑定使用：

This should be red

登入後複製 JS也可以通过this.$style访问：

export default { created () { console.log(this.$style.red) // -> "red_1VyoJ-uZ" // an identifier generated based on filename and className. } } 登入後複製 为多个style自定义标识符 一个.vue组件可以有多个 ，为避免module注入样式覆盖，可以通过给属性module赋值的方式自定义计算属性的名称：

/* 标识符注入为 a */ /* 注入为 b */ 登入後複製 结合预处理 CSS Module还可以在预处理（SASS，LESS等）中使用，在配置webpack rules时加上modules: true，例如：

// webpack.config.js -> module.rules test: /\.scss$/ use[{ loader: 'css-loader', options: { modules: true } }] 登入後複製 .vue中自定义节点/语言块 除了默认的 等节点，还可以加自定义节点，并使用自定义的loader处理他们； 可以给节点加lang属性，此时节点rule匹配lang的扩展； 如果没有标记lang，则自定义节点的name和rule需要在webpack中声明。

小栗子：自定义语言块 首先需要loader。为了将自定义块注入到组件中，自定义一个loader如下：

// myblock-loader.js module.exports = function (source, map) { this.callback( null, `export default function (Component) { Component.options.__myblock = ${ JSON.stringify(source) } }`, map ) } 登入後複製 配置到webpack

// webpack.config.js -> module.rules { resourceQuery: /blockType=myblock/, loader: require.resolve('./myblock-loader.js') } 登入後複製 在组件中使用

Hello

This is the documentation for component B. 登入後複製 组件间的复用

import ComponentB from './ComponentB.vue';

export default { components: { ComponentB }, data () { return { myblock: ComponentB.__myblock } } } 登入後複製 热重载：不刷新页面的更新 当更改.vue的template或style时，页面不刷新也可实现内容动态的变化，并保留着程序及其组件的状态。在以下情况下会保持热重载：

编辑组件的 ，热重载通过vue-style-loader自行运行，不会影响应用程序状态

编辑组件的 ，实例会重现，这是因为 被编译成新的渲染函数，不会产生副作用。

编辑组件的部分 ，编辑的实例将销毁后重建，这是因为 可能包含产生副作用的生命周期钩子，因此需要“重新加载”以确保一致的行为。如果组件产生全局副作用则需要整页的重新加载。

热加载是默认启动的，当以下情况下关闭： webpack target is node (SSR)

webpack压缩代码

生产模式：process.env.NODE_ENV === 'production'

也可以手动禁用热重载：

// webpack.config.js -> module.rules { test: /\.vue$/, loader: 'vue-loader', options: { hotReload: false // disables Hot Reload } } 登入後複製 功能组件 一个简单的.vue组件可以声明为无状态的（没有反应数据）和无实例的（没有此上下文）的功能组件。 vue.js 2.5版本以上，在template中加上functional属性即可声明：

登入後複製 在script中的结构为：

Vue.component('my-component', { functional: true, props: { //也可不定义props // ... }, render: function (createElement, context) { // createElement, context 为上下文参数 // ... } }) 登入後複製 组件加上functional: true后，更新渲染函数需要添加context参数，故this.$slots.default更新为context.children，this.level更新为context.props.level。 功能组件通过context对象传递/获取所有的内容，例如：

context.props: 包含功能组件的props的对象，在vue 2.3+如未定义的props属性会自动加到组件根元素上；

context.children: 包含VNode子节点的数组

context.slots: 返回slots对象的函数

context.data: 整个数据对象，作为createElement的第二个参数传递给组件

context.parent: 指向父组件

context.listeners: (2.3.0+) data.on的别名，包含父级注册事件侦听器的对象。

context.injections: (2.3.0+) 包含组件的注入项

由于功能组件只是功能，缺少持久化实例，因此渲染的成本要低得多，也不会出现在Vue devtools组件树中； 适用于作为封装组件封装子节点/props/data后传递给子组件； 功能组件也支持预处理/scope/热重载等。

静态资源url是如何处理的 webpack配置module.exports需要vue-loader，同时也会有各种静态资源的loader。当Vue Loader编译SFC中的 时，将会把所有关联的静态资源url转为webpack module请求。例如：

登入後複製 会编译为：

createElement('img', { attrs: { src: require('../image.png') // this is now a module request } }) 登入後複製 URL路径解析规则： 绝对路径原样保存；

以“.”开头，则将其解释为相对模块请求，并根据文件系统上的文件夹结构解析；

以“～”开头，则将其后的内容解析为模块请求，可以在节点模块引用这些内容；

以“@”开头，则其后的内容也被解释为模块请求，@在vue-cli创建的项目中默认指向/ src，可以使用webpack配置@别名