1.components创建一个login.vue
2.搭建一个单页面组件的框架
1 | <template></template> 写html代码,注意template标签内一定要有一个html标签包裹所写的内容,例如下面的例子就用<div id="login">包裹住 |
用element-ui组件先编写一个基本的页面
1 | <template> |
1 | export default { |
3.给form,两个input框绑定数据,给表单控件绑定用v-model
1 | <el-input v-model="loginForm.username" name="username" placeholder="请输入用户名/手机号" auto-complete="on"></el-input> |
在data里面,同样要创建数据模型
1 | data() { |
4.表单验证:使用loginRules,用于表单验证
1 | loginRules: { |
与组件绑定
5.创建api.js,用于处理在apis下创建login.js,是定义登录所需的请求服务器的接口
1 | import axios from 'axios' |
6.login.js调用api.js,token是包含用户名和密码的对象
1 | import api from '@/utils/api' |
7.创建好之后,在login.vue调用此login.js
1 | methods: { |
8.关于跨域处理问题,可见上一篇博客。即在config/index.js中修改api值。
1 | proxyTable: { |