lvyongbo
vue-loader 开发指南 中文版

Updated 2 years ago

介绍

Vue-loader 是什么?

vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成JavaScript模块。 vue-loader 提供了一些非常酷炫的特性:

  • ES2015默认可用;
  • 在每个 Vue 组件内支持其他的 Webpack 加载器,如用于<style>的 SASS 和用于<template> 的 Jade。
  • <style><template> 内引用的静态资源作为模块依赖项对待,并用Webpack 加载器处理。
  • 对每个组件模拟有作用域的CSS。
  • 开发阶段支持组件的热加载。 简单来说,webpack 和 vue-loader 的组合为你创作Vue应用的一个更先进、更灵巧的极其强大的前端开发模式。

Webpack 是什么?

如果你熟悉 Webpack 那就跳过这部分吧,但对于那些新手们,请看下这个简单介绍吧:

Webpack 是一个模块打包工具。在开发中,它把一堆文件中每个都作为一个模块处理,找出它们间的依赖关系,并打包成待发布的静态资源。

列举一个基本例子,设想我们有一堆的 CommonJS 的引用。它们是不能在浏览器直接运行,所以需要把它们 捆绑<script> 标记内的单一文件。Webpack 就能按照 require() 调用的依赖关系为我们做到这点。

实际上,Webpack 能做的更多,通过 "loaders" 我们能让 Webpack 按照我们想要的任何方式打包输出。例如:

  • 编译 ES2015、CoffeeScript 或 TypeScript 模块成 ES5 CommonJS 的模块;

  • 编译之前,可以通过 linter 校验源代码。

  • 编译 Jade 模板成 HTML 并内联 JavaScript 字符串。

  • 编译 SASS 文件成 CSS,然后把生成的CSS插入到 <style> 标签内,然后再转译成 JavaScript 代码段。

  • 处理在 HTML 或 CSS 文件中引用的图片文件,根据配置路径把它们移动到任意位置,根据 MD5 hash 命名。

  • 如果你学会了Webpack,就会知道它有多么强大,它非常显著地改善你前端开发的效率。它主要的缺点是配置方式有点麻烦,但是有了我这份使用指南,那使用 Webpack + Vue + vue-loader 的时候,基本上就扫清了大多数障碍了。