最近在學習Vue，花了幾天時間跟著做了這個專案，算是對學習Vue入門的一個總結，歡迎同學們star

去哪網APP

基於 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.