学习笔记(一)-vue仿美团网站开发-登录页面的开发

在慕课网上报名了一门课程，从今天起，开始总结下每天的收获。之前的就不再重复了。

2019-1-9

1.首先看美团网页注册页面的样子

因为手机号发送验证码是需要花钱的，木有银子，只好用邮箱发送验证码的方式练习了。好了，开始干活儿。

 

思路：新建一个页面，页面主要由两部分构成，第一部分是上方的header,做成一个独立的layout文件，第二部分就是注册的表单，这部分用饿了么UI的form组件来搞定。

具体代码：

Step1:新建布局文件blank.vue 就是上面的header.

<template>
    <div class="layout-blank">
        <nuxt/>
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="scss">

</style>

Step2：新建页面register.vue

<template>
  <div class="page-register">
    <article class="header">
      <header>
        <a
          href="/"
          class="site-logo"
        ></a>
        <span class="login">
          <em class="bold">已有美团账号？</em>
          <a href="/login">
            <el-button
              type="primary"
              size="small"
            >登陆</el-button>
          </a>
        </span>
      </header>
    </article>
    <section>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="昵称"
          prop="name"
        >
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item
          label="邮箱"
          prop="email"
        >
          <el-input v-model="ruleForm.email"></el-input>
          <el-button
            size="mini"
            round
            @click="sendMsg"
          >发送验证码</el-button>
          <span class="status">{{statusMsg}}</span>
        </el-form-item>
        <el-form-item
          label="创建密码"
          prop="pwd"
        >
          <el-input
            v-model="ruleForm.pwd"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="确认密码"
          prop="cpwd"
        >
          <el-input
            v-model="ruleForm.cpwd"
            type="password"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="register"
          >同意以下协议并注册</el-button>
          <div class="error">{{error}}</div>
          <a
            class="f1"
            href="http://www.meituan.com/about/terms"
            target="_blank"
          >《美团网用户协议》</a>
        </el-form-item>
      </el-form>
    </section>

  </div>
</template>
<script>
  export default {
    // 表示该页面所用的模板是blank
    layout: 'blank',
    data() {
      return {
        ruleForm: {
          name: '',
          email: '',
          pwd: '',
          cpwd: ''
        },
        statusMsg: '',
        error: '',
        rules: {
          name: [
            {
              required: true,
              type: 'string',
              message: '请输入昵称',
              trigger: 'blur'
            }
          ],
          email: [
            {
              required: true,
              type: 'email',
              message: '请输入邮箱',
              trigger: 'blur'
            }
          ],
          pwd: [
            {
              required: true,
              message: '创建密码',
              trigger: 'blur'
            }
          ],
          cpwd: [
            {
              required: true,
              message: '确认密码',
              trigger: 'blur'
            },
            {
              validator: (rule, value, callback) => {
                if (value === '') {
                  callback(new Error('请再次输入密码'))
                } else if (value !== this.ruleForm.pwd) {
                  callback(new Error('两次输入密码不一致'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ]
        }
      }
    },
    methods: {
      sendMsg: function() {},
      register: function() {}
    }
  }
</script>
<style lang="scss">
  @import '@/assets/css/register/index.scss';
</style>

最后的样子：

ok。

今天的收获：

1.在nuxt框架，如何新建一个布局文件，以及如何使用它。

2.如何利用elementUI画出一个form