學了幾周的vue2.0,終於有時間去做一個應用了。
為了全面聯系相關知識,所以用到了vue-router,以及作者最新推薦的axios,組件庫用的是餓了么的mint-ui2.0。
項目構建使用官方vue-cli,由於項目較小,使用simple模板。
在2.0中路由不再使用router.start();而路由跳轉得組件也有所變化,官方文檔很全面。有一點不是很懂,就是關於路由的掛載,本來准備另外寫個router.js來掛載路由,可是不太好使,所以全都放在了main.js中。
在首頁有頁面切換但是並不涉及路由,這里使用了動態組件,並且使用緩存
<keep-alive>
<component :is="currentView" @changeView="change" :data-list="list" :currency-list="currencyList">
<!-- 非活動組件將被緩存! -->
</component>
</keep-alive>
組件的通信之前的文章說過,這里不再陳述。
axios暫時只有英文文檔https://github.com/mzabriskie/axios,不過大同小異,很快就可以入手,axios提供了一個config配置,在配置項中可以對請求的參數在請求前做統一處理,也可以處理返回數據,還有很多,都可以看文檔。這里我在寫的時候傳遞數據采用form-data形式,由於有嵌套對象,所以對外層對象格式化之前要把內層對象變為json字符串。在axios用的是qs轉化為form-data形式。
mint-ui比較簡陋,但是基本的組件都有了,其中也有些坑,比如下拉刷新,
loadTop (id){
//停止下拉刷新
that.$refs.loadmore.onTopLoaded(id);
}
停止下拉刷新時,這里的id是不用傳具體值的,組件內部有會做處理,自己只需要按官方寫上就可以了。
最后附上github地址https://github.com/Stevenzwzhai/vue-mobile-application