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

目录

前言完 

效果图 :

登录含签权 

 注册带正则

 个人中心

 下拉加载更多主页

 修改个人中心

 视频播放加关注+收藏

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

项目开始 

 封装登录、注册

 封装登录


      从零到一开发一个 哔哩哔哩移动端App 包括后面的打包成包安装到手机上 

      亲测熟练操作掌握,技能会更上一阶,生活不是林黛玉,不会因为忧伤而风情万种,运气就是,机会正好碰上了你的努力。加油干  

前期回顾     

十五万字的后台管理系统项目 包括从零搭建到结束自己写服务器上线结合 服务器+后端+前端,完成 vue项目 后台管理系统_0.活在风浪里的博客-CSDN博客亲测可用 gitee 网址 包括php包,后端node.js代码,前端源码 以及文档接口说明 + 结合 服务器+后端+前端,完成 vue项目 后台管理系统https://blog.csdn.net/m0_57904695/article/details/122648464

在项目中会大量使用复用组件的形式来开发,也能更好的与真实企业级项目接轨,更加减少我们的冗余代码,提高可读效率(除自己以外的开发人员) 

前言完 

Vue项目实战 —— 哔哩哔哩移动端开发_第1张图片

效果图 :

登录含签权 

Vue项目实战 —— 哔哩哔哩移动端开发_第2张图片

 注册带正则

Vue项目实战 —— 哔哩哔哩移动端开发_第3张图片

 个人中心

Vue项目实战 —— 哔哩哔哩移动端开发_第4张图片 

 下拉加载更多主页

 Vue项目实战 —— 哔哩哔哩移动端开发_第5张图片

 修改个人中心

Vue项目实战 —— 哔哩哔哩移动端开发_第6张图片 

 视频播放加关注+收藏

Vue项目实战 —— 哔哩哔哩移动端开发_第7张图片 

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

Vue项目实战 —— 哔哩哔哩移动端开发_第8张图片 

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

项目开始 

在一开始会配置路径别名、封装好axios、rem等,写移动端rem适配,肯定要做好,这里我单独写了多种设配,极简易懂站在逆向思维去写的, 希望可以帮助到大家移动端设配 rem vw_0.活在风浪里的博客-CSDN博客由于使用vw、vh依赖于视图窗口,故当屏幕分辨率变大或者缩小,尺寸会进行相应的放大或者缩小,当页面足够大,或者足够小时,尺寸会变得很大或者很小,从而导致用户体验差,当然谁会用那么大或者那么小的设备呢?大多数情况下,其实可以忽略不计的,如果你是一个最求完美用户体验的人,可通过rem,对根元素设置最大最小值,配合body加上最大宽度和最小宽度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~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-122249803.nonecase&utm_term=rem&spm=1018.2226.3001.4450

 Vue项目实战 —— 哔哩哔哩移动端开发_第9张图片Vue项目实战 —— 哔哩哔哩移动端开发_第10张图片

 封装登录、注册

因为它们很雷同,所以父传子给不同的值 Vue项目实战 —— 哔哩哔哩移动端开发_第11张图片Vue项目实战 —— 哔哩哔哩移动端开发_第12张图片

 封装登录

 位置:父组件

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






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

即封装思路,

念及此:


位置:子组件

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






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

Vue项目实战 —— 哔哩哔哩移动端开发_第13张图片  Vue项目实战 —— 哔哩哔哩移动端开发_第14张图片

 Vue项目实战 —— 哔哩哔哩移动端开发_第15张图片

顶部文字封装完毕! 

下面封装 input

位置:子组件

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






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

Vue项目实战 —— 哔哩哔哩移动端开发_第16张图片  

复制Vant的van-field组件写在子组件,在父组件引入子组件,涉及到密码不同type,不同placeholder,还有正则,label不同文字,

Vue项目实战 —— 哔哩哔哩移动端开发_第17张图片

在父组件将需要的东西定义好,发送到子组件

 Vue项目实战 —— 哔哩哔哩移动端开发_第18张图片

Vue项目实战 —— 哔哩哔哩移动端开发_第19张图片       这里推荐两篇博文props接收值得说明,当然了官方更加全,建议去撸一遍Vue 组件通讯 props接受形式有哪些_0.活在风浪里的博客-CSDN博客_vueprops接收数据的方式props对象接收的值怎么使用通过对象的方式定义props成员,可以为每个prop成员制定规则(类型,校验…),常用的如下.父传子props接受的形式https://blog.csdn.net/m0_57904695/article/details/121661892?spm=1001.2014.3001.5501

Vue组件通讯_0.活在风浪里的博客-CSDN博客_vue父子传值Vue2 父子传值的 6 种方法https://blog.csdn.net/m0_57904695/article/details/121723392?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164812465916780274173611%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=164812465916780274173611&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-121723392.nonecase&utm_term=%E9%80%9A%E8%AE%AF&spm=1018.2226.3001.4450
Vue3封装input组件_0.活在风浪里的博客-CSDN博客_vue3 封装input第一步在components文件夹中 创建一个myInput.vue文件

你可能感兴趣的:(开源项目,移动端项目,前端页面,前端,vue.js,哔哩哔哩项目)