我的開源中國博客：https://my.oschina.net/keysITer/blog/834287
一直對vue很感興趣，最近使用vue2.0開發了高仿餓了么點餐系統來練練手，不得不說vue真是一個很不錯的框架，但是也遇到過一些坑，在這里和大家分享一下
vue2.0、vuex、vue-router、axios、webpack、eslint、better-scroll
部分細節還在開發中，感興趣的可以加入進來，覺得不錯的給個star
GitHub地址：https://github.com/SimonZhangITer/VueDemo_Sell_Eleme
## 演示在線演示戳我
掃二維碼在手機上查看效果更好
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代碼寫在一個文件里面，這樣既方便編寫，也方便管理和修改
在vue1.x的時候，vue的官方推薦HTTP請求工具是vue-resource，但是在vue2.0的時候將推薦工具改成了axios。
使用方式都差不多，但需要注意的是：接口返回的res并不直接是返回的數據，而是經過axios本身處理過的json對象。真正的數據在res.data里：
axios.get(url).then((res)=>{ this.data = res.data})vue提供了一個數據管理工具vuex，有點類似于angular中factory和service，可以進行數據上的通信。 比如存儲一些公共變量或者是不同組件間的數據處理等。
這個有一些高級用法在這里不細說，想要了解的可以去官方文檔看，有中文版本。
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } }})vue-router是vue的路由系統，可以用來創建單頁應用?；舅枷胧窃谥黜撁嬷幸霕撕?，然后定義路由，把router掛在到app上，然后把各個子頁面渲染到view里面。使用起來還是很方便的， 跳轉頁面只需要
router.push('test')vue2.0廢除了v-el指令，所有的節點指令修改為ref，然后通過ref來獲取元素節點，如
<div ref="testHook">test</div>...js codethis.$ref.testHook一。如果是和子組件通信，則使用ref就可以實現，如：
<test ref="testHook"></test>...js codethis.$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）
GitHub地址：https://github.com/SimonZhangITer/VueDemo_Sell_Eleme
新聞熱點
疑難解答
