Detaillierte Analyse von SFC und Vue-Loader in Vue

Dieser Artikel gibt Ihnen eine spezifische Analyse von SFC und Vue-Loader. Der Inhalt ist sehr gut. Ich hoffe, er kann allen helfen.

Offizielle Website: https://vue-loader.vuejs.org/zh/ vue-loader ist ein Webpack-Loader, der Vue-Dateien in JS-Module konvertiert. Wenn die Babel-Loader- oder Bubble-Loader-Konfiguration erkannt wird, wird ES2015 automatisch unterstützt. Mit Vue-Loader können Sie eine Komponente in Form einer Vue Single-File Component (SFC) schreiben, also einer einzelnen Dateikomponente .

.vue Single File Component (SFC) Spezifikation 1. Template block Höchstens ein SFC ;Block; Sein Inhalt wird als String extrahiert und an den vue-template-compiler übergeben, dann kompiliert Webpack ihn in die js-Rendering-Funktion und schließlich in die aus ; exportierte Komponente eingefügt

2. Skriptblock Ein SFC kann höchstens einen -Block haben. Sein Standardexport sollte ein Vue.js-Komponentenoptionsobjekt sein, das auch exportiert werden kann von Vue. Das von extension() erstellte Erweiterungsobjekt. Denken: Daten in Vue.extend() müssen eine Funktion sein, daher sind die Daten im Export eine Funktion

3 Style-Block Eine .vue-Datei kann mehrere -Tags mit unterschiedlichen Kapselungsmodi enthalten; 4. Benutzerdefinierte Sprachblöcke

vue-loader verwendet den Blocknamen, um den entsprechenden Loader für die Verarbeitung zu finden, und webpack.config muss konfiguriert werden Alle Sprachblöcke werden unterstützt src import

Der Importpfad folgt den gleichen Pfadauflösungsregeln wie die Webpack-Modulanforderung // Der relative Pfad muss mit ../

Vue-Loader-Funktionsübersicht Unterstützt die Verwendung anderer nicht standardmäßiger Sprachen für jede Vorlage, jedes Skript und jeden Stil Modul der Komponente, wie zum Beispiel: Verwenden Sie die kompilierte Sprache less/sass, verwenden Sie JADE (jade ist eine leistungsstarke Template-Engine, die in JS implementiert ist). andere Sprachen – PHP, Scala, Yuby, Python, Java, können vom Knoten verwendet werden)

Zusätzlich zum Standard- können Sie auch Fügen Sie benutzerdefinierte Blöcke hinzu und verwenden Sie dann einen benutzerdefinierten Loader, um sie zu verarbeiten.

simuliert den lokalen Bereich für das CSS in der Komponente und deklariert direkt 🎜> Behandelt die statischen Ressourcen (Bilder usw.) in Stil und Vorlage als Modulabhängigkeiten und wird vom Webpack-Loader verarbeitet

Hot-Neuladen im Entwicklungsmodus

Vorverarbeitung

Vue unterstützt verschiedene Arten von Präprozessoren, die Sprachblöcke kompilieren können. Beispielsweise verwendet Vue standardmäßig PostCSS, um CSS zu verarbeiten. weniger, Stift usw. Für den js-Teil verwendet Vue standardmäßig Babel, und Sie können auch Kaffee, Typoskript usw. verwenden. Sie müssen nur den entsprechenden Loader installieren, um den entsprechenden Loader basierend auf dem Lang-Attribut abzuleiten des Sprachblocks und der Optionsregeln der Webpack-Konfiguration. Kleine Kastanie: CSS verwendet Sass-Vorverarbeitung $ npm install sass-loader node-sass --save-dev Nach dem Login kopieren // webpack.config.js -> module.rules { test: /\.sass$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader', options: { indentedSyntax: true //sass-loader 默认解析 SCSS 语言 } } ] } Nach dem Login kopieren style 增加lang属性并赋值 --> /* write SASS here */ Nach dem Login kopieren Die Vorlage wird etwas anders gehandhabt, da die meisten Webpack-Vorlagenprozessoren (z. B. Pug-Loader) die Vorlage zurückgeben, um Funktionen zu verarbeiten Anstelle kompilierter HTML-Strings können wir pug-loader durch raw pug ersetzen. template --> p h1 Hello world! Nach dem Login kopieren CSS-Bereich: Bereich Wenn das -Tag das Bereichsattribut hat, wird ein „lokaler Bereich“ von CSS erstellt und nur das CSS gilt zu den aktuellen Elementen der Komponenten, ähnlich der Shadow Dom-Kapselung. Sie können bereichsbezogene und nicht bereichsbezogene Stile in derselben Komponente verwenden, wie unten gezeigt: /* global styles */

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

Nach dem Login kopieren Die vom Vue-Loader verarbeitete CSS-Ausgabe wird durch PostCSS neu geschrieben. Nach der PostCSS-Verarbeitung sieht sie wie folgt aus: .example[data-v-f3f3eg9] { color: red; }

hi

Nach dem Login kopieren

Bei Verwendung des Bereichs wird der Stammknoten der untergeordneten Komponente durch das Bereichs-CSS der übergeordneten Komponente beeinflusst

Bei Verwendung des Bereichs wird der Stil von Die übergeordnete Komponente dringt nicht in untergeordnete Komponenten ein. Der Stammknoten der untergeordneten Komponente wird jedoch vom CSS des übergeordneten Bereichs und vom CSS des untergeordneten Bereichs beeinflusst. Auf diese Weise kann das übergeordnete Element das Stammelement der untergeordneten Komponente für das Layout formatieren. Ermöglicht der übergeordneten Komponente die Verwendung von ' >>&gt ' oder ' /deep/ '. Dieser Tiefenselektor wirkt auf die untergeordnete Komponente

.a >>> .b { /* ... */ } Nach dem Login kopieren kompiliert zu .a[data-v-f3f3eg9] .b { /* ... */ } Nach dem Login kopieren 动态生成的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]' } } ] } Nach dem Login kopieren 然后就在 中增加module属性

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

This should be red

Nach dem Login kopieren JS也可以通过this.$style访问：

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

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

// webpack.config.js -> module.rules test: /\.scss$/ use[{ loader: 'css-loader', options: { modules: true } }] Nach dem Login kopieren .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 ) } Nach dem Login kopieren 配置到webpack

// webpack.config.js -> module.rules { resourceQuery: /blockType=myblock/, loader: require.resolve('./myblock-loader.js') } Nach dem Login kopieren 在组件中使用

Hello

This is the documentation for component B. Nach dem Login kopieren 组件间的复用

import ComponentB from './ComponentB.vue';

export default { components: { ComponentB }, data () { return { myblock: ComponentB.__myblock } } } Nach dem Login kopieren 热重载：不刷新页面的更新 当更改.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 } } Nach dem Login kopieren 功能组件 一个简单的.vue组件可以声明为无状态的（没有反应数据）和无实例的（没有此上下文）的功能组件。 vue.js 2.5版本以上，在template中加上functional属性即可声明：

Nach dem Login kopieren 在script中的结构为：

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