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

组件间通讯

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

父组件代码：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <input type="text" v-model="msg" placeholder="请输入信息" />
    <h2 @click="show">Essential Links</h2>
    <Child :msg="msg" @childmessage="receiveMessage"></Child>
  </div>
</template>

<script>
import Child from './Child';

export default {
  name: 'hello',
  data() {
    return {
      msg: 'Welcome to My Vue.js App'
    };
  },
  methods: {
    show() {
      alert(this.msg);
    },
    receiveMessage() {
      console.log('我是父组件，我收到信息了');
    }
  },
  components: {
    Child: Child
  }
};
</script>

子组件代码：

<template>
    <ul>
      <li v-for="item in list"><a v-bind:href="item.url" target="_blank">{{item.name}}</a></li>
      <li v-show="msg">{{msg}}</li>
      <li @click="send()">发送消息给父组件</li>
    </ul>
</template>

<script>
import data from '@/../static/data';

export default {
  name: 'child',
  data() {
    return {
      list: data.links
    };
  },
  methods: {
    send() {
      this.$emit('childmessage', '消息内容');
    }
  },
  props: {
    msg: String
  }
};
</script>

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