45 lines
1.7 KiB
Markdown
45 lines
1.7 KiB
Markdown
|
# vue-loader [](https://circleci.com/gh/vuejs/vue-loader/tree/master) [](https://ci.appveyor.com/project/yyx990803/vue-loader/branch/master)
|
||
|
|
|
||
|
|
> webpack loader for Vue Single-File Components
|
||
|
|
|
||
|
|
**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).
|
||
|
|
|
||
|
|
- [Documentation](https://vue-loader.vuejs.org)
|
||
|
|
- [Migrating from v14](https://vue-loader.vuejs.org/migrating.html)
|
||
|
|
|
||
|
|
## What is Vue Loader?
|
||
|
|
|
||
|
|
`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):
|
||
|
|
|
||
|
|
``` vue
|
||
|
|
<template>
|
||
|
|
<div class="example">{{ msg }}</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
msg: 'Hello world!'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.example {
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
|
||
|
|
There are many cool features provided by `vue-loader`:
|
||
|
|
|
||
|
|
- Allows using other webpack loaders for each part of a Vue component, for example Sass for `<style>` and Pug for `<template>`;
|
||
|
|
- Allows custom blocks in a `.vue` file that can have custom loader chains applied to them;
|
||
|
|
- Treat static assets referenced in `<style>` and `<template>` as module dependencies and handle them with webpack loaders;
|
||
|
|
- Simulate scoped CSS for each component;
|
||
|
|
- State-preserving hot-reloading during development.
|
||
|
|
|
||
|
|
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.
|