You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

44 lines
1.7 KiB

4 years ago
  1. # vue-loader [![Build Status](https://circleci.com/gh/vuejs/vue-loader/tree/master.svg?style=shield)](https://circleci.com/gh/vuejs/vue-loader/tree/master) [![Windows Build status](https://ci.appveyor.com/api/projects/status/8cdonrkbg6m4k1tm/branch/master?svg=true)](https://ci.appveyor.com/project/yyx990803/vue-loader/branch/master)
  2. > webpack loader for Vue Single-File Components
  3. **NOTE:** The master branch now hosts the code for v15! Legacy code is now in the [v14 branch](https://github.com/vuejs/vue-loader/tree/v14).
  4. - [Documentation](https://vue-loader.vuejs.org)
  5. - [Migrating from v14](https://vue-loader.vuejs.org/migrating.html)
  6. ## What is Vue Loader?
  7. `vue-loader` is a loader for [webpack](https://webpack.js.org/) that allows you to author Vue components in a format called [Single-File Components (SFCs)](./docs/spec.md):
  8. ``` vue
  9. <template>
  10. <div class="example">{{ msg }}</div>
  11. </template>
  12. <script>
  13. export default {
  14. data () {
  15. return {
  16. msg: 'Hello world!'
  17. }
  18. }
  19. }
  20. </script>
  21. <style>
  22. .example {
  23. color: red;
  24. }
  25. </style>
  26. ```
  27. There are many cool features provided by `vue-loader`:
  28. - Allows using other webpack loaders for each part of a Vue component, for example Sass for `<style>` and Pug for `<template>`;
  29. - Allows custom blocks in a `.vue` file that can have custom loader chains applied to them;
  30. - Treat static assets referenced in `<style>` and `<template>` as module dependencies and handle them with webpack loaders;
  31. - Simulate scoped CSS for each component;
  32. - State-preserving hot-reloading during development.
  33. In a nutshell, the combination of webpack and `vue-loader` gives you a modern, flexible and extremely powerful front-end workflow for authoring Vue.js applications.