In this chapter we create the login page and jump Home page. If you have any questions, please contact me at [email protected]. Ask for directions of various gods, thank you

Create the Home page

Create the SRC – page – Home. Vue

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to MyVue'
    }
  }
}
</script>

<style scoped>
</style>
Copy the code

Create a login page

Create the SRC – page – Login. Vue

<template>
  <div style="height: 100%;" :style="{backgroundImage: 'url(' + imgSrc + ')'}">
    <div class="login_box">
      <h3 class="login_title"<el-form :model="loginForm" status-icon>
        <el-form-item  prop="pass">
          <div class="input_outer">
            <span class="u_user"></span>
            <input type="text" class="login_input" v-model="loginForm.userName" placeholder="Please enter your account"/>
          </div>
        </el-form-item>
        <el-form-item prop="checkPass">
          <div class="input_outer">
            <span class="us_uer"></span>
            <input type="password" class="login_input" v-model="loginForm.password" placeholder="Please enter your password"/>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login" class="login_button"</el-button> </el-form-item> </el-form> </div> </div> </template> <script> from'element-ui';
  export default {
    data() {
      return{// User account password loginForm: {userName:"",
          password: ""ImgSrc: require('.. /images/bgi.jpg')
      }
    },
    created: function() { var _this = this; // Bind the login event document.onKeyDown =function(e) {
        var key = window.event.keyCode;
        if(key == 13) { _this.login(); }}}, methods: {// login eventslogin() {
        var _this = this;
        if(_this.datacheck ()){// page jump _this.$router.push("/home"); }}, // Data verification eventdataCheck() {if(! this.loginForm.userName){ Message.warning("Please enter your account number")
          return false;
        }
        if(! this.loginForm.password){ Message.warning("Please enter your password")
          return false;
        }
        return true;
      }
    }
  }
</script>

<style scoped>
  .login_box{
    width: 315px;
    height: 365px;
    padding: 35px;
    color: #EEE;position: absolute; left: 50%; top: 50%; margin-left: -175px; margin-top: -200px; Background: rgba (0,0,0,0.5); border-radius: 10px; } .login_title{ text-align: center; font: 20px"microsoft yahei",Helvetica,Tahoma,Arial,"Microsoft jhengHei",sans-serif;
    color: #FFFFFF;
    height: 15px;
    line-height: 15px;
    padding: 0 0 35px 0;
  }
  .login_input{
    width: 220px;
    height: 46px;
    outline: none;
    display: inline-block;
    font: 14px "microsoft yahei",Helvetica,Tahoma,Arial,"Microsoft jhengHei"; margin-left: 50px; border: none; background: none; line-height: 46px; color: rgb(255, 255, 255) ! important; } .input_outer { height: 46px; padding: 0 5px; margin-bottom: 20px; border-radius: 50px; position: relative; Border: rgba(255,255,255,0.2) 2px solid! important; } .u_user { width: 25px; height: 25px; background: url('.. /images/login_ico.png');
    background-position: -125px 0;
    position: absolute;
    margin: 10px 13px;
  }

  .us_uer {
    width: 25px;
    height: 25px;
    background-image: url('.. /images/login_ico.png');
    background-position: -125px -34px;
    position: absolute;
    margin: 10px 13px;
  }
  .login_button{
    border-radius: 50px; width: 100%;
  }
</style>Copy the code

Modify the SRC to the router, the index. Js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/page/Home'
import Login from '@/page/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Login
    },
    {
      path: '/home',
      component: Home
    }
  ]
})Copy the code

4. Modify app.vue

<template>
  <div id="app" style="height: 100%;">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
  }
</style>Copy the code

Five: modify index.html

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>myvue</title>
  </head>
  <style>
    html,body{
      margin: 0;
      padding: 0;
      height: 100%;
    }
  </style>
  <body>
    <div id="app"></div>
  </body>
</html>Copy the code

Tutorial required pictures please go to code cloud address to download

Six: test

Run NPM run dev






The project address

gitee.com/beany/myVue

Github.com/MyBeany/myV…

Writing articles is not easy, if it is helpful to you, please help click star

At the end

Setup login page and jump Home page have been completed, the subsequent functions will be updated in succession, if you have any questions, please contact me at [email protected]. Ask for directions from various gods, thank you.