这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战
首先配置vscode的eslint，检查语法以及简单的自动修复
先安装eslint，然后首选项，
打开setting.json，然后把对应的配置粘进去，保存。
项目里.eslintrc.js写了对应的eslint规则，可以自己配置，这样在保存代码的时候，就会自动格式化了。
首先看登录页面的源码吧，src/views/login/index.vue
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left"
首先是一个这样的form，rules写校验规则，trigger: 'blur'失去焦点时进行校验。
<h3 class="title">
{{ $t('login.title') }}
</h3>
这个里面的$t('login.title') 就是国际化相关的内容了，
在src/lang下有四个语言， zh下的是
en下的是
点击页面上的切换语言，效果果然是这样。就实现了国际化功能。
然后是一个username输入框，没有做任何特殊处理
<el-form-item prop="username">
然后是一个el-tooltip包着的密码框，el-tooltip的功能是提示大写锁是否开启。很人性化。 密码框加了很多校验，keyup时检查大写锁，失去焦点，回车都做了对应的处理。密码点击可以查看的处理。
然后是一个提交按钮，回车可以实现相同功能。 然后是一些提示语句，告诉用户初始的用户名和密码，以及第三方登录button
至此html看完了，然后看一下js
首先data()返回了字段的校验规则，以及一些数据，然后watch检测路由，从中取参数，以及重定向。 然后是mounted的时候获取焦点，最后是handleLogin方法，loginForm校验成功后，$store.dispatch向vuex里存数据，然后跳转页面。
至此整个登录流程完成。作为一个后端兼职写前端，还是学到了一些东西的，以前写前端页面都是比葫芦画瓢，能用就行。最近决定把vue-element-admin啃透，提升一下前端技术。仅从这一个登录页面，已经学到了一些新技巧，以后逐步加到我司项目里，提升用户体验。
