從零搭建自己的Vue管理端框架（三）

Mr_初晨發表於2018-08-17

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>複製程式碼

說明：教程所需圖片請大家去碼雲地址中下載