摘要：線上另加入了排行榜功能，如需查看源碼的，請切換到分支整個項目結構清晰，尤其單文件組件的表現力尤為突出，使得每個組件的邏輯都沒有過于復雜，而且在的統籌下，的單向數據流模式使得所有的變化都在可控制可預期的范圍內。

2016注定不是個平凡年，無論是中秋節問世的angular2，還是全面走向穩定的React，都免不了面對另一個競爭對手vue2。喜歡vue在設計思路上的“先進性”(原諒我用了這么一個詞)，敬佩作者尤小右本人的“國際范兒”，使得各框架之間的競爭略顯妖嬈(雖然從已存在問題的解決方案上看，各框架都有部分相似之處)。

因為vue2已經正式release，本教程做了一些修改(針對vue2)

所謂設計上的先進性，以下幾點是我比較喜歡的:

不同于AngularJS里基于digest cycle的臟檢查機制，執行效率更高。內部基于Object.defineProperty特性做漂亮的hack實現(而且不支持IE8，大快人心)。更多細節，看這里

因為這個機制的出現，我們再也也不需要顧慮雙向綁定的效率問題；亦或是像React那樣搞什么immutability(對這塊感興趣可以看(譯)JavaScript中的不可變性)，因為Object.definePropery洞悉你的一切，媽媽再也不用擔心你忘記實現shouldComponentUpdate了.

到這里你可能還不能體會vue的精妙，是時候來個栗子了！

假設我們有一個字段fullName，它依賴其他字段的變化，在AngularJS里，我們或許會用命令式這樣寫道：

$scope.user = {
  firstName: "",
  lastName: ""
}
      
$scope.fullName = ""

//告訴程序主動“監視”user的變化，然后修改fullName的值
$scope.$watch("user", function(user) {
  $scope.fullName = user.firstName + " " + user.lastName
}, true)

若是vue，改用聲明式，寫法如何？

data() {
  return {
    firstName: "",
    lastName: ""
  }
},
computed: {
  fullName() {
    // 生命一個fullName的計算屬性，并告訴程序它是由firstName和lastName組成。
    // 至于具體是什么時候/如何完成數據拼裝的，你就不用管了
    return this.firstName + " " + this.lastName
  }
}

相對于AngularJS里命令式的告訴框架，fullName一定要監視user對象的變化(注意里面還是deepWatch，效率更差)，并且隨之改變；vue以數據驅動為本質，聲明式的定義fullName就是由firstName和lastName組成，無論怎么變化，都是如此。這種寫法，更優雅有沒有？

如果有興趣看看用angular2如何實現相同的小游戲，走這里

還在為一堆代碼文件，到底哪個是JavaScript邏輯部分、哪個是css/less/sass樣式部分、哪個是html/template模板部分；他們又該如何組織，怎么“編譯”、如何發布？

有了單文件組件范式，配合webpack4(雖然文檔依舊WIP)，組件自包含，完美、沒毛病！還有強大的開發工具支持，看著都賞心悅目，來個效果圖：

用了這么多版面，說了一些好處，那么當我們真正需要面對一個應用，需要上規模開發時，vue又能帶來怎樣的變化呢？憋了幾天，我想今天就寫一個小游戲來試試整體感覺，先來看看我們今天的目標:

完整源碼在這里：vue-memory-game

看了效果，知道源碼在哪里了，那我們繼續？

Break the UI into a component hierarchy，相信寫過React的朋友對這句話都不陌生，在使用一種基于組件開發的模式時，最先考慮，而且也尤為重要的一件事，就是組件分解。下面我們看看組件分解示意圖：

我們根據分解圖，先把未來要實現的組件挨個兒列出來：

Game, 最外層的游戲面板

Dashboard, 上面的logo，游戲進度，最佳戰績的容器

Logo，左上角的logo

MatchInfo, 正中上方的游戲進度組件

Score, 右上角的最佳戰績組件

Chessboard, 正中大棋盤

Card, 中間那十六個棋牌

PlayStatus, 最下方的游戲狀態信息欄

#創建目錄
mkdir vue-memory-game

#創建一個package.json
npm init

#進入目錄
cd vue-memory-game

#安裝開發環境依賴
npm install --save-dev babel-core babel-loader babel-plugin-transform-object-rest-spread babel-plugin-transform-runtime babel-preset-env css-loader file-loader html-webpack-plugin style-loader vue-hot-reload-api vue-html-loader vue-loader vue-style-loader vue-template-compiler webpack webpack-cli webpack-dev-server webpack-merge

#安裝運行時依賴
npm install vue vuex

這里開發環境依賴內容有點多，但不要害怕，大部分時候你不太關心里面的東西(當然，如果你要進階，你要升職、加薪、迎娶白富美，那你最好搞清楚他們每一項都是什么東西)

另外在運行時依賴里不僅看到了vue，還看到了vuex。這又是個什么鬼？先不要慌，也別急著罵娘，我們來考慮一個問題，試想下，整個游戲按照上面分解的組件開發時，各個組件之間想必在邏輯上多少是有關系的，譬如：Card在Chessboard中的翻牌、配對，當然會影響到上方的Dashboard和下面的PlayStatus。那么“通信”，就成了待解決問題。

以前我們試圖用事件廣播來做，但隨之而來的問題是，在應用不斷的擴展、變化中，事件變得越來越復雜，越來越不可預料，以至于越來越難調試，越來越難追蹤錯誤的root cause。這當然不是我們想要的，我們希望應用的各個部分都易維護、可擴展、好調試、能預測。

于是一種叫單向數據流的方式就冒了出來，用過React的人想必也不陌生，各組件的間的數據走向永遠是單向、可預期的：

這當然也不是facebook的專利，都說vue牛逼了，那一定也有一個單向數據流的實現，就是我們這里用到的vuex。

vue-memory-game
├── css
│?? └── main.css
├── img
│?? ├── ...
│?? └── zeppelin.png
├── js
│?? ├── components
│?? │?? ├── card
│?? │?? │?? ├── Card.vue
│?? │?? │?? └── Chessboard.vue
│?? │?? ├── dashboard
│?? │?? │?? ├── Dashboard.vue
│?? │?? │?? ├── Logo.vue
│?? │?? │?? ├── MatchInfo.vue
│?? │?? │?? └── Score.vue
│?? │?? ├── footer
│?? │?? │   └── PlayStatus.vue
│?? │?? │
│?? │?? └── Game.vue
│?? │
│?? ├── vuex
│?? │   ├── actions
│?? │   │?? └── index.js
│?? │   ├── getters
│?? │   │?? └── index.js
│?? │   ├── mutations
│?? │   │?? └── index.js
│?? │   └── store
│?? │       ├── index.js
│?? │       └── statusEnum.js
│?? │
│?? └── index.js
│
├── index.html_vm
├── package.json
├── webpack.config.js
└── webpack.config.prod.js

看了上面的文件目錄結構圖，要配置webpack，已經沒有難度了，直接上代碼：

const { resolve, join } = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  mode: "development",
  entry: {
    index: "./js/index.js"
  },
  output: {
    filename: "[name].[hash].bundle.js",
    path: resolve(__dirname, "build")
  },
  devtool: "#source-map",
  devServer: {
    contentBase: join(__dirname, "build"),
    compress: false,
    port: 8080,
    host: "0.0.0.0",
    hot: true,
    inline: true
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        use: [
          {
            loader: "vue-loader"
          }
        ],
        exclude: /node_modules/
      },
      {
        test: /.js$/,
        use: ["babel-loader"],
        exclude: /node_modules/
      },
      {
        test: /.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /.(png)$/,
        use: ["file-loader"]
      }
    ]
  },
  resolve: {
    extensions: [".js", ".vue"]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      inject: "body",
      template: "index.html_vm",
      favicon: "img/favicon.ico",
      hash: false
    })
  ]
}

我在這兒沒有過多的涉及webpack的基本使用，反正webpack4的文檔還在進行中，翻源碼去吧(~逃)
這里我們用了html-webpack-plugin里自動將編譯后的bundle注入index.html_vm里，并生成最終的html。所以index.html_vm作為模板，我們也要先寫出來：

touch index.html_vm

再將如下內容填入其中：

在webpack.config.js里，我們看到了

entry: {
  index: "./js/index.js"
}

這也是本章整個vue應用的入口:

// 引入一些初始化的簡單樣式
import "../css/main.css"
// 引入vue庫
import Vue from "vue"
// 引入本游戲核心入口組件
import Game from "./components/Game"
// 引入狀態管理機
import store from "./vuex/store"

/* eslint-disable no-new */
new Vue({
  el: "#application",
  render(h) {
    return h(Game)
  },
  store
})

本章代碼本采用ES2015語法編寫，譬如：components: {Game}，相當于components: {Game: Game}，這是enhanced-object-literals
我在這里沒有過多介紹vue2的基本使用，不過我盡量列出可能涉及的知識點，便于學習

上面js/index.js里第一行就引用了全局初始化樣式的css/main.css，我們就先把它寫了吧：

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

本章大量使用flexbox來布局排版，不了解的可以學習一下(雖然我也是半吊子)

這段css/main.css之所以能被加載成功，多虧了webpack.config.js中的這段配置：

{
  test: /.css$/,
  use: ["style-loader", "css-loader"]
},

得利于css-loader和style-loader，上述css可以成功從index.js文件里引入，并被webpack處理到dom的

單文件組件的魅力，到這里終于可以瞄一眼了，第一部分是模板，第二部分是邏輯，第三部分是樣式。

這里

這里vuex/actions/index.js和vuex/store/statusEnum.js，我就不分別在這里寫源碼了，內容很簡單，官網基本教程讀完理解無障礙。

線上demo另加入了排行榜功能，如需查看源碼的，請git checkout stage-1切換到stage-1分支