項目描述
之前一直用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