深入理解vue-loader如何使用

发布时间：2020-12-17 02:56:08 所属栏目：百科来源：网络整理

导读：.vue格式的文件使用类似HTML的语法描述vue组件。每个.vue文件包含三种最基本的语言块：, vue-loader会解析这个文件中的每个语言块，然后传输到其它的loaders，最终输出到module.exports是vue组件的配置对象的CommonJS模块。 vue-loader通过指定语言块的lang

.vue格式的文件使用类似HTML的语法描述vue组件。每个.vue文件包含三种最基本的语言块：,

vue-loader会解析这个文件中的每个语言块，然后传输到其它的loaders，最终输出到module.exports是vue组件的配置对象的CommonJS模块。

vue-loader通过指定语言块的lang属性支持css预编译、html编译模板等语言格式。如在组件的style块中使用sass

语言块

默认语言：html
每个*.vue最多包含一个块
块中的内容作为字符串提取出来

src 引入

如果你习惯将*.vue组件分割成多个文件，可以使用语言块的src属性把扩展文件引入到组件中。

转换为：

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

注：

1 . 在同一个组件可以包含局部和全局样式

/* global styles */

子组件的根节点会受到父组件和本组件的局部css样式影响
Partials are not affected by scoped styles.
有了局部样式仍然需要类选择器
在包含迭代组件的组件中小心使用子孙选择器。一条关于.a .b的css规则，如果在类名为a的标签中使用了子组件，那么子组件中的类名为b的标签也会应用这条规则。

CSS 模块化

英文教程

CSS Modules便于实现css模块化，vue-loader通过模仿css的scope提供了module来实现css模块化集成。

使用在

.red { color: red; } .bold { font-weight: bold; }

这样打开CSS Module模式，class对象会作为$style的属性注入到组件中，进而在中进行动态的类绑定

style中的类作为被计算的属性，也可以在：class中使用数组或者对象语法

或者在js中获取使用它

export default { created () { console.log(this.$style.red) // -> "_1VyoJ-uZOjlOxP7jWUy19_0" // an identifier generated based on filename and className. } }

自定义注入名

由于一个vue组件可以包含多个

配置css-loader

用css-loader来处理CSS Modules，以下是css-loader对

通过vue-loader的cssModules配置项定制css-loader

// webpack 2
module: {
rules: [
{
test: '.vue$',loader: 'vue',options: {
cssModules: {
localIdentName: '[path][name]---[local]---[hash:base64:5]',camelCase: true
}
}
}
]
}

PostCSS

任何vue-loader处理输出的css都经过PostCSS进行局部css重写，我们也可以增加PostCSS插件进行这些处理，如autoprefixer和 CSSNext。

Webpack 1.x用法：

Webpack 2.x用法：

postcss也支持插件数组

热加载

热加载不只是修改文件后页面的刷新。修改某个.vue组件后，页面中这个组件的所有实例都会被替换而不重载页面，它还保存了应用的当前状态以及被替换的组件。

如果使用了vue-cli搭建项目，自带了热加载。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!