vue实战(7):完整开发登录页面(一)
vue中使用vue-router实现登录的控制在做后台管理系统中很常见，但是不想之前熟悉的流程那样，不过只要大家理解vue-router的使用也是很好实现的。
创建登录界面 首先，我们需要创建一个登录界面，让用户输入账号和密码。可以使用Vue框架中的template语法，创建一个表单，包含账号和密码输入框以及登录按钮。
使用的技术：vuevue-routervuex首先明确的一点vue是一个写但页面的框架，以前在做登录的时候，也许是后端来控制登录的状态，把登陆的信息会放在cookie里。
项目采用Vue作为开发框架，用户浏览页面时有两种情况：一种是需要用户先登录之后才能继续浏览；另一种是用户无需登录即可随意浏览。
而对于某些功能页面，会尝试获取本地存储中的token进行判断，存在则可进入，否则跳到登录页或弹出登录框。而在vue单页中，我们可以通过监控route对象，从中匹配信息去决定是否验证token，然后定义后续行为。
登录时调用子组件内部的表单验证，最后通过Vuex拿到数据调用接口。整个可配置登录表单的逻辑就是酱子，接下来上代码。
Vue写一个曾删改的界面得几天
1、一般一周内可以完成。有编程基础的话，画一个页面一般需要一个星期左右。画好一个页面之后，这个项目还是需要一直来维护的。
2、springboot+vue写一个系统要一个星期左右。用vue重构一个中小型后台管理系统，无论是现在前端还是后端的角度，做一个后台管理系统，开发过程中的代码复用性远远大于开发前台程序，时间在一个星期左右。
3、使用VUE开发的时候，不需要js直接操作html元素，只需要管理js的变量值，html会自动更新这些值。传统的html配合js能完成的功能，VUE都给出了实现方案，开发只写简单的html和js语句就可以实现。
4、拆分成add/list/item三个组件，创建三个vue。main.js注册入口页面 引用css，竟然是在index.html中引用css。
5、写在前面：vue是什么，是一套构建用户界面的渐进式框架（官网解释），什么叫渐进式框架呢，简单回答就是主张最少，这些概念只能自己去看，自己去理解，一千个读者一千个哈姆雷特，不过多的解释。Vue官方文档 很全面的。
如何用vue写一个自定义组件
1、sideblockComponent) }}export default Sidebar像这样 引入自己编写好的组件，然后创建一个对象，并包含一个install方法，并使用Vue.component()方法注册成Vue全局组件，最后export default导出这个对象。
2、我用vue写了一个自定义数字键盘组件，用户体验度还不错。
3、递归组件Vue官方文档是这样说的：组件在它的模板内可以递归地调用自己。
4、Vue组件的定义方法不是只有我们之前写的建立.vue文件那一种，比如你还可以通过Vue.component()的方法来创建，不过这些都以后吧，我们这里就只说明.vue文件这一种(不喜欢一下子说太多，而且仔细想想，不就是API吗)。
5、这次给大家带来如何制作并使用Vue波纹按钮组件，制作并使用Vue波纹按钮组件的注意事项有哪些，下面就是实战案例，一起来看一下。