springboot vue 登录页面01 每天进步百分之一

1.vue 更换vue的欢迎页面，改用自己的欢迎页面，效果图

2.用vscode编辑器打开源码的路径
在源码src的目录下新建views/login/
新建vue文件 -login.vue目录结构如下

<template>    <div>        <div class="login-wrap" v-show="showLogin">            <h3>登录</h3>            <p v-show="showTishi">{{tishi}}</p>            <input type="text" placeholder="请输入用户名" v-model="username">            <input type="password" placeholder="请输入密码" v-model="password">            <button v-on:click="login">登录</button>            <span v-on:click="ToRegister">没有账号？马上注册</span>        </div>        <div class="register-wrap" v-show="showRegister">            <h3>注册</h3>            <p v-show="showTishi">{{tishi}}</p>            <input type="text" placeholder="请输入用户名" v-model="newUsername">            <input type="password" placeholder="请输入密码" v-model="newPassword">            <button v-on:click="register">注册</button>            <span v-on:click="ToLogin">已有账号？马上登录</span>        </div>    </div></template><style>    .login-wrap{text-align:center;}    input{display:block; width:250px; height:40px; line-height:40px; margin:0 auto; margin-bottom: 10px; outline:none; border:1px solid #888; padding:10px; box-sizing:border-box;}    p{color:red;}    button{display:block; width:250px; height:40px; line-height: 40px; margin:0 auto; border:none; background-color:#41b883; color:#fff; font-size:16px; margin-bottom:5px;}    span{cursor:pointer;}    span:hover{color:#41b883;}</style><script>    export default{        data(){            return{                showLogin: true,                showRegister: false,                showTishi: false,                tishi: '',                username: '',                password: '',                newUsername: '',                newPassword: ''            }        }    }</script>

接下来就是配置路由
路径位置如下图

引入登录界面，然后在路由配置路径中去掉之前的欢迎页面，加入登录页面

完成以上的步骤，启动页面就可看到登录页面了