关于app封装搭建，注册登录的一些理解

1. App封装
2. 搭建项目
3. 登录
4. 注册

App封装
一般就是去封装一些项目的时候经常出现的，必须一些布局、功能，这样可以帮助我们优化代码，提高效率，后期更好维护

搭建项目
基于webpack，创建vue脚手架，进行项目的开发。写项目，首页要去进行整体页面的排版，以及路由的跳转。一般我们搭建项目，一些插件是必须要用的，比如axios，vuex，router等

 "dependencies": {
    
    
    "axios": "^0.21.0",
    "core-js": "^3.6.5",
    "vant": "^2.10.11",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },

登录
写一个form表单验证，里面是判断登录的条件，比如用户名和密码的长度，是否为空，手机号码是否正确，然后再点击登录的函数中，判断，并调用接口，传入用户名和密码的参数，判断是否获取到数据，没有就报错，获取到就保存token值和用户信息的值

注册
先写一个from表单手机号注册，并设置密码，点击获取信息验证码，绑定一个点击事件，在点击的时候，调用接口并传入手机号（和图形验证码），然后在点击注册的时候，去调用获取注册接口，并传入手机号、密码及验证码，完成注册

  <!-- html代码 -->
  <!-- 手机号 -->
        <div class="int_num">
          <input type="number" placeholder="请输入手机号" maxlength="11" v-model="mobile" />
          <div class="getC" @click="isSendCode">{
    
    {
    
    codeTxt}}</div>
        </div>
        <!-- 找回密码 -->
        <div class="other">
          <span class="forget">*未注册得手机号将自动注册</span>
          <span class="login_cap" @click="$router.push('/login')"> 使用密码登录</span>
        </div>
      </div>
      <!-- 登录按钮 -->
      <div class="login">
        <span @click="submitLogin">登录</span>
      </div>

  // 验证手机号正则
      let phone = /^1[3456789]\d{9}$/;
      if (phone.test(this.mobile)) {
    
    
        let {
    
     data } = await smCodeAjax({
    
    
          mobile: this.mobile,
          sms_type: "login"
        });
        console.log(data);
        //   console.log(res);
        if (data.code == 200) {
    
    
          this.isSendCode = true; //验证码发送状态为真
            this.time();
          this.$toast(data.msg);
        }
      } else {
    
    
        this.$toast("请输入正确得手机号");
      }