在前面

Vue跨平臺APP開發案例：完成常用界面的開發，學習積累vue棧知識，重點是提供拿來主義代碼。

今日主題

APP最常用界面之一：登錄

平臺支持

• 小程序：mpvue、cmljs(卡梅龍)
• APP：uniapp、apicloud以及任何基于h5的混合應用框架
• weex

效果展示

實現分析

• 界面分析

1. 整體水平居中
2. 圖標較少，大部分樣式代碼可實現
3. psd標注切片上傳藍湖

• 代碼實現

1. 開發工具：HBuilderX
2. 代碼

界面解析

• 圓角頭像

結構：外圓(內部透明)+內圓+頭像

界面代碼：

界面樣式：

• 登錄表單

界面代碼：

界面樣式：

• 第三方登錄

界面代碼

界面樣式

使用的技術及注意點

• css擴展：sass
• input的雙向綁定：兩種方式（v-model、bind:value + input事件 ）

總結

為了平臺的兼容性，全部采用flex布局。登錄界面相對簡單，你也可以練習下，看看會遇到什么問題。

****最后****

這個案例是一個長期的積累，希望你能夠+關注，點贊！！你的支持就是我的動力！！