You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
There are many cool features provided by `vue-loader`:
10
+
11
+
- ES2015 enabled by default;
12
+
- Allows using other Webpack loaders for each part of a Vue component, for example SASS for `<style>` and Jade for `<template>`;
13
+
- Treat static assets referenced in `<style>` and `<template>` as module dependencies and handle them with Webpack loaders;
14
+
- Can simulate scoped CSS for each component;
15
+
- Supports component hot-reloading during development.
16
+
17
+
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.
18
+
3
19
### What is Webpack?
4
20
5
-
Before we talk about `vue-loader`, let's first introduce [Webpack](http://webpack.github.io/). If you are already familiar with Webpack, feel free to skip the following explanation. But for those of you who are new to Webpack, here's a quick intro:
21
+
If you are already familiar with Webpack, feel free to skip the following explanation. But for those of you who are new to Webpack, here's a quick intro:
6
22
7
-
Webpack is a module bundler. It takes a bunch of files, treating each as a module, figuring out the dependencies between them, and bundle them into static assets that are ready for deployment.
23
+
[Webpack](http://webpack.github.io/) is a module bundler. It takes a bunch of files, treating each as a module, figuring out the dependencies between them, and bundle them into static assets that are ready for deployment.
@@ -19,19 +35,3 @@ But Webpack can do more than that. With "loaders", we can teach Webpack to trans
19
35
- Process an image file referenced in HTML or CSS, moved it to the desired destination based on the path configurations, and naming it using its md5 hash.
20
36
21
37
Webpack is so powerful that when you understand how it works, it can dramatically improve your front-end workflow. Its primary drawback is verbose and complex configuration; but with this guide you should be able to find solutions for most common issues when using Webpack with Vue.js and `vue-loader`.
22
-
23
-
### What is `vue-loader`?
24
-
25
-
`vue-loader` is a loader for Webpack that can transform Vue components written in the following format into a plain JavaScript module:
There are many cool features provided by `vue-loader`:
30
-
31
-
- ES2015 enabled by default;
32
-
- Allows using other Webpack loaders for each part of a Vue component, for example SASS for `<style>` and Jade for `<template>`;
33
-
- Treat static assets referenced in `<style>` and `<template>` as module dependencies and handle them with Webpack loaders;
34
-
- Can simulate scoped CSS for each component;
35
-
- Supports component hot-reloading during development.
36
-
37
-
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.
Copy file name to clipboardExpand all lines: docs/configurations/es2015.md
+24-4Lines changed: 24 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,13 +1,33 @@
1
-
# Configuring JavaScript in Vue Components
1
+
# ES2015 and Babel Configuration
2
2
3
-
### ES2015 by Default
3
+
`vue-loader` ships with ES2015 (aka ES6) enabled by default in `<script>` tags. All scripts inside Vue components are compiled with [Babel](https://babeljs.io/) using `babel-loader`. If you haven't picked up the new language features yet, you definitely should. Some good learning resources:
4
4
5
-
`vue-loader` ships with ES2015 enabled by default in `<script>` tags. All scripts inside Vue components are compiled with [Babel](https://babeljs.io/) using `babel-loader`.
> **Compatibility Note**: `vue-loader` 7.0+ uses Babel 6. If you need to use Babel 5 for transpiling your code, use vue-loader 6.x.
9
+
Here's a typical pattern you will see when importing other Vue components:
10
+
11
+
```html
12
+
<script>
13
+
importComponentAfrom'./ComponentA.vue'
14
+
importComponentBfrom'./ComponentB.vue'
15
+
16
+
exportdefault {
17
+
components: {
18
+
ComponentA,
19
+
ComponentB
20
+
}
21
+
}
22
+
</script>
23
+
```
24
+
25
+
We are using ES2015's Object literal shorthand here to define the child components. `{ ComponentA }` is simply shorthand for `{ ComponentA: ComponentA }`. Vue will automatically convert the key to `component-a`, so you can use the imported component in the template as `<component-a>`.
8
26
9
27
### Using Custom Babel Configuration
10
28
29
+
> **Compatibility Note**: `vue-loader` 7.0+ uses Babel 6. If you need to use Babel 5 for transpiling your code, use vue-loader 6.x.
30
+
11
31
The default Babel options used for scripts inside Vue components are:
"Hot Reload" is not simply reloading the page when you edit a file. With hot reload enabled, when you edit a `*.vue` file, all instances of that component will be swapped in **without reloading the page**. It even preserves the current state of your app and these swapped components! This dramatically improves the development experience when you are tweaking the templates or styling of your components.
The easiest setup for enabling hot reload is what we outlined in the [basic tutorial](../start/tutorial.md):
10
+
11
+
```js
12
+
// package.json
13
+
"scripts": {
14
+
"dev":"webpack-dev-server --inline --hot"
15
+
}
16
+
```
17
+
18
+
This is assuming that you are serving the same `index.html` from the root of your project. By default, Webpack dev server uses the current working directory as its content base and serves all static files in the directory.
19
+
20
+
Run `npm run dev` and the static app will be served at `http://localhost:8080`.
21
+
22
+
### Hot Reload Notes
23
+
24
+
- When a component is hot-reloaded, its current state is preserved. However, the component itself is destroyed and recreated, so all of its lifecycle hooks will be called accordingly. Make sure to properly teardown any side effects in your lifecycle hooks.
25
+
26
+
- Private state for child components of a hot-reloaded component is not guaranteed to be preserved across reloads.
27
+
28
+
- A root Vue instance or a manually mounted instance cannot be hot-reloaded. It will always force a full reload.
29
+
30
+
### Configuration Tips
31
+
32
+
- You can use the `--port` option to serve at a different port.
33
+
34
+
- If your file structure is different, you will have to configure `output.publicPath` in your Webpack config and the `--content-base` option of your webpack-dev-server command accordingly.
35
+
36
+
- If you are using the HTML5 history API (for example with `vue-router`), you will also want to add the `--history-api-fallback` option.
37
+
38
+
- Consult the [Webpack dev server documentation](https://webpack.github.io/docs/webpack-dev-server.html) for advanced topics such as combining the dev server with another backend server.
39
+
40
+
- Finally, if you have an existing [Express](http://expressjs.com/en/index.html) based Node.js backend, you can just add the [Webpack dev middleware](https://webpack.github.io/docs/webpack-dev-middleware.html) to serve your webpack bundle.
When a `<style>` tag has the `scoped` attribute, its CSS will apply to elements of the current component only. This is similar to the style encapsulation found in Shadow DOM. It comes with some caveats, but doesn't require any polyfills. It is achieved by using PostCSS to transform the following:
4
+
5
+
```html
6
+
<stylescoped>
7
+
.example {
8
+
color: red;
9
+
}
10
+
</style>
11
+
12
+
<template>
13
+
<divclass="example">hi</div>
14
+
</template>
15
+
```
16
+
17
+
Into the following:
18
+
19
+
```html
20
+
<style>
21
+
.example[_v-f3f3eg9] {
22
+
color: red;
23
+
}
24
+
</style>
25
+
26
+
<template>
27
+
<divclass="example"_v-f3f3eg9>hi</div>
28
+
</template>
29
+
```
30
+
31
+
#### Notes
32
+
33
+
1. You can include both scoped and non-scoped styles in the same component:
34
+
35
+
```html
36
+
<style>
37
+
/* global styles */
38
+
</style>
39
+
40
+
<stylescoped>
41
+
/* local styles */
42
+
</style>
43
+
```
44
+
45
+
2. A child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS.
46
+
47
+
3. Partials are not affected by scoped styles.
48
+
49
+
4.**Be careful with descendant selectors in recursive components!** For a CSS rule with the selector `.a .b`, if the element that matches `.a` contains a recursive child component, then all `.b` in that child component will be matched by the rule.
Copy file name to clipboardExpand all lines: docs/start/spec.md
+13-5Lines changed: 13 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -26,19 +26,27 @@ export default {
26
26
27
27
`vue-loader` will parse the file, extract each language block, pipe them through other loaders if necessary, and finally assemble them back into a CommonJS module whose `module.exports` is a Vue.js component options object.
28
28
29
-
`vue-loader` supports using non-default languages, such as CSS pre-processors and compile-to-HTML template languages, by specifying the `lang` attribute for a language block. The details are discussed in [Inline Loaders](../configurations/inline-loaders.md).
29
+
`vue-loader` supports using non-default languages, such as CSS pre-processors and compile-to-HTML template languages, by specifying the `lang` attribute for a language block. For example, you can use SASS for the style of your component like this:
30
30
31
-
Some more details on the language blocks:
31
+
```html
32
+
<stylelang="sass">
33
+
/* write SASS! */
34
+
</style>
35
+
```
36
+
37
+
More details can be found in [Inline Loaders](../configurations/inline-loaders.md).
38
+
39
+
### Language Blocks
32
40
33
-
### `<template>`
41
+
####`<template>`
34
42
35
43
- Default language: `html`.
36
44
37
45
- Each `*.vue` file can contain at most one `<template>` block at a time.
38
46
39
47
- Contents will be extracted as a string and used as the `template` option for the compiled Vue component.
40
48
41
-
### `<script>`
49
+
####`<script>`
42
50
43
51
- Default language: `js` (ES2015 is supported by default via Babel).
44
52
@@ -48,7 +56,7 @@ Some more details on the language blocks:
48
56
49
57
- The script must export a Vue.js component options object. Exporting an extended constructor created by `Vue.extend()` is also supported, but a plain object is preferred.
0 commit comments