Skip to content

Update tutorial.md #313

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 17, 2016
Merged

Update tutorial.md #313

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7839fa4
Update tutorial.md
iotaweb Aug 8, 2016
e9c69ec
Merge pull request #1 from iotaweb/iotaweb-patch-1
iotaweb Aug 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 54 additions & 20 deletions docs/en/start/tutorial.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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']
}
}
```
Expand All @@ -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({
Expand Down Expand Up @@ -144,14 +155,37 @@ export default {
</script>
```

Now create a couple of basic sub-components.

`./components/ComponentA.vue`
``` html
<template>
<div>Component A</div>
</template>
```

`./components/ComponentB.vue`
``` html
<template>
<div>Component B</div>
</template>
```

Next, let's create an `index.html` that simply uses the bundled file:

``` html
<!-- index.html -->
<body>
<app></app>
<script src="build.js"></script>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js Tutorial</title>
</head>
<body>
<app></app>
<script src="build.js"></script>
</body>
</html>
```

### Running It
Expand Down