Vue2 0 仿滴滴出行專案

2021-09-16 20:09:14 字數 1335 閱讀 6331

最近,各大社群出現很多小夥伴的vue專案,趁著這股熱潮我也用vue擼了乙個滴滴出行的專案。

元件庫

mint-ui(有一些元件特別好用,方便快速開發)

字型庫vue-awasome(完美支援font-awasome,此外還可以自定義元件)

css動畫庫

就我目前實現的功能來看,核心元件有定位元件、位址選擇元件、地圖元件和打車下單元件

接下來談下我在寫這個專案當中遇到一些的問題, 給大家分享下。

1 驗證碼彈窗,輸入呼出手機軟鍵盤的問題。

由於我在寫驗證碼彈窗的時候,參考了滴滴本身驗證碼的彈窗結構,用了4個span來作為驗證碼輸入框。然後,我想了一下大概的思路,可以利用vue的資料繫結和鍵盤監聽事件輕鬆的搞定驗證碼輸入。可是,後來在手機上發現,輸入的時候居然調不出軟鍵盤,寫專案的時候沒考慮到裝置問題,簡直是大大的失誤。接著我往輸入框中新增了乙個input標籤,並且設為不可見,然後觸發軟鍵盤。原本以為完美解決,可以發現輸入沒有出現數字,我仔細一想,vue不是資料繫結嗎?怎麼沒效果,搗鼓半天資料問題,結果,發現竟然又是我考慮不周,老想著vue可以資料繫結,沒想鍵盤監聽在手機上無效,崩潰,再次敗給了自己。突然想起一句話:**寫不好不是不會寫,而是缺乏思考。

2 第二個問題是關於打車通知司機進度條的動畫效果

3 第三個問題是關於資料請求是否都需要提交action

其實我對vuex中為什麼把非同步操作封裝在action,把同步操作放在mutations的原因很好奇,於是,在知乎上搜了一下其中的原因(文中尤雨溪給這個問題作出了回答)

此專案我將一直在github上進行更新,歡迎有興趣的小夥伴一起學習,也歡迎各位大牛指出專案的缺點與不足。

最後插播乙個小廣告:大四應屆生,求職中,希望各位大佬給個機會。這是我的簡歷

vue2 0仿今日頭條開源專案

vue.js 2.0全家桶 vue vuex vue router axios jsonp element ui iview vue lazyload animate.css moment flexible.js github原始碼位址 專案內定死 賬號 admin,密碼 admin。因為資料原因,...

vue 2 0 的專案配置

vue 2.0 的專案配置 1 vue腳手架指的是vue cli,它是乙個專門為單頁面應用快速搭建繁雜的腳手架,它可以輕鬆的建立新的應用程式而且可用於自動生成vue和webpack的專案模板 2 搭建步驟 全域性安裝 cnpm install vue cli g vue v 檢測版本 例項化乙個專案...

使用VUE2 0構建webpack專案

1 vue構建webpack專案需要依賴於node 和npm 需要先安裝。輸入node v回車 會出現node版本號 輸入npm v回車 會出現npm版本號 2 安裝vue npm install g vue cli g表示全域性安裝,vue cli是模組 或者使用 映象 npm install r...