松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › Vue跨平台页面模板之登录(一)

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

迦娜王
3年前Vue
1,382 0 0
Vue跨平台页面模板之登录(一)

写在前面

Vue跨平台APP开发案例:完成常用界面的开发,学习积累vue栈知识,重点是提供拿来主义代码。

今日主题

APP最常用界面之一:登录

平台支持

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

效果展示

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

登录界面

实现分析

  • 界面分析
  1. 整体水平居中
  2. 图标较少,大部分样式代码可实现
  3. psd标注切片上传蓝湖
  • 代码实现
  1. 开发工具:HBuilderX
  2. 代码
Vue跨平台页面模板之登录(一)

界面解析

  • 圆角头像

结构:外圆(内部透明) 内圆 头像

界面代码:

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

界面样式:

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

  • 登录表单

界面代码:

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

界面样式:

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

  • 第三方登录

界面代码

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

界面样式

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

使用的技术及注意点

  • css扩展:sass
  • input的双向绑定:两种方式(v-model、bind:value input事件 )

总结

为了平台的兼容性,全部采用flex布局。登录界面相对简单,你也可以练习下,看看会遇到什么问题。

****最后****

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

0
Vue路由一:简单路由
上一篇
Vue 小Demo——留言板
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
Servicios profesionales Organizaciones
1年前
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
1年前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
1年前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
1年前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
相关文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
vue3.x reactive、effect、computed、watch依赖关系及实现原理
Vue 3 新特性:在 Composition API 中使用 CSS Modules
新手必看的前端项目去中心化和模块化思想
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 0
  • 0
  • Top