Vue实战篇一： 使用Vue搭建注册登录界面

Vue基础篇一：编写第一个Vue程序
Vue基础篇二：Vue组件的核心概念
Vue基础篇三：Vue的计算属性与侦听器
Vue基础篇四：Vue的生命周期（秒杀案例实战）
Vue基础篇五：Vue的指令
Vue基础篇六：Vue使用JSX进行动态渲染
Vue提高篇一：使用Vuex进行状态管理
Vue提高篇二：使用vue-router实现静态路由
Vue提高篇三：使用vue-router实现动态路由
Vue提高篇四：使用Element UI组件库
Vue提高篇五：使用Jest进行单元测试
Vue提高篇六： 使用Vetur+ESLint+Prettier插件提升开发效率
Vue实战篇一： 使用Vue搭建注册登录界面

• 系列文章目录
• 一、说明
• 二、创建项目
• 三、编写注册页面组件
• 四、编写登录页面组件
• 五、路由设置
• 六、测试注册登录

• 本文将通过实战搭建管理系统的注册与登录界面，主要技术栈如下：

1. vue-cli脚手架
2. vue-router路由
3. element组件库
4. vscode编辑器
5. vetur+eSLint+prettier插件

• 请参考《使用脚手架vue-cli创建vue项目》

• 需要实现多步骤表单填写
• 需要实现表单字段校验
• 模拟验证码发送及注册成功后跳转登录

• 页面效果如下：
  
  

• 模拟验证码生成
• 填写用户名、密码、验证码进行登录
• 实现"记住我"功能

• 页面效果
  

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const constantRouterMap = [
  { path: 'https://blog.csdn.net/login',
    meta: { title: '登录', noCache: true },
    component: (resolve) => require(['@/viewshttps://blog.csdn.net/login'], resolve),
    hidden: true
  },
  { path: 'https://blog.csdn.net/register',
    meta: { title: '注册', noCache: true },
    component: (resolve) => require(['@/viewshttps://blog.csdn.net/register'], resolve),
    hidden: true
  } 
]

export default new Router({
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

1. 在注册页面首页同意注册协议
   

2. 填写用户名及邮箱，发送验证码，收取后填入验证码
   

3. 继续填写用户密码及确认密码，并提交注册
   

4. 如果填写信息有误，页面进行提示
   

5. 信息填写无误，则注册成功，并直接跳转到登录页面