目录
前言完
效果图：
登录含签权
注册带正则
个人中心
下拉加载更多主页
修改个人中心
视频播放加关注+收藏
评论盖楼A回复B B回复C C回复A类似
项目开始
封装登录、注册
封装登录
从零到一开发一个 哔哩哔哩移动端App 包括后面的打包成包安装到手机上
亲测熟练操作掌握，技能会更上一阶，生活不是林黛玉，不会因为忧伤而风情万种，运气就是，机会正好碰上了你的努力。加油干
前期回顾
十五万字的后台管理系统项目 包括从零搭建到结束自己写服务器上线结合 服务器+后端+前端，完成 vue项目 后台管理系统_0.活在风浪里的博客-CSDN博客亲测可用 gitee 网址 包括php包，后端node.js代码，前端源码 以及文档接口说明 + 结合 服务器+后端+前端，完成 vue项目 后台管理系统/m0_57904695/article/details/122648464
在项目中会大量使用复用组件的形式来开发，也能更好的与真实企业级项目接轨，更加减少我们的冗余代码，提高可读效率（除自己以外的开发人员）
前言完
效果图：
登录含签权
注册带正则
个人中心
下拉加载更多主页
修改个人中心
视频播放加关注+收藏
评论盖楼A回复B B回复C C回复A类似
功能很多就不一一展示介绍，直接进入开发
项目开始
在一开始会配置路径别名、封装好axios、rem等，写移动端rem适配，肯定要做好，这里我单独写了多种设配，极简易懂站在逆向思维去写的， 希望可以帮助到大家移动端设配 rem vw_0.活在风浪里的博客-CSDN博客由于使用vw、vh依赖于视图窗口，故当屏幕分辨率变大或者缩小，尺寸会进行相应的放大或者缩小，当页面足够大，或者足够小时，尺寸会变得很大或者很小，从而导致用户体验差，当然谁会用那么大或者那么小的设备呢？大多数情况下，其实可以忽略不计的，如果你是一个最求完美用户体验的人，可通过rem，对根元素设置最大最小值，配合body加上最大宽度和最小宽度/m0_57904695/article/details/122249803?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164804337816780271590085%2522%252C%2522scm%2522%253A%25220713.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
封装登录、注册
因为它们很雷同，所以父传子给不同的值
封装登录
位置：父组件
在父组件写好传的数据，子组件来接收
<template><div id=""><div class="loginTop"><!-- 父组件通过自定义属性传值，如果是字符串可以不加 ： --><!-- 如果在data中定义成变量，等号左边属性要加: --><login-top middleTop="注册哔哩哔哩"></login-top><my-input-labelplaceholder="请输入姓名"label="姓名"rule="^.{6,16}$"style="margin: 15px 0"@changeInput="(res) => (uname = res)"></my-input-label><my-input-labelplaceholder="请输入手机号"label="账号"rule="^.{6,16}$"@changeInput="(res) => (phone = res)"></my-input-label><!-- @changeInput="res=>password=res"这种是简写了完整写法：@changeInput="changeInput"changeInput(val){this.uname =valthis.phone =valthis.password =val}--><my-input-labelplaceholder="请输入密码"label="密码"type="password"rule="^.{6,16}$"@changeInput="(res) => (password = res)"></my-input-label></div></div></template><script>import LoginTop from "../../components/LoginCon/MyLoginTop.vue";import MyInputLabel from "../../components/LoginCon/MyInputLabel.vue";export default {name: "",data() {return {uname: "",phone: "",password: "",};},methods: {},computed: {},components: {LoginTop,MyInputLabel,},created() {},};</script><style lang="scss" scoped>//@import '引入的css文件';</style>
父组件写不同的值传到子组件，子组件负责接受，子组件用来定义结构样式，父组件负责传值
即封装思路，
念及此：
位置：子组件
这是顶部文字《哔哔哩哩》的子组件，input单独一会新建文件夹在封装
<template><div id=""><div class="loginTop"><div></div><div>{{middleTop}}</div><div></div></div></div></template><script>export default {name:'',data() {return {};},props:['middleTop'],methods: {},computed: {},components: {},created() {},};</script><style lang="scss" scoped >//@import '引入的css文件';.loginTop{width: 100%;height: 70px;background-color: #ffff;color: #000000;font-size: 25px;display: flex;justify-content: space-between;align-items: center;flex-basis: 33.3%;padding: 0 15px;}</style>
总结一下过程，以图片形式，如下
顶部文字封装完毕！
下面封装 input
位置：子组件
这是顶部 《账号 密码》的子组件，input单独在封装不与顶部文字写在一起，样式结构不一样
<template><div id=""><div class="myInputlabel"><van-cell-group><van-fieldv-model="value":label="label":placeholder="placeholder":type="type":rule="rule"/></van-cell-group></div></div></template><script>export default {name: "",data() {return {value: "",};},props: ["placeholder", "label", "type", "rule"],watch: {value: {handler(newVal, oldVal) {this.regEv()},},},methods: {regEv(){// 因为传过来的是字符串所以要将字符串变成真正的正则const reg = new RegExp(this.rule)// console.log(reg.test(this.value)); //falseif(reg.test(this.value)){this.$emit('changeInput', this.value)}}},};</script><style lang="scss" scoped>//@import '引入的css文件';.loginTop {width: 100%;height: 50px;background-color: #ffff;color: #000000;font-size: 25px;display: flex;justify-content: space-between;align-items: center;flex-basis: 33.3%;padding: 0 15px;}</style>
总结一下过程，以图片形式，如下
复制Vant的van-field组件写在子组件，在父组件引入子组件，涉及到密码不同type，不同placeholder，还有正则，label不同文字，
在父组件将需要的东西定义好，发送到子组件
这里推荐两篇博文props接收值得说明，当然了官方更加全，建议去撸一遍Vue 组件通讯 props接受形式有哪些_0.活在风浪里的博客-CSDN博客_vueprops接收数据的方式props对象接收的值怎么使用通过对象的方式定义props成员，可以为每个prop成员制定规则(类型，校验…),常用的如下.父传子props接受的形式/m0_57904695/article/details/121661892?spm=1001..3001.5501
Vue组件通讯_0.活在风浪里的博客-CSDN博客_vue父子传值Vue2 父子传值的 6 种方法/m0_57904695/article/details/121723392?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164812465916780274173611%2522%252C%2522scm%2522%253A%25220713.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文件<template> <div> <input type="text" :value="modelValue" @input="iptChange"> </div> </template><script>import { ref } from 'vue'export default { props: {/m0_57904695/article/details/121627922?spm=1001..3001.5501
wacth监听input的值，如果正则匹配正确，则触发子传父事件，也就是，你在父组件页面的子组件input框上输入的值，会在子组件判断正则，匹配则发送父组件，父组件接受到后就可以通过判断下一步是否登录等操作
变成true就是判断成功
传值后也就引出了上面父组件写的值了，这是一开始上面的图片
看下我们封装的效果可以实现不
接下来写注册，接着就是个人页
Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇_0.活在风浪里的博客-CSDN博客前期回顾 30秒学会 —— 《获取验证码基本操作》_0.活在风浪里的博客-CSDN博客前期回顾 懒人必备 —— 时间神器 moment_0.活在风浪里的博客-CSDN博客亲测好用，及其好使的插件，开发懒人必整，就算是自己可以写，一大堆代码，真的要写吗？/m0_57904695/article/details/123767269?spm=1001..3001.5501先说先验证码思路，其实很简单，1、前端触发获取验证码,同步显示有效验证倒计时;2、后.../m0_57904695/article/details/123881330?spm=1001..3001.5502
更新中。。。
/6/14 18:30
因为我呢白天要上班，晚上回来还要看电子书，额不是，回来还得读 js 源码，所以无法一下子写完，白天也挺累了，晚上因为爱好我喜欢记录，边敲边记录，还挺忙，所以会每天下班都来写,如果对你有微乎帮助，请点个收藏以备找时方便
