Vue2.0簡易案例

效果圖:

Vue2.0簡易案例

Vue2.0簡易案例

Vue2.0簡易案例

使用微信或手機瀏覽器掃描二維碼預覽

二維碼

在線地址: https://www.huzerui.com/vue2.0-democss

源碼:https://github.com/alex1504/vue2.0-demovue

說明:

2017.1.13 主導航電影、音樂、圖書、圖片使用router跳轉電影模塊使用tab菜單切換各個列表模塊下拉滾動加載圖片模塊使用flex佈局實現瀑布流效果
2017.1.17 增長了電影詳情模塊,優化路由跳轉
2017.1.18 增長了登陸、登出模塊,使用leancloud數據存儲功能
2017.1.19 增長了圖片詳情模塊,增長了新的生產依賴vue-touch
2017.2.6 新增用戶註冊模塊node

使用vue-cli構建

生產環境依賴包:   

"axios": "^0.15.3",  //發送請求   
 "vue": "^2.1.0",     
"vue-material": "^0.5.2", //谷歌material概念的Ui框架   
 "vue-router": "^2.1.1",   //路由   
 "vue-swipe": "^2.0.2",   //slide插件   
 "vuex": "^2.1.1"            // 狀態管理   
 "vue-touch": "^2.0.0-beta.3",  //觸摸插件

開發依賴

"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"mockjs": "^1.0.1-beta3",
"node-sass": "^4.2.0",
"sass": "^0.5.0",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"vue-loader": "^10.0.0",
"vue-style-loader": "^1.0.0",
"vue-template-compiler": "^2.1.0",
"webpack": "^2.1.0-beta.25",
"webpack-dev-server": "^2.1.0-beta.9"

使用了幾個開放的接口

各個接口地址請在components中各個list組件的loadMore方法中查看webpack

  • 豆瓣- 電影  圖書   (注意:豆瓣的接口有每分鐘40次的限制,超過調用貌似會凍結幾分鐘,因此電影模塊和圖書模塊有時候會出現沒有東西的狀況)ios

  • 網易- 音樂列表  音樂搜索git

  • gankio- 福利圖github

其餘說明:

  1. Vue-material組件中的spinner(加載組件)在安卓機下面的瀏覽器有些沒法正常顯示(除了chrome),ios下面測試正常,微信中體驗效果較好web

  2. 因爲衆所周知的緣由,谷歌字體只能過牆後才能被正常加載,而Vue-material中的原生icon使用了谷歌字體,在這個案例中改成使用iconfontvue-router

  3. 代碼存在github,國內訪問速度沒那麼快,初次加載較慢請耐心等待。vuex

  4. 若是項目對你有所幫助,不妨star一下,你的支持是我前進的最大動力。

相關文章
相關標籤/搜索