.vue シングルファイルコンポーネント (SFC) の仕様

この記事では、Vue の SFC と vue-loader の具体的な分析を紹介します。困っている人はぜひ参考にしてください。

公式ウェブサイト: https://vue-loader.vuejs.org/zh/ vue-loader は、簡単に言えば、vue ファイルを JS モジュールに変換する Webpack ローダーです。 babel-loader または bubble-loader 構成が検出されると、ES2015 が自動的にサポートされます。 vue-loader を使用すると、Vue Single-File Component (SFC)、つまり単一ファイル コンポーネントの形式でコンポーネントを作成できます。

.vue シングル ファイル コンポーネント (SFC) の仕様 1. テンプレート ブロック SFC には最大 1 つの ブロックが文字列として抽出されます。 vue-template-compiler に渡され、webpack がそれを js レンダリング関数にコンパイルし、最後に 2 からエクスポートされたコンポーネントに挿入します。 1 つの ブロック; デフォルトのエクスポートは Vue.js コンポーネント オプション オブジェクトである必要があり、Vue.extend() によって作成された拡張オブジェクトもエクスポートできます。

考え方: Vue.extend() 内のデータは関数である必要があるため、.vue SFC スクリプトでは、エクスポート内のデータは関数です 3. スタイル ブロック .vue ファイルには複数の &lt ; を含めることができます。 style> タグ; スコープとモジュールを使用してカプセル化できます。

異なるカプセル化モードを持つ複数の タグを同じコンポーネント内に混在させることができます。 4. ブロック名は次のようになります。処理に対応するローダーを見つけるために使用され、webpack.config を設定する必要があります 5. すべての言語ブロックは src import をサポートします

インポート パスは webpack モジュール要求と同じパス解決ルールに従います // 相対パスが必要です/start

"> less/sass コンパイル言語を使用、 JADE を使用 (jade は、JS で実装され、他の言語でも実装されている高性能テンプレート エンジンです) - php、scala、yuby、python、java、ノードの使用に提供可能) デフォルトの およびその他の言語ブロックに加えて、カスタム ブロックを追加して、カスタム ブロックを使用することもできます。ローダーを使用して処理します

コンポーネント内の CSS のローカル スコープを直接シミュレートします ステートメント スタイルとテンプレート内の静的リソース (画像など) をモジュールの依存関係として扱い、それを介して処理しますwebpack ローダー

開発モードでのホットリロード

前処理

Vue は、言語ブロックをコンパイルできるさまざまなタイプのプリプロセッサをサポートしています。たとえば、Vue はデフォルトで PostCSS を使用して CSS を処理します。 js 部分については、Vue はデフォルトで babel を使用します。また、Coffee、Typescript なども使用できます。対応するローダーをインストールするだけで、Vue は lang 属性に基づいて対応するローダーを推測します。言語ブロックと Webpack 設定のオプション ルール。 小さな栗: 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-loader を生の pug に置き換えることができます。 template --> p h1 Hello world! ログイン後にコピー CSS スコープ:scope

タグにscope属性がある場合、CSSの「ローカルスコープ」はShadow Domのカプセル化と同様に、現在のコンポーネントの要素にのみ作用します。 。以下に示すように、同じコンポーネント内でスコープ付きスタイルとスコープなしスタイルを使用できます。 /* global styles */

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

ログイン後にコピー vue-loader によって処理された CSS 出力は、PostCSS 処理を通じてスコープが書き換えられ、次のようになります。スコープを使用すると、子コンポーネントのルートノードは親コンポーネントのスコープCSSの影響を受けます スコープを使用すると、親コンポーネントのスタイルが子コンポーネントに漏れることはありません。 ただし、子コンポーネントのルート ノードは、親スコープの CSS と子スコープの CSS の影響を受けます。 これは、親が子コンポーネントのルート要素をレイアウト用にスタイル設定できるようにするためです。 親コンポーネントが ‘ >>> ’ または ‘ /deep/ ’ を使用できるようにします。このディープ セレクターは子コンポーネントに作用します .example[data-v-f3f3eg9] { color: red; }

hi

ログイン後にコピー は にコンパイルされます

.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对象传递/获取所有的内容，例如：