Vue项目如何创建首页发送axios请求

这是个全新的Vue项目,引入了ElementUI

 将App.vue里的内容干掉,剩如下

然后下面的三个文件也可以删掉了

在views文件下新建Login.vue组件

 到router目录下的index.js

 那么现在的流程大概是这样子的

 启动

 写登陆页面

给登录按钮添加点击事件

添加方法

 添加表单校验  暂时先吧:ref="form"去掉

校验的username,password,code需要和上面的对应上 需要加prop属性

测试,校验规则是存在的,但是出现的问题是点击表单还是生效的

在点击登录时候添加表单校验

会自动根据我们自己定义的校验规则来校验,还是将用户名长度改成5位好了 

用ElementUI的showMessage

效果如下

接下来需要发送axios请求

安装axios

安装完成,可以在package.json文件看到

 组件里引入

 这里我随便建个后端,先进行演示,会出现跨域现象,这里跨域先不讲

 看下返回的信息里有什么