1.推荐学习网站：Vue.js中国
2.Demo环境搭建：
2.1环境配置
安装nodejs环境，具体内容可以百度；
新建一个文件夹：
mkdir VUE-ES6-WebPack
全局安装gulp：
npm install gulp -g
全局安装webpack:
npm install webpack -g
2.2webpack使用
在VUE-ES6-WebPack目录先新建一个webpack.config.js文件，然而，webpack是啥？
它本身是一个打包工具，可以把js、css、image打包成一个或者多个js文件，并且可以支持各种loader作为插件对不同类型的文件做转换处理。
实际上webpack就是通过插件vue-loader在加载vue类型的文件时做格式转换，把vue类型文件翻译为浏览器可以识别的js文件。粘贴以下代码：
module.exports = {
// 这是一个入口文件
entry: './resource/js/main.js',
// 编译后的文件路径
output: {
//`dist`文件夹
path: './resource/dist',
// 文件 `build.js` 即 dist/build.js
filename: 'build.js'
},
module: {
loaders: [
{
//处理ES6语法
test: /\.js$/,
//loader babel
loader: 'babel',
exclude: /node_modules/
},
{
//处理.vue文件
test: /\.vue$/,
loader: 'vue'
}
]
},
vue: {
loaders: {
js: 'babel'
}
}
}
再新建一个package.json文件用于管理依赖：
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "MonkeyWang",
"license": "ISC",
"dependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.1.2",
"babel-preset-stage-0": "^6.1.2",
"babel-runtime": "^5.8.0",
"css-loader": "^0.23.0",
"gulp": "^3.9.1",
"jade-loader": "^0.8.0",
"style-loader": "^0.13.0",
"stylus": "^0.54.5",
"stylus-loader": "^2.3.1",
"template-html-loader": "0.0.3",
"then-jade": "^2.4.3",
"vue": "^2.1.0",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.2.3",
"vue-loader": "^7.3.0",
"webpack": "^1.13.3"
}
}
新建gulpfile.js：
var webpackConfig = require('./webpack.config.js');
var gulp = require('gulp');
var webpack = require("webpack");
gulp.task("webpack", function(callback) {
var myConfig = Object.create(webpackConfig);
webpack(myConfig, function(err, stats) {
callback();
});
});
gulp.task('watchVue',function(){
gulp.watch(['resource/js/**/*.vue','resource/js/**/*.js'], ['webpack']);
});
安装依赖：
npm install
通过webpack.config.js入口配置可以知道 我们需要新建入口文件，项目目录可以参考：
新建main.js:
import是ES6的模块语法。这里为了更多的体现Vue的功能，采用了vue的单文件组件，这里定义了一个App组件：
/**
* Created by monkeywang.
*/
import Vue from '../../node_modules/vue/dist/vue'
import App from './componets/app.vue' new Vue({
el: '#app',
data: {
message: "Hello Vue"
},
components: { App }
});
新建app.vue组件：
<template>
<div class="message">{{msg}}</div>
</template> <script>
export default {
data () {
return {
msg: 'Hello Monkey Wang'
}
}
}
</script> <style lang="stylus" rel="stylesheet/stylus">
.message
color blue
</style>
当然<template></template>也可以使用jade模板引擎
<template lang="jade">
.message{{msg}}
</template> <script>
export default {
data () {
return {
msg: 'Hello Monkey Wang'
}
}
}
</script> <style lang="stylus" rel="stylesheet/stylus">
.message
color blue
</style>
非常大的一个亮点！一个vue文件，内部js、css、html就都齐了，可以作为一个完整的、自包含的组件了。非常有趣的、我个人极为欣赏的web components就在此处了。
vue文件内的语法，当然不是浏览器所可以支持的，浏览器不认识它！魔术在于webpack+vue-loader+babel 。
webpack加载vue文件首先调用vue-loader，vue-loader会调用babel转换ES6代码为ES5代码，把css和html作为模块也转换为客户端js代码。这些js代码浏览器就可以识别了。
编译Vue:
gulp webpack
监听文件变动：
gulp watchVue
一切就绪，准备开始你的Vue.js和Es6的开发体验吧！