Vue项目实战 —— 哔哩哔哩移动端开发

注册带正则

个人中心

下拉加载更多主页

修改个人中心

视频播放加关注+收藏

评论盖楼A回复B B回复C C回复A类似

功能很多就不一一展示介绍，直接进入开发

项目开始

=====

在一开始会配置路径别名、封装好axios、rem等，写移动端rem适配，肯定要做好，这里我单独写了多种设配，极简易懂站在逆向思维去写的，希望可以帮助到大家移动端设配 rem vw_0.活在风浪里的博客-CSDN博客由于使用vw、vh依赖于视图窗口，故当屏幕分辨率变大或者缩小，尺寸会进行相应的放大或者缩小，当页面足够大，或者足够小时，尺寸会变得很大或者很小，从而导致用户体验差，当然谁会用那么大或者那么小的设备呢？大多数情况下，其实可以忽略不计的，如果你是一个最求完美用户体验的人，可通过rem，对根元素设置最大最小值，配合body加上最大宽度和最小宽度[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ywcBoy7a-1651209292708)(https://g.csdnimg.cn/static/logo/favicon32.ico)]https://blog.csdn.net/m0_57904695/article/details/122249803?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164804337816780271590085%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=164804337816780271590085&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_blogfirst_rank_ecpm_v1~rank_v31_ecpm-1-122249803.nonecase&utm_term=rem&spm=1018.2226.3001.4450

封装登录、注册

因为它们很雷同，所以父传子给不同的值

封装登录

位置：父组件

在父组件写好传的数据，子组件来接收

<my-input-label

placeholder=“请输入姓名”

label=“姓名”

rule=“^.{6,16}$”

style=“margin: 15px 0”

@changeInput=“(res) => (uname = res)”

<my-input-label

placeholder=“请输入手机号”

label=“账号”

rule=“^.{6,16}$”

@changeInput=“(res) => (phone = res)”

<my-input-label

placeholder=“请输入密码”

l 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源徽信搜索公众号【编程进阶路】 abel=“密码”

type=“password”

rule=“^.{6,16}$”

@changeInput=“(res) => (password = res)”

父组件写不同的值传到子组件，子组件负责接受，子组件用来定义结构样式，父组件负责传值

即封装思路，

念及此：

位置：子组件

这是顶部文字《哔哔哩哩》的子组件，input单独一会新建文件夹在封装

总结一下过程，以图片形式，如下

顶部文字封装完毕！

下面封装 input

位置：子组件

这是顶部《账号密码》的子组件，input单独在封装不与顶部文字写在一起，样式结构不一样

<van-field

v-model=“value”

:label=“label”

:placeholder=“placeholder”

:type=“type”

:rule=“rule”

ge/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16)

顶部文字封装完毕！

下面封装 input

位置：子组件

这是顶部《账号密码》的子组件，input单独在封装不与顶部文字写在一起，样式结构不一样

<van-field

v-model=“value”

:label=“label”

:placeholder=“placeholder”

:type=“type”

:rule=“rule”

Vue项目实战 —— 哔哩哔哩移动端开发相关推荐

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇
目录前言完效果图 : 登录含签权注册带正则个人中心下拉加载更多主页修改个人中心视频播放加关注+收藏评论盖楼A回复B B回复C C回复A类似项目开始封装登录.注册封装登录从零到一 ...
Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
前期回顾 30秒学会 -- <获取验证码基本操作>_0.活在风浪里的博客-CSDN博客前期回顾懒人必备 -- 时间神器 moment_0.活在风浪里的博客-CSDN博客亲测好用, ...
Vue项目实战 —— 后台管理系统( pc端 )
前期回顾我只写注释 -- 让Ai写代码_的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_的博客-CSDN博客https://blog.csdn.net/m0_57 ...
Vue项目实战 —— 后台管理系统( pc端 ) 第一篇
前期回顾我只写注释 -- 让Ai写代码_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_0.活在风浪里的博客-CSDN博客https://b ...
vue 动态添加class_前端开发：Vue项目实战-Music
大家好,我来了,本期为大家带来的前端开发知识是"前端开发:Vue项目实战-Music",有兴趣做前端的朋友,和我一起来看看吧! 主要内容项目环境搭建路由导航实现 ListVie ...
vue 将字符串最后一个字符给替换_前端开发：Vue项目实战-Music
大家好,我来了,本期为大家带来的前端开发知识是"前端开发:Vue项目实战-Music",有兴趣做前端的朋友,和我一起来看看吧! 主要内容项目环境搭建路由导航实现 ListVie ...
【VUE项目实战】68、使用pm2管理项目
接上篇<67.上线-开启gzip和配置HTTPS服务> 上一篇我们学习了如何开启gzip配置来减少文件访问体积,并配置HTTPS服务.本篇我们讲解一下如何使用pm2管理项目. 本篇是该系列 ...
【VUE项目实战】32、权限管理-实现角色列表
接上篇<31.权限管理-实现权限列表> 上个阶段我们完成了权限管理模块,本篇我们来介绍用户.角色和权限三者的关系,并完成角色管理列表模块. 一.权限管理业务分析通过权限管理模块,控制不同 ...
【VUE项目实战】64、CND优化ElementUI以及首页内容定制
接上篇<63.指定打包入口及加载外部CDN资源> 上一篇我们为开发模式与发布模式制定不同的打包入口,然后为项目加载外部CDN资源.本篇我们来学习通过CND优化ElementUI的打包,以及 ...
【VUE项目实战】59、订单的物流信息查询功能
接上篇<58.订单修改收货地址的功能> 上一篇我们完成了订单列表的修改收货地址功能,本篇我们来实现订单的物流信息查询功能. 一.要实现的效果我们要实现点击操作列的"物流进度&q ...

Vue项目实战 —— 哔哩哔哩移动端开发

Vue项目实战 —— 哔哩哔哩移动端开发相关推荐

最新文章

热门文章