Vue2+Webpack2 从零开始到上手

发展历程

这几年前端发展迅速，几乎变成了互联网科技发展的一种强有力的附属物，一定程度上反映着互联网发展的轨迹或者说紧随其后。
在这里，我简单说一下我个人的理解，如有不对，勿喷，谢谢。

i: 该阶段，用户访问内容，全部由服务器渲染输出，在这阶段，前端工程师基本也就没什么事情，重要性跟后端工程师没法拼。

ii: 该阶段，html，css和js以静态文件数据存在，前端工程师就基本有活干，同时后端工程师也开始减负。

iii: ajax的发明，让js担当更多的责任
iv: js的模块化规范开始广泛讨论，有AMD，CMD两种，AMD以RequireJS领头，CMD以SeaJS领头（同时node的发明，js开始进入后端开发领域，以commonJS为规范）

简介

随着js的发展或互联网产品用户体验概念的深入，前端越来越受程序员及公司们关注。组件化的系统架构思想，本以往所有的系统架构思想都只会出现在后端，可当下，前端工作或系统越来越庞大，越显臃肿。而组件化中，首当其冲的是angularJS，reactJs和vue。而angularJS对我来说，它具备着很多后端开发的思想，带进了很多新概念，入门有点难度，所以，我不太建议；而reactJS稍微有了解，但是render部分似乎并没有vue做得简单，明了。所以，本文之后介绍vue2+webpack2的组件开发。

VueJS

VueJS是构建用户界面的js框架。简答使用，可以直接下载官方的vue.js库文件，类似jquery库一样，放到html中去，使用类似var vue=new Vue() 语法即可使用vue框架的特性，如双向绑定。单单双向绑定就很值得大家去尝试，极大提高前端的开发效率，甚至我对我以往html的拼接方式，jquery获取各个输入框值等这些做法不忍回首。
详情可见：介绍-Vue.js

webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。详情可见：从0到1搭建webpack2+vue2自定义模板详细教程

上述图片也许不太容易理解，我根据目前自己的理解做了一张图解，如下：

环境搭建

我极力推荐Vue-cli脚手架方式来初始化项目，因为当你发现你上网找到的文章例子运行不了时候（可能vue或webpack版本不符或loaders没加载完全），那已经浪费不少时间。具体步骤可见：vue2 webpack2 脚手架 详解使用vue脚手架工具搭建vue-webpack项目

Tips

eslint： 通过文章中的操作，已经可以运行vue2+webpack2的项目，但是如果修改里面某一行或增加一个简单v-on:click操作，似乎困难重重。我简单增加了一个操作，本以为会成功运行，但是没想到会出现类似编译错误问题。后来才发现，原来忽视了eslint，至于eslint是什么，大家可点击查看：ESLint入坑

组件间通信

在整个前端系统来说，组件间通信肯定是必不可少的一部分。如搜索页面，顶部是搜索框的组件，下面是搜索到的内容列表组件；再如一个表格内容中，有针对某个条目进行删除，删除后表格头部更新条目数量。
在组件通信中，父组件->子组件通过属性参数进行传递，而子组件->父组件则通过事件冒泡进行通知。如下图：

父组件代码：

子组件代码：

以上解决了父组件->子组件的消息传递，子组件->父组件的事件传递，但是如果是祖父组件到子组件，那么还需要经过父组件？兄弟组件的消息传递又该会是怎么样？敬请后续文章。