寫在前面
Vue跨平臺APP開發案例：完成常用界面的開發，學習積累vue棧知識，重點是提供拿來主義代碼。
今日主題
APP最常用界面之一：登錄
平臺支持
- 小程序：mpvue、cmljs(卡梅龍)
- APP：uniapp、apicloud以及任何基於h5的混合應用框架
- weex
效果展示
登錄界面
實現分析
- 界面分析
- 整體水平居中
- 圖標較少，大部分樣式代碼可實現
- psd標註切片上傳藍湖
- 代碼實現
- 開發工具：HBuilderX
- 代碼
界面解析
- 圓角頭像
結構：外圓(內部透明)+內圓+頭像
界面代碼：
界面樣式：
- 登錄表單
界面代碼：
界面樣式：
- 第三方登錄
界面代碼
界面樣式
使用的技術及注意點
- css擴展：sass
- input的雙向綁定：兩種方式（v-model、bind:value + input事件 ）
總結
為了平臺的兼容性，全部採用flex佈局。登錄界面相對簡單，你也可以練習下，看看會遇到什麼問題。
****最後****
這個案例是一個長期的積累，希望你能夠+關注，點贊！！你的支持就是我的動力！！
分享到:
閱讀更多 全職碼農 的文章
