一直對vue很感興趣，最近使用vue2.0開發了高仿餓了麼點餐系統來練練手，不得不說vue真是一個很不錯的框架，但是也遇到過一些坑，在這裡和大家分享一下

餓了麼點餐系統

vue2.0、vuex、vue-router、axios、webpack、eslint、better-scroll

部分細節還在開發中，感興趣的可以加入進來，覺得不錯的給個star

專案截圖

構建

vue有自己的腳手架構建工具vue-cli,使用起來非常方便，使用webpack來整合各種開發便捷工具，比如：

• 程式碼熱更新，修改程式碼之後網頁無重新整理改變，對前端開發來說非常的方便
• PostCss，再也不用去管相容性的問題了，只針對chrome寫css程式碼，會自動編譯生成支援多款瀏覽器的css程式碼
• Eslint，統一程式碼風格，規避低階錯誤，對於有程式碼潔癖的人來說是絕對的好東西，不過有些地方的程式碼校驗有時候也挺麻煩的-.-
• bable，ES2015出來已經有一段時間了，但是不少瀏覽器還沒有相容ES6.有了bable，放心使用ES6語法，它會自動轉義成ES5語法。
• Stylus，類似於SASS/SCSS，但是可以不寫{}和“：”，使用起來還是很方便的
• …

除此之外，vue-cli已經使用node配置了一套本地伺服器和安裝命令等，本地執行和打包只需要一個命令就可以搞定，非常的方便

開發

vue非常好的融合了react的元件化思想和angular的指令思想。
一個vue的元件將HTML、CSS、JS程式碼寫在一個檔案裡面，這樣既方便編寫，也方便管理和修改

Axios

在vue1.x的時候，vue的官方推薦HTTP請求工具是vue-resource，但是在vue2.0的時候將推薦工具改成了axios。

使用方式都差不多，但需要注意的是：介面返回的res並不直接是返回的資料，而是經過axios本身處理過的json物件。真正的資料在res.data裡：

axios.get(url).then((res)=>{
  this.data = res.data
})
 

Vuex

vue提供了一個數據管理工具vuex，有點類似於angular中factory和service，可以進行資料上的通訊。
比如儲存一些公共變數或者是不同元件間的資料處理等。

這個有一些高階用法在這裡不細說，想要了解的可以去官方文件看，有中文版本。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

Vue-Router

vue-router是vue的路由系統，可以用來建立單頁應用。基本思想是在主頁面中引入標籤，然後定義路由，把router掛在到app上，然後把各個子頁面渲染到view裡面。使用起來還是很方便的，
跳轉頁面只需要

router.push('test')

獲取元素節點

vue2.0廢除了v-el指令，所有的節點指令修改為ref，然後通過ref來獲取元素節點，如

<div ref="testHook">test</div>
...js code
this.$ref.testHook

元件間的通訊

一。如果是和子元件通訊，則使用ref就可以實現，如：

<test ref="testHook"></test>
...js code
this.$ref.testHook.add() //呼叫test子元件的add方法

二。使用emit來發送廣播

vue2提供了一套廣播機制，即一邊傳送廣播，一邊接收廣播來執行相應操作。使用方法如下：

比如想要給test元件傳送一個“相加”廣播:

export default {
  method:{
    click(){
      Vue.$emit('add',{}) //第二個引數可作為傳遞資料傳送到監聽埠，不需要則傳空物件
    }
  }
}

那麼test元件中就需要監聽，在created方法裡寫

export default {
  created(){
   Vue.$on('add',this.add)
  },
  method:{
    add(){
      this.count++
    }
  }
}

除了以上總結的這點小的知識點以外，還有很多vue的知識想要和大家分享，以後會陸續寫出來，大家感興趣的也可以來我的GitHub一起來寫這個專案（覺得不錯的給個star Hah）