vue2.0構建淘票票webapp

項目描述

以前一直用vue1.x寫項目，最近爲了過渡到vue2.0，特易用vue2.0棧仿寫了淘票票頁面，並且加入了express做爲後臺服務。

前端技術棧：vue2.0 + vue-router + vuex + mint-ui 

後臺技術棧：nodejs + express

項目地址：https://github.com/canfoo/vue2.0-taopiaopiao

廢話先很少說，先曬曬預覽效果，過過癮：

    

    

項目架構

本項目採用vue2.0棧構建前端頁面，採用express搭建後臺服務，主要目錄以下：

 build
 config 
 src //前端主要開發目錄
 　--assets //存放前端靜態資源
 　--components //存放組件
    --store //vuex數據流管理
    --views //頁面視圖，由vue-router引入
    --App.vue 
    --main.js //前端入口文件
server //後臺服務
   --bin //啓動後臺服務配置
   --database //存放頁面所須要的json數據
   --public //前端部署時存放在後臺服務的位置
   --routes //路因爲請求接口管理
   --views //前端模板存放位置
   --app.js //後臺服務入口

主要特點功能概覽

1. 經過vue自定義指令實現正在熱映等列表中圖片按需加載，源碼位置在/vue2.0-taopiaopiao/src/components/lazyload.js

2. 經過組件設計思想實現電影院詳情中圖片滑動變速、選中動畫等功能，源碼位置在/vue2.0-taopiaopiao/src/components/cinemaDetai/film.vue

3. 採用vuex管理每次加載數據自動判斷是否須要顯示loading，源碼位置在/vue2.0-taopiaopiao/src/store/loading/mutations.js

4. 採用mint-ui實現城市分類選擇等樣式，其項目主頁爲http://mint-ui.github.io/#!/zh-cn

...

學習心得

vue2.0相對於vue1.0仍是擁有比較大的變化，廢除了不少原有的接口，好比1.0的爲了解決組件通訊的$dispatch和$broadcast棄用掉，轉而提倡更多簡明清晰的組件間通訊和更好的狀態管理方案，如vuex。事實證實，用vuex能夠輕易解決組件間通訊，並且容易維護和引用。還有2.0將v-el 和 v-ref 合併爲一個 ref 屬性，使用方法跟react裏的refs是同樣的。這裏只是簡單舉兩個例子，若是還停留在1.0的童鞋，能夠直接到官方網站中查看。若是還不瞭解同時還在猶豫要不要入手vue的童鞋，這裏強烈建議趕快拿起vue上來擼了，爲何呢，由於vue上手快，並且mvvm的數據雙向綁定會讓你省去不少無用的事，再配合第三方提供的方案，好比vue-router和vuex，能夠將單薄的vue包裝成一個強大的棧，對於移動端中、大項目快速開發與良好維護是一個很是不錯的選擇。

寫此博客的目的主要是讓你們簡單瞭解下這個項目，而沒有具體分析代碼細節，由於我的以爲vue官網已經把不少知識點寫得很詳細了，不必再複述了，若是對此項目有興趣的童鞋，請到項目github地址閱讀源碼，若是有問題，能夠在這裏指出，讓咱們共同進步。

其餘

react實現的淘票票倉庫地址：https://github.com/canfoo/react-taopiaopiao

react-native實現的淘票票倉庫地址：https://github.com/canfoo/react-native-taopiaopiao