从零搭建本身的Vue管理端框架（三）

Hello你们好，本章咱们建立登陆页和跳转Home页 。有问题能够联系我mr_beany@163.com。另求各路大神指点，感谢

一：建立Home页

建立src→page→Home.vue

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

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

<style scoped>
</style>
复制代码

二：建立登陆页

建立src→page→Login.vue

<template>
  <div style="height: 100%;" :style="{backgroundImage: 'url(' + imgSrc + ')'}">
    <div class="login_box">
      <h3 class="login_title">欢迎登陆MyVue</h3>
      <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="请输入帐户"/>
          </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="请输入密码"/>
          </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>
  //引入elementui  中消息提示插件
  import { Message } from 'element-ui';
  export default {
    data() {
      return {
        //用户帐号密码
        loginForm: {
          userName: "",
          password: ""
        },
        //背景图路径
        imgSrc: require('../images/bgi.jpg')
      }
    },
    created: function() {
      var _this = this;
      //键盘回车键绑定登陆事件
      document.onkeydown = function(e) {
        var key = window.event.keyCode;
        if(key == 13) {
          _this.login();
        }
      }
    },
    methods: {
      //登陆事件
      login() {
        var _this = this;
        if(_this.dataCheck()){
          //页面跳转
          _this.$router.push("/home");
        }
      },
      //数据校验事件
      dataCheck(){
        if(!this.loginForm.userName){
          Message.warning("请输入帐号")
          return false;
        }
        if(!this.loginForm.password){
          Message.warning("请输入密码")
          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>复制代码

修改src→router→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
    }
  ]
})复制代码

四：修改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>复制代码

五：修改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>复制代码

说明：教程所需图片请你们去码云地址中下载

六：测试

运行npm run dev

项目地址

gitee.com/beany/myVue

github.com/MyBeany/myV…

写文章不易，如对您有帮助，请帮忙点下star

结尾

搭建建立登陆页和跳转Home页已完成，后续功能接下来陆续更新，有问题能够联系我mr_beany@163.com。另求各路大神指点，感谢你们。