Vue跨平台页面模板之登录(一)

写在前面
Vue跨平台APP开发案例:完成常用界面的开发,学习积累vue栈知识,重点是提供拿来主义代码。
今日主题
APP最常用界面之一:登录
平台支持
- 小程序:mpvue、cmljs(卡梅龙)
- APP:uniapp、apicloud以及任何基于h5的混合应用框架
- weex
效果展示

登录界面
实现分析
- 界面分析
- 整体水平居中
- 图标较少,大部分样式代码可实现
- psd标注切片上传蓝湖
- 代码实现
- 开发工具:HBuilderX
- 代码

界面解析
- 圆角头像
结构:外圆(内部透明) 内圆 头像
界面代码:

界面样式:

- 登录表单
界面代码:

界面样式:

- 第三方登录
界面代码

界面样式

使用的技术及注意点
- css扩展:sass
- input的双向绑定:两种方式(v-model、bind:value input事件 )
总结
为了平台的兼容性,全部采用flex布局。登录界面相对简单,你也可以练习下,看看会遇到什么问题。
****最后****
这个案例是一个长期的积累,希望你能够 关注,点赞!!你的支持就是我的动力!!