编写登入界面login

路由

  1. hash模式(网址上带#号)
  2. hlstory模式(网址上没有#号,正式上线需要服务端支持)

准备登陆组件并添加路由

  1. 在 src/views 新建一个 Login/indexvue 页面,用作陆页面
  2. 在router 文件里去写路由规则
  3. 在app.vue 页面写路由出口

使用vue-router的步骤 

  • 第一步:创建路由组件
  • 第二步:配置路由映射:组件和路径映射关系
  • 第三步: 使用路由:通过

路由重定向 

编写登入界面login_第1张图片

 引入NavBar 导航栏

在src/utils/vant.js文件中 做vant组件的导入

 在login登入界面写入vant使用代码

@符号是v-on事件绑定的简写 可以直接在后面绑定某个事件 也可以绑定绑定某个时间名 然后在methods方法里具体阐述这个事件

引入导航栏组件写导航栏

使用表单布局写表单

根据vant已有的rule数据结构来写手机号和验证码的校验

写入正则去验证手机号和验证码





你可能感兴趣的:(前端,json)