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>

以上解決了父組件->子組件的消息傳遞，子組件->父組件的事件傳遞，可是若是是祖父組件到子組件，那麼還須要通過父組件？兄弟組件的消息傳遞又該會是怎麼樣？敬請後續文章。