写在前面

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布局。登录界面相对简单，你也可以练习下，看看会遇到什么问题。

****最后****

这个案例是一个长期的积累，希望你能够+关注，点赞！！你的支持就是我的动力！！