开始做这个系统的时候就设定了必须使用前后端分离的技术来做这个系统，由于自己是前端的小白，啥都西都不会，而且这个系统又没有人完成前端功能，所以只有自己花时间去学习前端，做一个简单的登录功能，说起来简单，做起来难，为了了解vue，我特地去学习了vue，学习了半个月之后，终于花了一周的时间做成了这个功能所以本章文章也适合0基础的伙伴跟着我这个教程学习如何使用vue搭建一个“简单的登录功能”
首先我们要使用vue技术，这个时候我们就需要安装node.js ，这里我就不再啰嗦这个功能了
由于直接是上手真实项目的开发，所以我们直接按照vue-cli这个脚手架，为什么叫脚手架不叫框架呢，我觉得就可以比喻为脚手架是一个起房子的地基，而框架是我们已经建好的毛坯房，大家可以这么理解，如果我的理解有误，欢迎大家指正
第一步，安装vue-cli
安装vue-cli之前我们先设置npm的代理，否则会非常的慢(在命令行输入)
npm config set registry https://registry.npm.taobao.org
然后我们去安装@vue/cli
npm install -g @vue/cli
第二步，创建项目
vue create youprojectName
第三步，启动项目
npm run serve
第四步，由于我想使用element UI库，所以我们需要安装elementUI
npm i element-ui -S
这是他的官方地址
element.eleme.cn/#/zh-CN/com…
第五步，使用elementUI
第六步，由于我们项目需要路由地址，所以我们安装路由
npm install --save vue-router
第七步，使用路由
第八步，由于我们项目需要使用axios去请求后端接口，所以我们安装axios
npm install --save axios vue-axios
这是他的官方地址
第九步，使用axios
第十步，由于我们的脚手架版本是4版本的，所以我们配置vue需要vue.config.js文件，如果是vuecli2版本的则需要使用config/index.js
这里的作用是创建代理，解决vue跨域的问题
具体的配置可以查看官方文档
webpack.js.org/configurati…
这个时候我们请求的时候这么写地址就好了
第十一步，解决路由的显示问题，默认我们输入路由地址是没用的，这个时候我们需要设置一下
这样我们就可以使用路由了
最后我们访问
http://localhost:8080/#/myslef
登录成功，注意这里的地址是不会变成8082的，因为我们在上面设置的代理，所以他其实访问的真实地址是，这就是后端的地址
http://localhost:8082/loginvalidate
好了，这就是一个简单的前端登录功能了，为了学习vue还是不容易，刚开始的时候肯定是丑了点，但是我现在还是边学边写，还是希望把师徒系统给做出来，谢谢你的支持。
这是程序员师徒系统的前端项目地址：
gitee.com/programmer-…
