乐趣区

来聊聊-Vue-Loader

Vue Loader

https://vue-loader.vuejs.org/zh/

Vue Loader 是什么?

Vue Loader 是一个 webpack 的 loader,它允许你以一种名为单文件组件 SFC 的格式撰写 Vue 组件:

<template>
  <div class="example">{{msg}}</div>
</template>
<script>
export default {data () {
    return {msg: 'Hello world!'}
  }
}
</script>
<style>
.example {color: red;}
</style>

Vue Loader 还提供了很多酷炫的特性:

  • 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug;
  • 允许在一个 .vue 文件中使用自定义块,并对其运用自定义的 loader 链;
  • 使用 webpack loader 将 <style><template> 中引用的资源当作模块依赖来处理;
  • 为每个组件模拟出 scoped CSS;
  • 在开发过程中使用热重载来保持状态。

简而言之,webpack 和 Vue Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流,来帮助撰写 Vue.js 应用。

如果你不想手动设置 webpack,我们推荐使用 Vue CLI 直接创建一个项目的脚手架。通过 Vue CLI 创建的项目会针对多数常见的开发需求进行预先配置,做到开箱即用。

处理资源路径

当 Vue Loader 编译单文件组件中的 <template> 块时,它也会将所有遇到的资源 URL 转换为 webpack 模块请求

<img src="../image.png">

https://github.com/webpack-contrib/css-loader

转换规则

资源 URL 转换会遵循如下规则:

  • 如果路径是绝对路径 (例如 /images/foo.png),会原样保留。
  • 如果路径以 . 开头,将会被看作相对的模块依赖,并按照你的本地文件系统上的目录结构进行解析。
  • 如果路径以 ~ 开头,其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 Node 依赖中的资源:

<img src="~some-npm-package/foo.png">

  • 如果路径以 @ 开头,也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias,这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src

转换资源 URL 的好处是:

  • file-loader 可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存。此外,这意味着 你可以就近管理图片文件,可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置,webpack 将会在打包输出中自动重写文件路径为正确的 URL。
  • url-loader 允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值),这会减少小文件的 HTTP 请求数。如果文件大于该阈值,会自动的交给 file-loader 处理。

@ 别名在 .vue <style> 里无法加载图片的问题

https://github.com/vuejs/vue-loader/issues/1113

Scoped CSS

<style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。

<style scoped>
.example {color: red;}
</style>
<template>
  <div class="example">hi</div>
</template>

转换结果:

<style>
.example[data-v-f3f3eg9] {color: red;}
</style>
<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

你可以在一个组件中同时使用有 scoped 和非 scoped 样式:

<style>
/* 全局样式 */
</style>
<style scoped>
/* 本地样式 */
</style>

深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符:

<style scoped>
.a >>> .b {/* ... */}
</style>

上述代码将会编译成:

.a[data-v-f3f3eg9] .b {/* ... */}

还有一些要留意

Scoped 样式不能代替 class。考虑到浏览器渲染各种 CSS 选择器的方式,当 p {color: red} 是 scoped 时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之,比如 .example {color: red},性能影响就会消除。

热重载

当使用脚手架工具 vue-cli 时,热重载是开箱即用的。

状态保留规则

  • 当编辑一个组件的 <template> 时,这个组件实例将就地重新渲染,并保留当前所有的私有状态。能够做到这一点是因为模板被编译成了新的无副作用的渲染函数。
  • 当编辑一个组件的 <script> 时,这个组件实例将就地销毁并重新创建。(应用中其它组件的状态将会被保留) 是因为 <script> 可能包含带有副作用的生命周期钩子,所以将重新渲染替换为重新加载是必须的,这样做可以确保组件行为的一致性。这也意味着, 如果你的组件带有全局副作用,则整个页面将会被重新加载
  • <style> 会通过 vue-style-loader 自行热重载,所以它不会影响应用的状态。

代码校验 (Linting)

ESLint

stylelint https://stylelint.io/

Vue 单文件组件 (SFC) 规范
vue-loader 会解析文件,提取每个语言块,如有必要会通过其它 loader 处理,最后将他们组装成一个 ES Module,它的默认导出是一个 Vue.js 组件选项的对象。

选项参考

https://vue-loader.vuejs.org/zh/options.html# 选项参考

选项参考这个我们下次再聊~

退出移动版