最近在學習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：代碼風格檢查工具，規範代碼書寫

收獲

1. 對 vue 的組件、指令、選項、模版渲染、事件綁定、計算屬性等有了一定了解
2. 了解了 vue 組件之間的交互、傳值
3. 熟悉了在 vue 項目中使用第三方插件（組件）
4. 熟悉了組件化、模塊化的開發思維
5. 熟悉了 vue-router 控制路由和子路由的方式
6. 再次熟悉項目開發流程：項目分析設計 -> 項目環境搭建 -> 依賴安裝 -> 頁面架構設計 -> 組件開發 -> 測試聯調 -> 發布上線
7. 體會到組件化、模塊化開發帶來的便捷
8. 體會到將對象封裝成類(ES6 class) 的便捷性，以及利用工廠方式初始化類實例
9. 學會利用過渡效果及動畫效果制作良好的用戶交互體驗

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