Vue의 SFC 및 vue-loader에 대한 자세한 분석

이 기사는 Vue의 SFC 및 vue-loader에 대한 구체적인 분석을 공유합니다. 내용이 매우 좋습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

공식 웹사이트: https://vue-loader.vuejs.org/zh/ vue-loader는 간단히 말해서 vue 파일을 JS 모듈로 변환하는 웹팩 로더입니다. babel-loader 또는 bubble-loader 구성이 감지되면 ES2015가 자동으로 지원됩니다. vue-loader를 사용하면 Vue Single-File Component(SFC) 형식, 즉 단일 파일 구성 요소로 구성 요소를 작성할 수 있습니다.

.vue 단일 파일 구성 요소(SFC) 사양 1. 템플릿 블록 SFC에는 최대 하나의 블록이 있을 수 있으며, 해당 콘텐츠는 문자열로 추출됩니다. vue-template-compiler로 전달된 다음 webpack은 이를 js 렌더링 함수로 컴파일하고 마지막으로 script 블록

2에서 내보낸 구성 요소에 삽입합니다. 하나의 블록 기본 내보내기는 Vue.js 구성 요소 옵션 개체여야 하며 Vue.extend()로 생성된 확장 개체를 내보낼 수도 있습니다. 생각: Vue.extend()의 데이터는 함수여야 하므로 .vue SFC 스크립트에서 내보내기의 데이터는 함수입니다 3. 스타일 블록

A .vue 파일에는 여러 개의 &lt ; style> 태그는 범위와 모듈을 사용하여 캡슐화될 수 있습니다. 서로 다른 캡슐화 모드를 가진 여러 개의 태그는 동일한 구성 요소에서 혼합될 수 있습니다. vue-loader는 다음과 같습니다. 처리할 해당 로더를 찾는 데 사용되며 webpack.config를 구성해야 합니다

5. 모든 언어 블록은 src 가져오기를 지원합니다

가져오기 경로는 webpack 모듈 요청과 동일한 경로 확인 규칙을 따릅니다 // 상대 경로는 다음과 같습니다. be... /start

"> less/sass 컴파일 언어 사용, JADE 사용(jade는 고성능 템플릿 엔진으로 JS로 구현되며 다른 언어로도 구현됩니다. - 노드 사용을 위해 제공되는 php, scala, yuby, python, java)

기본 기타 언어 블록 외에도 사용자 정의 블록을 추가한 후 사용자 정의 로더를 사용할 수 있습니다. 처리하려면

컴포넌트에서 CSS의 로컬 범위를 직접 문으로 시뮬레이션합니다. 스타일 및 템플릿의 정적 리소스(이미지 등)를 모듈 종속성으로 처리하고 웹팩을 통해 처리합니다. loader

개발 모드에서 핫 리로딩

전처리

Vue는 언어 블록을 컴파일할 수 있는 다양한 유형의 전처리기를 지원합니다. 예를 들어 Vue는 기본적으로 CSS를 처리하기 위해 PostCSS를 사용합니다. , 스타일러스 등. js 부분의 경우 Vue는 기본적으로 babel을 사용하며 커피, Typescript 등도 사용할 수 있습니다. 해당 로더만 설치하면 Vue는 언어 블록의 lang 속성을 기반으로 해당 로더를 추론합니다. 웹팩 구성의 옵션 규칙. 작은 밤: 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 문자열 대신 템플릿 처리 기능을 반환하기 때문입니다. , 퍼그 로더를 원시 퍼그로 대체할 수 있습니다. template --> p h1 Hello world! 로그인 후 복사

CSS 범위: 범위 태그에 범위 속성이 있으면 CSS의 "로컬 범위"가 Shadow Dom 캡슐화와 유사하게 생성됩니다. . 아래와 같이 동일한 구성 요소에서 범위가 지정된 스타일과 범위가 지정되지 않은 스타일을 사용할 수 있습니다. /* global styles */

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

로그인 후 복사 vue-loader로 처리된 CSS 출력은 PostCSS를 통해 범위가 다시 작성됩니다. .example[data-v-f3f3eg9] { color: red; }

hi

로그인 후 복사 사용 범위를 사용할 때 하위 구성 요소의 루트 노드는 상위 구성 요소 범위 CSS 의 영향을 받습니다. 범위를 사용할 때 상위 구성 요소의 스타일이 하위 구성 요소로 유출되지 않습니다. 그러나 하위 구성 요소의 루트 노드는 상위 범위 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对象传递/获取所有的内容，例如：