外卖app学习笔记

(1) 短信验证码登录和高德定位

基本的项目结构搭建

1. 在views目录下建立一个index.vue作为首页
2. 在public目录下建立一个css文件夹放默认样式的js文件 网址：meyerweb.com/eric/tools/css/reset
3. 在views目录下建立一个login.vue作为登录页
4. 在router.js设置好路由（可以按需加载），设置路由守卫

//路由守卫
router.beforeEach((to,from,next)=>{
  const isLogin=localStorage.ele_login?true:false;
  if(to.path=='/login'){
    next();
  }else{
    //是否在登陆状态下
    isLogin?next():next('/login')
  }
})

登陆页面的组建搭建

1. 在components文件夹下建立一个inputgroup.vue
2. 定义好需要接受的数据类型
3. 然后在登陆页面引入这个zu'jian

<template>
  <div class="text_group">
    <div class="login">
      <h3>注册&登陆</h3>
      <input :type="type" :value="value" :placeholder="placeholder" :name="name" @input="$emit('input',$event.target.value)">
      <input :type="type" :value="value">
      <button v-if="btnTitle" :disabled="disabled" @click="$emit('btnClick')">{{btnTitle}}</button>
      <!-- 错误提醒 -->
      <div class="invalid-feedback" v-if="error">{{error}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'inputgroup',
  props: {
    type:{
      type:String,
      default:'text'
    },
    value:String,
    placeholder:String,
    name:String,
    btnTitle:String,
    disabled:Boolean,
    error:String,
  }
}
</script>

然后在登陆页面引入这个组件