1.创建脚手架
```
Vue create 项目名称
```
2.删除不需要文件
3.登录页
a.在views 下创建login文件夹，再创建Login.vue文件
4.初始化样式
a.在asset文件夹下新建styles文件夹下，再创建reset。less文件
b.在App.vue组组件引入reset.less文件
5.安装vue add element
a. still product -y
b. 自导入
c.zh-CN
6.Login.vue 页面布局
7.前端表单验证
8.发送axios请求
a:响应错误？ 跨域？ 设置代理 配置vue.congfig.js
b.在根目录下创建文件vue.congfig.js
```
vue.config.js
module.exports = {
//port :''
proxy: {
'/api': {
target: 'http://192.168.113.117:8080',
pathRewrite: {
'^/api': ''
}
}
}
}
```
Login.vue
```
methods :{
submitForm() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
axios.post('/api/tokens',{
username : this.ruleForm.username,
password : this.ruleForm.password
})
.then(res=>{
console.log(res)
})
.catch(err=>{
console.log(err)
})
}
else {
console.log('error submit!!');
return false;
}
});
}
```
b.发送登录请求
9.请求响应fromdata
a.引入qs库
b.封装请求参数 qs.stringify({})
