Vue实战15——使用Element-Ui完成登录注册页面

承接上文：Vue实战14——抽离全局less变量与Vuex历久化、多模块构建。本文先容怎样使用Element-ui来完成登录注册的页面，本文git地点：

https://gitee.com/vuejslearn/news-list.git

先来看看实践后果吧：

• 登录页面

登录页面

• 注册页面

注册页面

登录注册页和导航栏联动

上文中，我们以前把vuex历久化并且模块化了，同时以前将Element导入到项目里了。前一阶段的准备事情以前完成，接下去，我们开头重构我们之前的login.vue页面啦，完成登录注册页面。

起首我们必要晓得的是，登录、注册都是在login.vue文件里完成，因此，我们必要界说一个属性，用来动态的体现。我们界说toLogin，false时表现注册，true时表现登录，默许是false。因此导航栏的登录注册毗连，我们就可以如此写了：

Header.vue中的登录注册函数

登录、注册按钮的点击事变，实行外表的办法，去跳转到登录页面，典范不同，页面体现的内容也是不同的。如此，我们的登录注册页面就和导航栏联动起来了。

登录注册页面元素

接下去，我们来完成登录注册页。在这里，我们发觉，使用最多的，就是input元素，我们查察element-ui库的input组件，发觉有干系的文档。假定我们写一个用户名的输入框，并且输入框里带图标，我们该怎样写呢？如此写：