項目- Vue全家桶實戰去哪網App

標籤：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：代碼風格檢查工具，規範代碼書寫

收穫

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