使用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文件。粘貼如下代碼：

 1 module.exports = {
 2   // 這是一個入口文件
 3   entry: './resource/js/main.js',
 4   // 編譯後的文件路徑
 5   output: {
 6     //`dist`文件夾
 7     path: './resource/dist',
 8     // 文件 `build.js` 即 dist/build.js
 9     filename: 'build.js'
10   },
11   module: {
12     loaders: [
13       {
14         //處理ES6語法
15         test: /\.js$/,
16         //loader babel 
17         loader: 'babel',
18         exclude: /node_modules/
19       },
20       {
21        //處理.vue文件
22         test: /\.vue$/,
23         loader: 'vue'
24       }
25     ]
26   },
27   vue: {
28     loaders: {
29       js: 'babel'
30     }
31   }
32 }    

再新建一個package.json文件用於管理依賴：

 1 {
 2   "name": "test",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "main.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1"
 8   },
 9   "author": "MonkeyWang",
10   "license": "ISC",
11   "dependencies": {
12     "babel-core": "^6.1.2",
13     "babel-loader": "^6.1.0",
14     "babel-plugin-transform-runtime": "^6.1.2",
15     "babel-preset-es2015": "^6.1.2",
16     "babel-preset-stage-0": "^6.1.2",
17     "babel-runtime": "^5.8.0",
18     "css-loader": "^0.23.0",
19     "gulp": "^3.9.1",
20     "jade-loader": "^0.8.0",
21     "style-loader": "^0.13.0",
22     "stylus": "^0.54.5",
23     "stylus-loader": "^2.3.1",
24     "template-html-loader": "0.0.3",
25     "then-jade": "^2.4.3",
26     "vue": "^2.1.0",
27     "vue-hot-reload-api": "^1.2.0",
28     "vue-html-loader": "^1.2.3",
29     "vue-loader": "^7.3.0",
30     "webpack": "^1.13.3"
31   }
32 }

新建gulpfile.js：

 1 var webpackConfig = require('./webpack.config.js');
 2 var gulp = require('gulp');
 3 var webpack = require("webpack");
 4 gulp.task("webpack", function(callback) {
 5   var myConfig = Object.create(webpackConfig);
 6   webpack(myConfig, function(err, stats) {
 7       callback();
 8     });
 9 });
10 gulp.task('watchVue',function(){
11   gulp.watch(['resource/js/**/*.vue','resource/js/**/*.js'], ['webpack']);
12 });

安裝依賴：

npm install

經過webpack.config.js入口配置能夠知道 咱們須要新建入口文件，項目目錄能夠參考：

新建main.js:

import是ES6的模塊語法。這裏爲了更多的體現Vue的功能，採用了vue的單文件組件，這裏定義了一個App組件：

 1 /**
 2  * Created by monkeywang.
 3  */
 4 import Vue from '../../node_modules/vue/dist/vue'
 5 import App from './componets/app.vue'
 6 
 7 new Vue({
 8   el: '#app',
 9   data: {
10     message: "Hello Vue"
11   },
12   components: { App }
13 });

 

 

新建app.vue組件：

 1 <template>
 2   <div class="message">{{msg}}</div>
 3 </template>
 4 
 5 <script>
 6 export default {
 7   data () {
 8     return {
 9       msg: 'Hello Monkey Wang'
10     }
11   }
12 }
13 </script>
14 
15 <style lang="stylus" rel="stylesheet/stylus"> 
16 .message
17   color blue
18 </style>

固然<template></template>也能夠使用jade模板引擎

 1 <template lang="jade">
 2 .message{{msg}}
 3 </template>
 4 
 5 <script>
 6 export default {
 7   data () {
 8     return {
 9       msg: 'Hello Monkey Wang'
10     }
11   }
12 }
13 </script>
14 
15 <style lang="stylus" rel="stylesheet/stylus">
16 .message
17   color blue
18 </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的開發體驗吧！