• 搜狐彩票官网

  • 搜狐彩票官网

  • 搜狐彩票官网

  • 搜狐彩票官网

搜狐彩票官网

作者︰canfoo#!  發布日期︰2020-02-19 08:15:33
  • 項目描述

    之前一直用vue1.x寫項目,最近為(wei)了過(guo)渡到(dao)vue2.0,特易用vue2.0棧仿(fang)寫了淘(tao)票票頁面,而且加入了express作為(wei)後台服務。

    前端技術(shu)棧︰vue2.0 + vue-router + vuex + mint-ui 

    後台技術(shu)棧︰nodejs + express

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

    廢話先不多(duo)說,先曬曬預(yu)覽(lan)效果,過(guo)過(guo)癮︰

        

        

    項目架構(gou)

    本項目采用vue2.0棧huai)菇jian)前端頁面,采用express搭(da)建(jian)後台服務,主(zhu)要目錄如下︰

     build
     config 
     src //前端主(zhu)要開(kai)發目錄
      --assets //存放前端靜態資源
      --components //存放組件(jian)
        --store //vuex數據流管理
        --views //頁面試圖,由vue-router引入
        --App.vue 
        --main.js //前端入口文件(jian)
    server //後台服務
       --bin //啟(qi)動後台服務配置(zhi)
       --database //存放頁面所(suo)需要的json數據
       --public //前端部署時存放在後台服務的位(wei)置(zhi)
       --routes //路由于請求(qiu)接口管理
       --views //前端模板(ban)存放位(wei)置(zhi)
       --app.js //後台服務入口

    主(zhu)要特色(se)功能概覽(lan)

    1. 通(tong)過(guo)vue自定義指令(ling)實現正在熱映等(deng)列表中圖片按需加載(zai),源碼位(wei)置(zhi)在/vue2.0-taopiaopiao/src/components/lazyload.js

    2. 通(tong)過(guo)組件(jian)設計思想實現電影院詳情中圖片滑動變(bian)速、選中動畫等(deng)功能,源碼位(wei)置(zhi)在/vue2.0-taopiaopiao/src/components/cinemaDetai/film.vue

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

    4. 采用mint-ui實現城(cheng)市分類選擇等(deng)樣(yang)式,其項目主(zhu)頁為(wei)http://mint-ui.github.io/#!/zh-cn

    ...

    學習心(xin)得

    vue2.0相對于vue1.0還(huai)是擁有比(bi)較大的變(bian)化,廢除了很多(duo)原有的接口,比(bi)如1.0的為(wei)了解決組件(jian)通(tong)信(xin)的$dispatch和(he)$broadcast棄用掉(diao),轉而提倡更多(duo)簡明清晰(xi)的組件(jian)間通(tong)信(xin)和(he)更好的狀態管理方案,如vuex。事(shi)實證明,用vuex可以輕易解決組件(jian)間通(tong)信(xin),而且容易維護和(he)引用。還(huai)有2.0將v-el 和(he) v-ref 合並(bing)為(wei)一個 ref 屬(shu)性,使用方法跟react里的refs是一樣(yang)的。這里只是簡單舉兩(liang)個例子,如果還(huai)停留在1.0的童鞋(xie),可以直ben)擁dao)官方網(wang)站(zhan)中查(cha)看。如果還(huai)不了解同時還(huai)在猶tao)? 灰 朧shou)vue的童鞋(xie),這里強烈建(jian)議趕快拿起vue上來擼了,為(wei)什麼(me)呢,因為(wei)vue上手(shou)快,而且mvvm的數據雙向綁定會讓你省(sheng)去很多(duo)無(wu)用的事(shi),再(zai)配bin)系諶教(jiao) ┐姆槳福 bi)如vue-router和(he)vuex,可以將單薄的vue包裝成(cheng)一個強大的棧,對于移動端中、大項目快速開(kai)發與良(liang)好維護是一個非常不錯的選擇。

    寫此博客(ke)的目的主(zhu)要是讓me)蠹jia)簡單了解下這個項目,而沒(mei)有具體分析代碼細節,因為(wei)個人覺得vue官網(wang)已經把(ba)很多(duo)知識點寫得很詳細了,沒(mei)必要再(zai)復述了,如果對此項目有興(xing)趣(qu)的童鞋(xie),請到(dao)項目github地址閱讀源碼,如果有問題,可以在這里指出,讓我們共(gong)同進步。

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

About IT165 -廣(guang)告服務 -隱私聲明 -版權申明 -免責(ze)條款 -網(wang)站(zhan)地圖 -網(wang)友投稿 -聯系方式
本站(zhan)內容來自于互(hu)聯網(wang),僅(jin)供用于網(wang)絡技術(shu)學習,學習中請遵循相關法律法規
搜狐彩票官网 | 下一页