登录页面制作
相关知识点：vue-router + element-UI + axios
先记录一下，在CLI3自动配置webpack后，针对被隐藏了的配置，如何更改别名的操作。
在下图目录中，新建vue.config.js文件，然后暴露以下代码：
首先，在view下新建login.vue文件，然后在router的index.js中配置路由，mode使用的H5的history，没有使用hash，因为history的路径更好看，但是据说...兼容性没有hash强。组件页面的加载，采用懒加载的方式，避免一次性获取过多数据，导致白屏之类的，用户体验差。
过程中，重定向的单词写成direct，导致了错误，要记住。
利用flex布局，先把login.vue组件的样式写好，其中，因为使用了element-ui，所以在main.js中引入了Element-UI和其样式文件。由于觉得按需引入太麻烦，偷懒全部引入了，缺点是加载内容过多。
今天新学习的是element-ui中的Form和Button，样式结构都很简单。需要记住的是下面几个点：
①将input中的数据和data中的数据绑定：首先在<el-form>中动态绑定属性：model=“loginData”，再在<el-input>中绑定v-model指令。
②表单验证：首先在<el-form>中动态绑定属性：rules=“loginRul”，再在<el-form-item>中，添加属性prop
③给<el-form>添加ref属性，使表单组件，可以在methods中的事件函数中被调用。
this.$refs.XXX.方法()
最后，在简单验证和交互都实现后，可以给登录按钮绑定注册请求，还是对网络请求进行了一层封装，因为在项目中重复使用axios直接去请求，有点粗鲁。
新建了network文件夹，在目录下，新建request.js文件。
最后的最后，简单的登录页面就制作完成了，不过，其实这个页面还可以做简单的优化，比如：
不管成功失败，都可弹出toast提示用户，在登录界面做一点过渡效果什么的。
效果图：
网友评论