使用ES6+Vue+webpack+gulp构建新一代Web应用

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"
   }
 }

 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

 /**
  * 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 }
 });

<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 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>