vue從建立到完整的餓了麼（1）建立（包含vuex）

說明

1.項目準備用蒼渡大神的elm項目，Github地址
2.node版本 6.10.3，用的windows，工具用的sublime
3.下一章--vue從建立到完整的餓了麼（2）路由

---

開始

1. cmd 進入想要建立的目錄。
2. vue init webpack elm elm是項目名稱（確保安裝了node，vue-cli）。
3. cmd 輸入cd elm 進入vue文件。
4. npm install（下載配置文件）。
5. npm install vue-router vue-resource --save（安裝 vue 路由模塊 vue-router 和網絡請求模塊 vue-resource）。
6. 項目目錄如圖

1. 打開config目錄中的index文件，將port：3000改成port：1999（修改項目端口，以避免與其它文件衝突）。
2. cmd輸入npm run dev 瀏覽器彈出新頁面顯示一個VUE的大logo表示建立成功，不彈出頁面輸入localhost:1999也能夠訪問。
3. 發現這個項目還用了一個vuex，沒用過，先安上再說cmd輸入npm install --save vuex（cmd先把vue服務關掉ctrl+c）。

4. 看了看vuex文檔，以爲若是把一個個vue組件當成一個個獨立閉包函數，那vuex就至關於一個全局的json，裏面有幾個key：

   State：用來存放變量，
      Mutations：用來存放函數（同步），
      Getters：State的計算屬性，也是存放函數，可是當state屬性改變時，Getters的返回值也會隨之改變，
      Action：函數（異步）

在任意一個組件中均可以調用vuex（這是我目前對vuex的認識）。

1. 發現項目是把vuex放到src文件夾的store文件夾裏，我們也來。在src中新建文件夾store，在store文件夾中新建文件index.js並輸入幾行代碼，結果如圖。

1. vuex一個屬性一個文件，再把全部屬性匯聚的index裏，掛到Store下輸出
2. 新建getters.js,actions.js,mutations.js文件,代碼全都同樣如圖
3. 如今vuex能夠輸出了，可是在哪裏引用呢？打開main.js,修改後如圖
4. cmd輸入npm run dev後顯示下圖則表示正常
5. 準備工做先作這麼多，下面準備寫頁面