登录页面制作
相关知识点: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提示用户,在登录界面做一点过渡效果什么的。
效果图: