專案依賴
- 使用vue-cli2.0搭建專案框架
- 使用vue-router2.7進行頁面路由切換
- 使用json server進行http請求獲取資料
- mock假資料儲存在本地
- 使用stylus編寫樣式
- vuex進行狀態管理
- better-scroll優化滾動效果
- vue-awesome-swiper輪播圖
- flexible.js 10rem解決移動端裝置相容
效果演示
專案github地址： 專案請戳這
預覽地址： 預覽請戳這
專案總結
專案使用到vue-router進行路由切換，元件化開發讓我更加具有元件化思維，vuex的狀態管理模式，專案所用到的假資料為小紅書官網上的一些資料，以及小紅書app上的截圖。踩過一些坑,vue-awesome-swiper實現圖片輪播時，選擇free模式時不能改變swiper-item之間的距離，卡頓許久，通過仔細閱讀官方文件才發現還有這個選項spaceBetween，果然要多看文件;打包後的檔案index.html出現空白頁，通過瀏覽社群大牛的文章，才知道需要關閉路由檔案的history模式。
若是覺得文章還不錯不妨點個贊吧~~
歡迎star，歡迎issue