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的开发体验吧!  

  

  

使用ES6+Vue+webpack+gulp构建新一代Web应用的更多相关文章

  1. 2.4 webpack + gulp 构建完整前端工作流

    在前面的两个小节中已经完整的讲了 webpack 和 gulp 相关的内容,本小节中将会结合二者构建一个完整的前端工作流,内容目录为: 前端工程结构和目标 前端工程目录结构 gulp clean gu ...

  2. vue + webpack + gulp 简单环境 搭建

    一.物料准备 废话不多说,直接上 package.json { "name": "vwp", "version": "1.0.0& ...

  3. ES6+Vue+webpack项目,在ie11中请求后台接口后数据更新,但是页面没有刷新?

    因为ie11下,如果GET请求请求相同的URL,默认会使用之前请求来的缓存数据,而不会去请求接口获取最新数据,我用的解决方法是在每个请求发送前,拦截请求并给请求接口的URL后加一个时间戳(new Da ...

  4. Vue ES6 Jade Scss Webpack Gulp

    一直以来非常庆幸曾经有翻过<代码大全2>:这使我崎岖编程之路少了很多不必要的坎坷.它在软件工艺的话题中有写到一篇:"首先是为人写程序,其次才是机器(Write Programs ...

  5. 从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(一)

    摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJ ...

  6. 【原创】从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(二)

    摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着 ...

  7. 【原创】从零开始搭建Electron+Vue+Webpack项目框架(六)Electron打包,同时构建客户端和web端

    导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...

  8. 仿async/await(一)and Gulp:新一代前端构建利器

    NET 4.5的async/await真是个神奇的东西,巧妙异常以致我不禁对其实现充满好奇,但一直难以窥探其门径.不意间读了此篇强文<Asynchronous Programming in C# ...

  9. Vue实战Vue-cli项目构建(Vue+webpack系列之一)

    用Vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个Vue+webpack系列,先从项目构建说起--vue-cli. 由于是Vue+webpack这里就不赘述git那些东西,默 ...

随机推荐

  1. date命令使用文档.txt

    date命令的帮助信息 [root@localhost source]# date --help用法:date [选项]... [+格式] 或:date [-u|--utc|--universal] ...

  2. Ruby:Nokogiri

    阅读推荐: Nokogiri的用法我推荐三篇非常给力的文章: http://ruby.bastardsbook.com/chapters/html-parsing/ http://ruby.basta ...

  3. pcm原始数据绘制

    最近帮别人做了个东西,这里分享一下pcm原始数据绘图的思路 1.pcm数据采样位数,根据采样位数选取适合自己绘图的采样点的数量 2.计算出最大最小的的采样点的值差 3.根据要显示pcm数据的控件宽高, ...

  4. Javac中的nullcheck

    Javac会通过调用引用对象的getClass()来判空,主要有几处: (1)JCMethodInvocation()方法中,如下实例: class A{ class B{} } public cla ...

  5. Python -- 多媒体编程 -- 音乐播放

    使用win32库的WMPlayer.OCX开发一个简易的音乐播放器 import sys from PyQt4 import QtGui, QtCore from win32com.client im ...

  6. PHP多进程系列笔记(一)

    本系列文章将向大家讲解pcntl_*系列函数,从而更深入的理解进程相关知识. PCNTL在PHP中进程控制支持默认是关闭的.您需要使用 --enable-pcntl 配置选项重新编译PHP的 CGI或 ...

  7. j2ee高级开发技术课程第七周

    来源:https://baike.baidu.com/item/JSON/2462549?fr=aladdin JSON(JavaScript Object Notation, JS 对象标记) 是一 ...

  8. python3 get post请求Yunba RESTful API

    一:主要内容 获取云巴appkey和seckey 状态回复说明 get请求 post请求 二:获取云巴appkey和seckey 1. 注册云巴 在云巴官网,注册一个云巴账号,官网地址:https:/ ...

  9. es6学习笔记11--Proxy和Reflect

    Proxy概述 Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程. Proxy可以理解成,在目标对象之前 ...

  10. jQuery获取动态产生的html内标签或元素

    下午分享<MVC编辑状态两个DropDownList联动>http://www.cnblogs.com/insus/p/3426563.html 不久,马上有网友问及三级联动的例子.Ins ...