Vue.js Tutorial

From 7839fa4a4980e443770b71cd6c3c95b5907dd041 Mon Sep 17 00:00:00 2001 From: Rob Anderson Date: Mon, 8 Aug 2016 12:44:33 +1200 Subject: [PATCH] Update tutorial.md Suggested changes to the tutorial for anybody trying to get it to work using the code examples. This was to overcome an error: Unexpected token import in build.js, i.e. import Vue from 'vue' in main.js line 4. Please bear in mind I am completely new to vue.js and vue-loader, so may have been missing something. --- docs/en/start/tutorial.md | 74 ++++++++++++++++++++++++++++----------- 1 file changed, 54 insertions(+), 20 deletions(-) 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 + +``` + +`./components/ComponentB.vue` +``` html + +``` + Next, let's create an `index.html` that simply uses the bundled file: ``` html - - - - + + + + + Vue.js Tutorial + + + + + + ``` ### Running It