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({})
