Electron + Vue跨平台应用（六）效果还不错的登录页面

Electron + Vue + Vscode构建跨平台应用（一）知识点补充
Electron + Vue + Vscode构建跨平台应用（二）Electron + Vue环境搭建
Electron + Vue + Vscode构建跨平台应用（三）利用webpack搭建vue项目
Electron + Vue + Vscode构建跨平台应用（四）利用Electron-Vue构建Vue应用详解
Electron + Vue + Vscode构建跨平台应用（五）Electron-Vue项目源码分析

一个还算不错的登录界面

搭建登录页面

  页面效果如下
            

主要运行的知识点

  1. vue组件的基本组成
  2. 元素水平居中
  3. 元素水平垂直居中
  4. 如何动态改变元素src
  5. vue数据绑定和vue指令
  6. 如何引入外部css文件

逐一解答

   1. vue组件的基本组成
一个vue文件可以认识是一个模块，一个类；其由三部分组成，最简单的代码如下

<template>
</template>

<script>
</script>

<style>
</style>

template：主要用来做view层，即在template里面你可以绘制画面
script：脚本语言，主要用来导出模块，定义变量，方法
style：css样式，为view层的元素化化妆

   2. 元素水平居中

方法：通过绝对定位使得元素水平居中

  position: absolute;
  width: 200px;
  left: 0;
  right: 0;
  margin: auto;

  3. 元素水平垂直居中

方法：通过绝对定位使得元素水平垂直居中

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto; 

  4. 如何动态改变元素src

改变一个img元素的src，我们需要使用require引入图片资源

require('../assets/eye-open.png')

  5. vue数据绑定和vue指令

vue的数据绑定是通过v-bind指令实现的，如我们绑定一个img元素的src属性

<img  v-bind:src="eyeUrl" class="eye">

他表示img标签的src属性的值为变量eye，这样我们就可以通过改变eye的值来改变img标签的src内容

vue的指令是通过v-xxx的指令完成的，比如我们给img标签添加一个点击事件

<img  v-bind:src="eyeUrl" class="eye" v-on:click ="changeInputState()">

我们就是通过v-on指令绑定click事件

  6. 如何引入外部css文件
一个vue项目如果需要引入其他文件夹中的css文件，我们可以这么做

@import "./css/styles.css"

---

  上面登录页面的全部代码如下，文件名为login.vue，路径为components/login.vue

<template>
  <div class="login">
    <img class="welcome" src="../assets/welcome.png">
    <div class="login_parent">
      <div class="login_fields__user">
        <img class="icon-user" alt src="../assets/user_icon_copy.png">
        <input class="input-user" placeholder="用户名" maxlength="16" type="text" autocomplete="off">
      </div>
      <div class="login_fields__password">
        <img  v-bind:src="eyeUrl" class="eye" v-on:click ="changeInputState()">
        <img class="icon-password" alt src="../assets/lock_icon_copy.png">
        <input class="input-password" v-bind:type="inputType" placeholder="密码" maxlength="16">
      </div>
      <div class="login_fields__submit">
        <input type="button" value="登录">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login-page',
  data () {
    return {
      inputType: 'password',
      eyeUrl: require('../assets/eye-close.png')
    }
  },
  methods: {
    changeInputState () {
      if (this.inputType === 'password') {
        this.inputType = 'Text'
        this.eyeUrl = require('../assets/eye-open.png')
      } else {
        this.inputType = 'password'
        this.eyeUrl = require('../assets/eye-close.png')
      }
    }
  }
}
</script>

<style>
body {
  font-family: "Source Sans Pro", sans-serif;
  background: #ea5c54;
}
.welcome {
  position: absolute;
  width: 200px;
  left: 0;
  right: 0;
  margin: auto;
}

/* 通过绝对定位来实现子元素在父元素中水平垂直居中
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto; 
*/

.login_parent {
  background: #35394a;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 240px;
  height: 400px;
}

/* 通过display: inline-block属性让子元素横向排列 */
.login_fields__user {
  display: inline-block;
}

.icon-user {
  position: relative;
  top: 120px;
  left: 40px;
}

/* 在input中通过color属性控制光标的颜色 */
.input-user {
  position: relative;
  top: 120px;
  left: 50px;
  width: 140px;
  color: #ea5c54;
  font-family: "Courier New", Georgia Serif;
  border: none;
  outline: none;
  background: rgba(57, 61, 82, 0);
}

/* 有焦点的时候输入框有蓝色阴影 */
.input-user:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

/* 设置placeholder颜色和字体 */
::-webkit-input-placeholder {
  color: #4e546d;
  font-family: "Courier New", Georgia Serif;
}

.icon-password {
  position: relative;
  top: 150px;
  left: 40px;
}
.eye {
  width: 25px;
  height: 20px;
  vertical-align: center;
  position: absolute;
  background-position: center;
  z-index: 1;
  background-repeat: no-repeat;
  background-attachment:fixed;
  margin-left: 170px;
  margin-top: 153px;
  margin-bottom: 25px;
}

.input-password {
  position: relative;
  top: 150px;
  left: 50px;
  width: 140px;
  color: #ea5c54;
  font-family: "Courier New", Georgia Serif;
  border: none;
  outline: none;
  background: rgba(57, 61, 82, 0);
}

.input-password:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

.login_fields__submit {
  position: relative;
  top: 190px;
  left: 50px;
}

.login_fields__submit input {
  border-radius: 50px;
  background: transparent;
  padding: 10px 50px;
  border: 2px solid #4fa1d9;
  color: #4fa1d9;
  font-size: 11px;
  -webkit-transition-property: background, color;
  transition-property: background, color;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.login_fields__submit input:focus {
  box-shadow: none;
  outline: none;
}

.login_fields__submit input:hover {
  color: white;
  background: #4fa1d9;
  -webkit-transition-property: background, color;
  transition-property: background, color;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

/*通过此方式可以引入外部css文件*/

/* @import "./css/styles.css"; */
</style>

  然后 我们需要修改路由文件路径为router/index.js，将路由从原来的LandingPage改为login

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    // {
    //   path: '/',
    //   name: 'landing-page',
    //   component: require('@/components/LandingPage').default
    // },
    {
      path: '/',
      name: 'login-page',
      component: require('@/components/login').default
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
})

这样我们执行npm run dev之后启动的页面即是登录页面了