开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：整合登录和注册页面】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11451
整合登录和注册页面
内容介绍：
一、首页面登录和注册页面整合
二、在 nuxt 环境中使用安装插件 element-ui
三、整合注册页面
四、启动环境
一、首页面登录和注册页面整合
安装插件
npm install element-ui
npm install vue-qriously（下载二维码）
在控制台中输入 npm install element-ui，node modules 就会出现下载后的依赖。
二、在 nuxt 环境中使用安装插件 element-ui
修改配置文件 nuxt-swiper-plugin.js，使用插件
//引入所有插件
import vue frorn "vue"
import VueAvescmeSwiper from "vue - awes ome-swipen /dist/ssr"
import VueQriously fron "vue-qriously'
import ElementuI from "element-ui' / /element-ui 的全部组件
import "element-ui/lib/theme-chalk/index.css ' //element-ui 的 css
Vue. use(ElementuI)/使用 elementUI
vue. use(vueQriously)
Vue. use(VueAules omeSwviper)
三、整合注册页面
(1)在 layouts 文件夹创建登录注册布局页面
目的是登录注册时可以更换布局。
在 layouts-sign.vue 中创建：
<template>
<div class="sign">
<! --标题-->
<div classm""logo”>
<img srcf"~/ assets/img/logo.png" alt-"logo">
</div>
<!--表单-->
<nuxt/>
</div>
</'template>
(2)修改登录和注册超链接地址
在 layouts 中的 default.vue 修改路径：
<a href="/ login" title="登录">
<em c lass="icon18 login-icon"> < / em>
< span class="vam m15">登录</ span>
</a>
<a href=" /register" title=“注册"">
<span c lass="vam m15">注册</ span>
< /a>
(3）创建注册、登录页面
在 pages-teacher-register.vue 创建注册页面（直接复制课件页面内容）
在 pages-teacher-login.vue 创建登录页面（直接复制课件页面内容）
四、启动环境
1.在主页面点击注册，会跳转到 register 页面
该页面可以输入用户自己的昵称、手机号、验证码、密码等
2.在主页面点击登录，会跳转到 login 页面
登录页面和注册页面整合过程一样的
