使用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"

   }

 }

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

巴特西

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

1.推荐学习网站：Vue.js中国

2.Demo环境搭建：

2.1环境配置

2.2webpack使用

最新文章

热门文章