Algo de comprensión sobre el empaquetado de aplicaciones, el registro y el inicio de sesión

1. Empaquetado de aplicaciones
2. Construye el proyecto
3. iniciar sesión
4. registrado

Empaquetado de aplicaciones
Generalmente, aparece a menudo al encapsular algunos proyectos. Se necesitan algunos diseños y funciones. Esto puede ayudarnos a optimizar el código, mejorar la eficiencia y mantenerlo mejor más adelante.

Construye el proyecto
Basado en webpack, cree andamios vue para el desarrollo de proyectos. Para escribir un proyecto, la página de inicio debe componerse para la página general y los saltos de ruta. Generalmente construimos proyectos, son necesarios algunos plugins, como axios, vuex, router, etc.

 "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"
  },

iniciar sesión
Escriba una verificación de formulario, que es para juzgar las condiciones de inicio de sesión, como la longitud del nombre de usuario y la contraseña, si está vacío, si el número de teléfono móvil es correcto, y luego haga clic en la función de inicio de sesión, juzgue y llame a la interfaz, y pase los parámetros del nombre de usuario y contraseña , Determine si se obtienen los datos, informe un error en caso contrario y guarde el valor del token y la información del usuario si se obtiene

registrado
Primero escriba un registro de número de teléfono móvil en el formulario de, y establezca una contraseña, haga clic para obtener el código de verificación de la información, enlace un evento de clic, al hacer clic, llame a la interfaz y pase el número de teléfono móvil (y el código de verificación gráfico), y luego haga clic para registrarse , Para llamar a la interfaz de registro y pasar el número de teléfono, la contraseña y el código de verificación para completar el registro

  <!-- 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("请输入正确得手机号");
      }