无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

項目描述

之前一直用vue1.x寫項目，最近為了過渡到vue2.0，特易用vue2.0棧仿寫了淘票票頁面，而且加入了express作為后臺服務。

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

后臺技術棧：nodejs + express

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

廢話先不多說，先曬曬預覽效果，過過癮：

項目架構(gòu)

本項目采用vue2.0棧構(gòu)建前端頁面，采用express搭建后臺服務，主要目錄如下：

 build
 config 
 src //前端主要開發(fā)目錄
 　--assets //存放前端靜態(tài)資源
 　--components //存放組件
    --store //vuex數(shù)據(jù)流管理
    --views //頁面視圖，由vue-router引入
    --App.vue 
    --main.js //前端入口文件
server //后臺服務
   --bin //啟動后臺服務配置
   --database //存放頁面所需要的json數(shù)據(jù)
   --public //前端部署時存放在后臺服務的位置
   --routes //路由于請求接口管理
   --views //前端模板存放位置
   --app.js //后臺服務入口

主要特色功能概覽

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

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

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

4. 采用mint-ui實現(xiàn)城市分類選擇等樣式，其項目主頁為http://mint-ui.github.io/#!/zh-cn

...

學習心得

vue2.0相對于vue1.0還是擁有比較大的變化，廢除了很多原有的接口，比如1.0的為了解決組件通信的$dispatch和$broadcast棄用掉，轉(zhuǎn)而提倡更多簡明清晰的組件間通信和更好的狀態(tài)管理方案，如vuex。事實證明，用vuex可以輕易解決組件間通信，而且容易維護和引用。還有2.0將v-el 和 v-ref 合并為一個 ref 屬性，使用方法跟react里的refs是一樣的。這里只是簡單舉兩個例子，如果還停留在1.0的童鞋，可以直接到官方網(wǎng)站中查看。如果還不了解同時還在猶豫要不要入手vue的童鞋，這里強烈建議趕快拿起vue上來擼了，為什么呢，因為vue上手快，而且mvvm的數(shù)據(jù)雙向綁定會讓你省去很多無用的事，再配合第三方提供的方案，比如vue-router和vuex，可以將單薄的vue包裝成一個強大的棧，對于移動端中、大項目快速開發(fā)與良好維護是一個非常不錯的選擇。

寫此博客的目的主要是讓大家簡單了解下這個項目，而沒有具體分析代碼細節(jié)，因為個人覺得vue官網(wǎng)已經(jīng)把很多知識點寫得很詳細了，沒必要再復述了，如果對此項目有興趣的童鞋，請到項目github地址閱讀源碼，如果有問題，可以在這里指出，讓我們共同進步。

其他

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

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