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

置顶彩色之外

已于 2023-04-11 17:10:26 修改

阅读量1.4w

点赞数 39

分类专栏：后台管理系统文章标签：移动端项目前端页面前端 vue.js 哔哩哔哩项目

于 2022-03-24 20:26:36 首次发布

CSDN-@活在风浪里001

本文链接：https://blog.csdn.net/m0_57904695/article/details/123594836

版权

后台管理系统专栏收录该内容

16 篇文章 36 订阅

订阅专栏

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

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

前期回顾

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

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

前言完

效果图：

登录含签权

注册带正则

个人中心

下拉加载更多主页

修改个人中心

视频播放加关注+收藏

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

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

项目开始

在一开始会配置路径别名、封装好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

封装登录、注册

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

封装登录

位置：父组件

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

<template>
  <div id="">
    <div class="loginTop">
      <!-- 父组件通过自定义属性传值，如果是字符串可以不加 ： -->
      <!-- 如果在data中定义成变量，等号左边属性要加: -->
      <login-top middleTop="注册哔哩哔哩"></login-top>

      <my-input-label
        placeholder="请输入姓名"
        label="姓名"
        rule="^.{6,16}$"
        style="margin: 15px 0"
        @changeInput="(res) => (uname = res)"
      ></my-input-label>

      <my-input-label
        placeholder="请输入手机号"
        label="账号"
        rule="^.{6,16}$"
        @changeInput="(res) => (phone = res)"
      ></my-input-label>
      <!-- 
        @changeInput="res=>password=res"
        这种是简写了
        完整写法：
        @changeInput="changeInput"
        changeInput(val){
          this.uname =val
          this.phone =val
          this.password =val
        }
      -->
      <my-input-label
        placeholder="请输入密码"
        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-field
          v-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)); //false
      if(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>

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