標籤:cimage .com ice 腳手架 lock vue-cli dep 速度 imageview
最近在學習Vue,花了幾天時間跟著做了這個項目,算是對學習Vue入門的一個總結,歡迎同學們star
去哪網APP
?? 項目示範地址:http://118.25.39.84
基於 Vue 全家桶 (2.x) 製作的
去哪網APP項目,項目完整、功能完備、UI美觀、互動一流。
點擊查看效果技術棧【前端】
- Vue:構建使用者介面的 MVVM 架構,核心是響應的資料繫結和組系統件
- vue-router:為單頁面應用提供的路由系統,項目上線前使用了路由懶載入技術,來非同步載入路由最佳化效能
- vuex:Vue 集中狀態管理,在多個組件共用某些狀態時非常便捷
- axios:服務端通訊。基於
Promise
的網路請求外掛程式
- vue-lazyload:第三方圖片懶載入庫,最佳化頁面載入速度
- better-scroll:iscroll 的最佳化版,使移動端滑動體驗更加流暢
- stylus:css 先行編譯處理器
- ES6:ECMAScript
- vue-awesome-swiper: 圖片輪播外掛程式
- fastClick: 解決300毫秒點擊事件延遲問題
- stylus-loader: 一像素邊框問題
新一代文法,模組化、解構賦值、Promise、Class 等方法非常好用
【後端資料】
【自動化構建及其他工具】
- vue-cli:Vue 腳手架工具,快速初始化項目代碼
- ESLint:代碼風格檢查工具,規範代碼書寫
收穫
- 對 vue 的組件、指令、選項、模版渲染、事件綁定、計算屬性等有了一定瞭解
- 瞭解了 vue 組件之間的互動、傳值
- 熟悉了在 vue 項目中使用第三方外掛程式(組件)
- 熟悉了組件化、模組化的開發思維
- 熟悉了 vue-router 控制路由和子路由的方式
- 再次熟悉項目開發流程:項目分析設計 -> 項目環境搭建 -> 依賴安裝 -> 頁面架構設計 -> 組件開發 -> 測試聯調 -> 發布上線
- 體會到組件化、模組化開發帶來的便捷
- 體會到將對象封裝成類(ES6 class) 的便捷性,以及利用工廠方式初始化類執行個體
- 學會利用過渡效果及動畫效果製作良好的使用者互動體驗
Build Setup
# clone the repo into your disk.$ git clone https://github.com/1049759078/travel.git# install dependencies$ npm install# serve with hot reload at localhost:8080$ npm run dev# build for production with minification$ npm run build
License
The code is available under the MIT license.
項目- Vue全家桶實戰去哪網App