熟悉项目

运行项目

1. 删除 node_module 和 package_lock.json 这两个文件主要就是一些项目的依赖以及记录的模块的下载地址
2. npm install，一键安装项目所需要的依赖包
3. 核对node版本和node-sass、node-less之间的版本对应关系，安装适合的版本
4. npm run serve

登录页面

1. 项目采用了vant组件库，登录页面使用了 van-field输入框 van-button提交按钮 van-grid宫格(用于图片布局或导航) van-sticky 粘性布局 van-dropdown 下拉菜单 tab标签页以及标签所对应的不同内容
2. vue中有一个provide，会返回一个对象。和data和methods是平级的，把父组件的方法或者其他属性放入provide内部后，子孙组件就可以使用inject直接获取了。
3. 判断用户的输入是类型是数字，是的话就是输入的为手机号，需要在手机号前+86，猜测是调用发送接口验证码的时候需要。
4. 根据输入的密码长度判断是否允许登录

5. $emit通常用于子组件调用父组件方法，实现子组件主动与父组件通信。实现方式是在子组件上使用this.$emit，然后父组件在子组件标签中使用@将方法传递过去。项目中实现该功能 是利用了.sync。具体实现方式如下：

   <son :age.sync="age"></son>   //父组件
   //子组件触发事件
   mounted(){
    console.log(this.$emit('update:age',123));
   }

   项目中的.sync主要是实现数据的双向绑定，因为一个input框中只能使用一次v-model及逆行双向数据绑定，而.sync可以实现多个双向绑定。具体实现方式如下：

   watch:{
   mValue1: {  //首先监听mValue1变量(v-model绑定的变量)
   handler(newVal){
    this.$emit('update:value1,'newVal)  //mValue1只要变动就传递给value1
   }
   },
   value1: {
   handler(newVal){
    this.mValue1 = val
   },
    immediate: true
   }
   }

   疑问：两个值完全一样为什么要分别定义

6. this.$refs.xxx
   可以获取div的信息

首页

1. 页面比较简单，很多变量不太懂有什么用处