介绍

版本说明

这份文档是为 Vue Loader v15 及以上版本撰写的。如果你正在从 v14 或更早的版本往这里迁移,请查阅迁移指南。如果你正在使用老版本,其对应的文档在此

Vue Loader 是什么?

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

  1. <template>
  2. <div class="example">{{ msg }}</div>
  3. </template>
  4. <script>
  5. export default {
  6. data () {
  7. return {
  8. msg: 'Hello world!'
  9. }
  10. }
  11. }
  12. </script>
  13. <style>
  14. .example {
  15. color: red;
  16. }
  17. </style>

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

  • 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug;
  • 允许在一个 .vue 文件中使用自定义块,并对其运用自定义的 loader 链;
  • 使用 webpack loader 将 <style><template> 中引用的资源当作模块依赖来处理;
  • 为每个组件模拟出 scoped CSS;
  • 在开发过程中使用热重载来保持状态。
    简而言之,webpack 和 Vue Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流,来帮助撰写 Vue.js 应用。

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