当前位置:   article > 正文

Vue(二)使用Element-ui组件库渲染后台系统登录页面_如何在登录成功后自动渲染

如何在登录成功后自动渲染

我们想要实现的最终效果为:

1555817105664

一、项目初始化

执行指令

vue init webpack vue-shop-pro
  • 1

把项目的结构文件创建出来

在这里插入图片描述

二、项目初始配置

  • package.json中给webpack做指令配置

    "scripts": {
      "line": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
      ...
      "pack": "node build/build.js"
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5

    line: 在线运行指令参数

    pack:物理打包指令参数

在这里插入图片描述

  • 在config/index.js中做开发配置

    autoOpenBrowser: true
    
    • 1

    在线运行项目会自动开启浏览器

在这里插入图片描述

三、初始化Login.vue组件

新建 src/components/Login.vue 文件,并设置简单内容

在 src/router/index.js 文件中给Login.vue配置路由

import Login from '@/components/Login'
{ path: '/login', component: Login }
  • 1
  • 2

可以把 src/App.vue 根组件的默认图片css样式给去除掉

  1. 创建Login.vue文件并设置简单内容

在这里插入图片描述

  1. 给Login.vue设置请求路由,具体在src/router/index.js设置

在这里插入图片描述

  1. 给App.vue把默认图片和css样式去除

在这里插入图片描述

  1. 访问效果

在这里插入图片描述

四、绘制登录页面背景

创建global.css样式文件

为了使得全部的组件都拥有统一的css样式,现在创建全局样式文件 src/assets/css/global.css

并填充如下内容

html,body,#app{
  height:100%;
  margin:0;
  padding:0;
}
  • 1
  • 2
  • 3
  • 4
  • 5

在这里插入图片描述

应用global.css

为了使得global.css生效,请在 src/main.js 主入口文件中做引入操作

import './assets/css/global.css'
  • 1

在这里插入图片描述

给登录页面绘制背景

给 src/components/Login.vue 文件设置如下内容

<template>
  <div id="login-container">
    <h2>用户登录系统</h2>
  </div>
</template>

<style lang="less" scoped>
#login-container {
  background-color: #2b4b6b;
  height: 100%;
  overflow: hidden;
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

script标签 不需要时,可以暂时不用设置

在这里插入图片描述

现在登录页面效果:

在这里插入图片描述

上图的12306端口如果需要可以通过修改config/index.js配置文件设置

五、绘制登录盒子

  1. 准备素材图片 src/assets/Vue(二)使用Element-ui组件库渲染后台系统登录页面/logo.png

在这里插入图片描述

  1. 给 src/components/Login.vue 文件做内容设置
  • template标签内容

    <template>
      <div id="login-container">
        <div id="login-box">
          <div id="logo-box">
            <Vue(二)使用Element-ui组件库渲染后台系统登录页面/ src="../assets/Vue(二)使用Element-ui组件库渲染后台系统登录页面/logo.png" alt>
          </div>
        </div>
      </div>
    </template>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
  • style标签内容

    <style lang="less" scoped>
    #login-container {
      background-color: #2b4b6b;
      height: 100%;
      overflow: hidden;
      #login-box {
        width: 450px;
        height: 304px;
        background-color: #fff;
        border-radius: 4px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        #logo-box {
          width: 130px;
          height: 130px;
          border: 1px solid #eee;
          border-radius: 50%;
          padding: 8px;
          box-shadow: 0 0 10px #eee;
          position: absolute;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: #fff;
          Vue(二)使用Element-ui组件库渲染后台系统登录页面/ {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
          }
        }
      }
    }
    </style>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

在Login.vue中具体实现:

在这里插入图片描述

style样式的具体代码:

<style lang="less" scoped>
  .login-container{
    background-color:#2b4b6b;
    height:100%;
    overflow: hidden;
    .login-box{
      width:450px;
      height:304px;
      background-color:#fff;
      border-radius: 4px;
      position:absolute;
      left:50%;
      top:50%;
      transform: translate(-50%,-50%);
      .avatar-box{
        width:130px;
        height:130px;
        border:1px solid #eee;
        border-radius: 50%;
        padding:8px;
        box-shadow: 0 0 10px #eee;
        position:absolute;
        left:50%;
        transform:translate(-50%,-50%);
        background-color:#fff;
        Vue(二)使用Element-ui组件库渲染后台系统登录页面/{
          width:100%;
          height:100%;
          border-radius: 50%;
          background-color:#eee;
        }
      }
    }
  }
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

现在登录窗口盒子和logo图片效果为:

在这里插入图片描述

六、绘制登录表单

配置ElementUI

在这里插入图片描述

  • 安装plugin插件(使得element-ui可以做 按需引入)

    npm install babel-plugin-component -D 
    
    • 1

    在这里插入图片描述

  • 修改 .babelrc 配置文件给plugin做按需引入配置

    "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

在这里插入图片描述

  • 在项目主入口文件 src/main.js 中给element-ui做引入配置

    import ElementUI from 'element-ui'
    Vue.use(ElementUI)
    
    • 1
    • 2

    不需要引入相关的css文件,因为已经做了“按需引入”了

在这里插入图片描述

之后重启webpack

在这里插入图片描述

绘制各个表单域

绘制 用户名、密码、登录、重置 按钮等表单域

给 src/components/Login.vue 文件做内容设置

  • template标签内容

    <template>
      <div class="login-container">
        <div class="login-box">
          <div class="avatar-box">
            <img src="../assets/Vue(二)使用Element-ui组件库渲染后台系统登录页面//logo.png" alt>
          </div>
    
          <el-form ref="loginFormRef" :model="loginForm">
            <el-form-item>
              <el-input v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="loginForm.userpass"></el-input>
            </el-form-item>
              <el-row>
                <el-col push="15">
                  <el-button type="primary">登录</el-button>
                  <el-button type="info">重置</el-button>
                </el-col>
              </el-row>
          </el-form>
        </div>
      </div>
    </template>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    ref=“loginFormRef” 使得可以通过Vue方法找到当前的form表单

    :model=“loginForm” v-bind:属性绑定,把表单域信息对象绑定给model属性

    ​ model在此处就是一个普通的属性名称,与v-model没有任何关系

    el-row/el-col 是对内容列进行定位的

    :offset=“15” 当前列的左侧的间隔格数

  • script内容

    export default {
      data() {
        return {
          // 用户登录表单数据对象(用户名、密码)
          loginForm: {
            username: '',
            userpass: ''
          }
        }
      }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
  • style样式部分

      .login-box {
      ……
        .el-form {
          position: absolute;
          bottom: 0;
          width: 100%;
          padding: 20px;
          box-sizing: border-box;
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

在Login.vue的结构中绘制如下内容:

在这里插入图片描述

绘制图标

element-ui提供了一些图标,但是数量有限,如果需要其他图标可以去 阿里妈妈图标库 使用更全的图标

图标库官网

具体使用:

  1. 把下载好的图标库文件复制到项目指定位置:

在这里插入图片描述

  1. 在main.js中引入图标库样式文件

    // 引入“图标”css样式文件
    import './assets/fonts/iconfont.css'
    
    • 1
    • 2

在这里插入图片描述

  1. 在Login.vue中给表单域添加图标

    <el-form-item prop="username">
      <el-input v-model="loginForm.username">
        <i slot="prefix" class="iconfont icon-user"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="loginForm.password">
        <i slot="prefix" class="iconfont icon-3702mima"></i>
      </el-input>
    </el-form-item>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    示例代码:

在这里插入图片描述

效果:

在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/115435?site
推荐阅读
相关标签
  

闽ICP备14008679号