基本布局已经有了， 现在我们来开始做我们的注册页面~
当然需要注册才能发表文章啊（糟老头子坏得很， 我可以只有我一个人能发啊）。
这里我们设定只有注册才能发表文章，也就淡化了管理员这个概念。在开发中先将原型做出来，然后再对其进行迭代、重构来达到我们最终想要的效果。
准备新建 vue 组件，编写注册页面的代码
为这个组件建立路由对象
这里我们依旧是采用 ElementUI 中的组件，因为是注册，需要提交表单。
因此我们来看看 ElementUI 中表单组件相关的文档：
官方文档：
实现登录页面首先先在 views 目录下新建 Signup.vue组件。
然后编写视图代码：
<template> <div> <el-form> <el-form-item prop="username" label="用户名"> <el-input></el-input> </el-form-item> <el-form-item prop="password" label="密码"> <el-input type="password"></el-input> </el-form-item> <el-form-item prop="rePassword" label="确认密码"> <el-input type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" size="small">注册</el-button> </el-form-item> </el-form> </div> </template> <script> export default { name: "Signup" } </script> <style scoped> </style>这里只是实现了页面， 还没有实现其他的逻辑。
建立路由对象其实路由对象应该和组件建立一起，当你的组件新建之后，就应该去为它建一个路由对象。
这样你能够边写代码，边看实际效果。
import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' Vue.use(Router) export default new Router({ routes: [ { path: 'http://www.likecs.com/', name: 'home', component: Home }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ './views/About.vue') }, { path: '/signup', name: 'signup', component: () => import('./views/Signup.vue') } ] })好了， 现在我们可以来看看效果：
这个效果有点感人啊，整个元素全部铺开在页面上，完全没有用户体验了。
不行， 我们得改改，虽说不是专业的设计师。但是基本的设计还是要有的
重构布局这里我们依旧在 ElementUI 中查找看是否有现成的解决方案：
布局文档：
很好， 这里我们可以利用 el-row, el-col 来进行布局。
它是基于24分栏的栅栏布局，我们想要让这个表单居中应该怎么办呢？
要居中的话， 左右两边的栅栏数相等即可，也就实现了表单这个块元素是位于水平居中的。
代码：
<template> <div> <el-row> <el-col :span="6" :offset="9"> <el-form label-width="80px"> <el-form-item prop="username" label="用户名"> <el-input></el-input> </el-form-item> <el-form-item prop="password" label="密码"> <el-input type="password"></el-input> </el-form-item> <el-form-item prop="rePassword" label="确认密码"> <el-input type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" size="small">注册</el-button> </el-form-item> </el-form> </el-col> </el-row> </div> </template> <script> export default { name: "Singup" } </script> <style scoped> </style>上面代码中的 6 和 9都是计算得来的，总共是24，左右两边又要相等，那么中间的表单占用了 6格，还剩下18格。平分下来每边就是9格了。
现在效果就好很多了：
页面已经完成， 剩下的就是编写注册逻辑：
点击注册，首先验证密码和确认密码是否一致
密码一致则向后端接口发起请求
这里的接口我们使用 postman 模拟出来的接口。
在这之前我们先把数据定义一下， 并且绑定到表单元素中去：
data() { return { model: { username: '', password: '', rePassword: '' } }; }, <template> <div> <el-row> <el-col :span="6" :offset="9"> <el-form label-width="80px"> <el-form-item prop="username" label="用户名"> <el-input v-model="model.username"></el-input> </el-form-item> <el-form-item prop="password" label="密码"> <el-input type="password" v-model="model.password"></el-input> </el-form-item> <el-form-item prop="rePassword" label="确认密码"> <el-input type="password" v-model="model.rePassword"></el-input> </el-form-item> <el-form-item> <el-button type="primary" size="small">注册</el-button> </el-form-item> </el-form> </el-col> </el-row> </div> </template>首先给注册按钮添加对应事件：
<el-button type="primary" size="small" @click="submit">注册</el-button>