• 熱門專題

vue2.0構建淘票票webapp

作者:canfoo#!  發布日期:2016-12-26 20:23:33
Tag標簽: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地址閱讀源碼,如果有問題,可以在這里指出,讓我們共同進步。

    覺得這個項目對你有幫助的話,請給個star吧,^9^

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
香港最快开奖现场直播结果