牛股项目流程（一）

我们组选择的项目是对股票的预测与分析，在讨论分工时我被分配到去负责前端页面设计，首先要做的事就是写一个注册界面。

Vue

Vue 是一套用于构建用户界面的渐进式 JavaScript 框架 ；同时它是一个典型的 MVVM 模型的框架。vue是一个前端框架，但还是建立在HTML ，CSS ，JavaScript的基础之上的，通过编译之后依然是HTML+CSS+JavaScript组成。但是Vue是一个渐进式 JavaScript 框架，简单灵活，所以选择vue作为前端框架。

注册界面的建立

首先是创建一个vue项目，通过命令vue create project来创建项目。
创建完项目之后，在src文件夹里创建register.vue文件作为注册界面。

页面布局设计

背景图片与注册界面标题：

//template部分代码
<div id="app" class="img1"  style="position: relative;top: 0px"></div>
<div class="register-title">scow账户注册</div>
//style部分代码
.img1{
   
      background-size: 100% 100%;
      background: url('../logback.jpg') center center no-repeat;
      height: 100%;
      position: relative;
      width: 100%
    }

页面主体部分：

//template部分
<div class="register-box" >
//style部分
.register-box {
   
        width: 320px;
        height: 100%;

       margin-top: 0px;
       margin-left: 500px;


        padding: 35px 80px 35px 60px;

        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
      background-color: #ffffff;
      border-radius: 2%;

    }

页面主体的输入部分，采用四个输入框，分别是输入用户名、密码、邮箱跟验证码：

//template部分
<div class="input">
  <el-form-item  prop="registerName" style="border: none">
    <i class="el-icon-user" style="font-size: 25px"></i>
    <el-input class="textarea" v-model="username" maxLength='17' placeholder="请输入用户名" ></el-input>

  </el-form-item>

  <el-form-item  prop="registerPassword">
    <i class<