diff --git a/docs/en/start/tutorial.md b/docs/en/start/tutorial.md
index 207b8f4cd..cfb5100e1 100644
--- a/docs/en/start/tutorial.md
+++ b/docs/en/start/tutorial.md
@@ -46,28 +46,28 @@ After proper installation, your `package.json`'s `devDependencies` field should
``` json
...
"devDependencies": {
- "babel-core": "^6.3.17",
- "babel-loader": "^6.2.0",
- "babel-plugin-transform-runtime": "^6.3.13",
- "babel-preset-es2015": "^6.3.13",
- "babel-runtime": "^5.8.34",
- "css-loader": "^0.23.0",
- "vue-hot-reload-api": "^1.2.2",
- "vue-html-loader": "^1.0.0",
+ "babel-core": "^6.13.2",
+ "babel-loader": "^6.2.4",
+ "babel-plugin-transform-runtime": "^6.12.0",
+ "babel-preset-es2015": "^6.13.2",
+ "babel-runtime": "^5.8.38",
+ "css-loader": "^0.23.1",
+ "vue-hot-reload-api": "^1.3.3",
+ "vue-html-loader": "^1.2.3",
+ "vue-loader": "^7.5.3",
"vue-style-loader": "^1.0.0",
- "vue-loader": "^7.2.0",
- "webpack": "^1.12.9",
- "webpack-dev-server": "^1.14.0"
+ "webpack": "^1.13.1",
+ "webpack-dev-server": "^1.14.1"
},
"dependencies": {
- "vue": "^1.0.13"
- },
+ "vue": "^1.0.26"
+ }
...
```
### Configuring Webpack
-Here's the most basic Webpack configuration for `vue-loader`:
+Here's a basic Webpack configuration for `vue-loader`:
``` js
// webpack.config.js
@@ -86,8 +86,19 @@ module.exports = {
{
test: /\.vue$/, // a regex for matching all files that end in `.vue`
loader: 'vue' // loader to use for matched files
- }
+ },
+ {
+ // use babel-loader for *.js files
+ test: /\.js$/,
+ loader: 'babel',
+ // important: exclude files in node_modules
+ // otherwise it's going to be really slow!
+ exclude: /node_modules/
+ }
]
+ },
+ babel: {
+ presets: ['es2015']
}
}
```
@@ -108,7 +119,7 @@ The app entry point, `main.js` typically looks like this (using ES2015 syntax):
// main.js
import Vue from 'vue'
// require a *.vue component
-import App from './components/App'
+import App from './components/App.vue'
// mount a root Vue instance
new Vue({
@@ -144,14 +155,37 @@ export default {
```
+Now create a couple of basic sub-components.
+
+`./components/ComponentA.vue`
+``` html
+
+ Component A
+
+```
+
+`./components/ComponentB.vue`
+``` html
+
+ Component B
+
+```
+
Next, let's create an `index.html` that simply uses the bundled file:
``` html
-
-
-
-
+
+
+
+
+ Vue.js Tutorial
+
+
+
+
+
+
```
### Running It