Vue源码篇： 使用Vue搭建注册登录界面及前端源码下载

一、搭建说明

• 本文将通过实战搭建管理系统的注册与登录界面，并提供相应的前端源码下载。
• 主要技术栈如下：

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

二、效果演示

三、创建项目

• 请参考《使用脚手架vue-cli创建vue项目》
• 注意 ： node尽量使用 v10版本

三、编写注册页面组件

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

<template>
  <div class="page-register">
    <article class="header">
      <header>
        <el-avatar icon="el-icon-user-solid" shape="circle"></el-avatar>
        <span class="login">
          <em class="bold">已有账号？</em>
          <a href="/login">
            <el-button type="primary" size="small">登录</el-button>
          </a>
        </span>
      </header>
    </article>
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
    </el-steps>

    <section>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
        autocomplete="off"
      >
        <div v-if="active==0">
          <el-form-item prop="textarea">
            <el-input
              :value="ruleForm.textarea"
              type="textarea"
              :rows="10"
              :readonly="true"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="agreed">
            <el-checkbox v-model="ruleForm.agreed">同意注册协议</el-checkbox>
          </el-form-item>
        </div>
        <div v-if="active==1">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email" />
            <el-button size="mini" round @click="sendMsg">发送验证码</el-button>
            <span class="status">{
  { statusMsg }}</span>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input v-model="ruleForm.code" maxlength="4" />
          </el-form-item>
          <el-form-item label="密码" prop="pwd">
            <el-input v-model="ruleForm.pwd" type="password" />
          </el-form-item>
          <el-form-item label="确认密码" prop="cpwd">
            <el-input v-model="ruleForm.cpwd" type="password" />
          </el-form-item>

        </div>
      </el-form>
    </section>
    <div class="footer">
      <el-button
        v-if="active>0"
        type="primary"
        icon="el-icon-arrow-left"
        @click="prev"
      >上一步</el-button>
      <el-button
        v-if