Vue练习-后台管理的登录页面

登录页面制作

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

效果图：