Skip to content

Commit 557dcb8

Browse files
yyx990803yyx990803
committed
es2015 by default
1 parent 1e520c6 commit 557dcb8

File tree

3 files changed

+78
-36
lines changed

3 files changed

+78
-36
lines changed

‎README.md

Lines changed: 64 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,39 @@ It allows you to write your components in this format:
66

77
``` html
88
// app.vue
9-
<style>
10-
.red {
11-
color: #f00;
12-
}
13-
</style>
14-
159
<template>
1610
<h1 class="red">{{msg}}</h1>
1711
</template>
1812

1913
<script>
20-
module.exports = {
21-
data: function () {
22-
return {
23-
msg: 'Hello world!'
24-
}
14+
export default {
15+
data () {
16+
return {
17+
msg: 'Hello world!'
2518
}
2619
}
20+
}
2721
</script>
22+
23+
<style>
24+
.red {
25+
color: #f00;
26+
}
27+
</style>
2828
```
2929

3030
## Table of Contents
3131

3232

3333
- [Basic Usage](#basic-usage)
34-
- [Pre-Processors](#pre-processors)
34+
- [ES2015 by Default](#es2015-by-default)
35+
- [CSS Pre-Processors](#css-pre-processors)
3536
- [Template Pre-Processors](#template-pre-processors)
3637
- [Style Imports](#style-imports)
3738
- [Asset URL Handling](#asset-url-handling)
3839
- [Scoped CSS](#scoped-css)
3940
- [Hot Reload](#hot-reload)
4041
- [Advanced Loader Configuration](#advanced-loader-configuration)
41-
- [ES6 with Babel Example](#example-using-es6-with-babel)
42-
- [Extract CSS Example](#example-extracting-css-into-a-single-file)
4342
- [Example Project](https://github.com/vuejs/vue-loader-example)
4443

4544
## Basic Usage
@@ -66,11 +65,56 @@ And this is all you need to do in your main entry file:
6665
``` js
6766
// main.js
6867
var Vue = require('vue')
69-
var appOptions = require('./app.vue')
70-
var app = new Vue(appOptions).$mount('#app')
68+
var App = require('./app.vue')
69+
70+
new Vue({
71+
el: 'body',
72+
components: {
73+
app: App
74+
}
75+
})
76+
```
77+
78+
In your HTML:
79+
80+
``` html
81+
<body>
82+
<app></app>
83+
<script src="build.js"></script>
84+
</body>
85+
```
86+
87+
## ES2015 by Default
88+
89+
`vue-loader` automatically applies Babel transforms to the JavaScript inside `*.vue` components. Write ES2015 today!
90+
91+
The default Babel options used for Vue.js components are:
92+
93+
``` js
94+
{
95+
// use babel-runtime library for common helpers
96+
optional: ['runtime'],
97+
// use loose mode for faster builds
98+
loose: 'all',
99+
// disable non-standard stuff (e.g. JSX)
100+
nonStandard: false
101+
}
102+
```
103+
104+
If you wish to mofidy this, you can add a `babel` field in your webpack config, which will be merged with the default options. For example:
105+
106+
``` js
107+
// webpack.config.js
108+
module.exports = {
109+
// other configs...
110+
babel: {
111+
// enable stage 0 transforms
112+
stage: 0
113+
}
114+
}
71115
```
72116

73-
## Pre-Processors
117+
## CSS Pre-Processors
74118

75119
`vue-loader` allows you to use other Webpack loaders to pre-process the different parts inside your `*.vue` components. Just specify the loader to use with the `lang` attribute (you also need to install the loader, obviously):
76120

@@ -204,9 +248,7 @@ For a complete example with hot reloading in action, see [vue-hackernews](https:
204248
By default, `vue-loader` will try to use the loader with the same name as
205249
the `lang` attribute, but you can configure which loader should be used.
206250

207-
#### Example: Using ES6 with Babel
208-
209-
To apply Babel transforms to all your JavaScript, use this Webpack config:
251+
#### Example: Use CoffeeScript for all `<script>` tags
210252

211253
``` js
212254
var vue = require('vue-loader')
@@ -218,23 +260,15 @@ module.exports = {
218260
{
219261
test: /\.vue$/,
220262
loader: vue.withLoaders({
221-
// apply babel transform to all javascript
222-
// inside *.vue files.
223-
js: 'babel?optional[]=runtime'
263+
js: 'coffee'
224264
})
225265
}
226266
]
227267
},
228-
devtool: 'source-map'
268+
devtool: '#source-map'
229269
}
230270
```
231271

232-
Some explanantions:
233-
234-
1. Here `js` is the default language for `<script>` blocks.
235-
236-
2. The `?optional[]=runtime` query string passed to the loader. This instructs Babel to use helper functions from the `babel-runtime` NPM package instead of injecting the helpers into every single file. You'll want this most of the time.
237-
238272
#### Example: Extracting CSS into a Single File
239273

240274
To extract out the generated css into a separate file,

‎lib/loader.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@ var defaultLang = {
88
script: 'js'
99
}
1010

11+
var defaultLoaders = {
12+
html: 'vue-html',
13+
css: 'style!css',
14+
js: 'babel?optional[]=runtime&loose=all&nonStandard=false'
15+
}
16+
1117
var rewriters = {
1218
template: require.resolve('./template-rewriter') + '!',
1319
style: require.resolve('./style-rewriter') + '!'
@@ -23,9 +29,9 @@ module.exports = function (content) {
2329
// check if there are custom loaders specified with
2430
// vueLoader.withLoaders(), otherwise use defaults
2531
var loaders = loaderUtils.parseQuery(this.query)
26-
loaders.html = loaders.html || 'vue-html'
27-
loaders.css = loaders.css || 'style!css'
28-
loaders.js = loaders.js || ''
32+
loaders.html = loaders.html || defaultLoaders.html
33+
loaders.css = loaders.css || defaultLoaders.css
34+
loaders.js = loaders.js || defaultLoaders.js
2935

3036
function getRequire (type, part, index, scoped) {
3137
return 'require(' +

‎package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,11 @@
3131
"vue-hot-reload-api": "^1.2.0"
3232
},
3333
"peerDependencies": {
34-
"vue-html-loader": "*",
35-
"css-loader": "*",
36-
"style-loader": "*"
34+
"vue-html-loader": "^1.0.0",
35+
"css-loader": "^0.21.0",
36+
"style-loader": "^0.13.0",
37+
"babel-loader": "^5.3.2",
38+
"babel-runtime": "^5.8.25"
3739
},
3840
"devDependencies": {
3941
"babel-core": "^5.8.25",

0 commit comments

Comments
 (0)