来聊聊 Vue Loader

Vue Loader

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

Vue Loader 是什么？

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

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

• 允许为 Vue 组件的每个部分使用其它的 webpack loader，例如在

  转换结果：

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

  深度作用选择器

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

  上述代码将会编译成：

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

  还有一些要留意

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

  热重载

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

  状态保留规则

  • 当编辑一个组件的