Vue(二)使用Element-ui组件库渲染后台系统登录页面

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

一、项目初始化

执行指令

vue init webpack vue-shop-pro

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

二、项目初始配置

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

  "scripts": {
    "line": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    ...
    "pack": "node build/build.js"
  }
  

  line: 在线运行指令参数

  pack：物理打包指令参数

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

  autoOpenBrowser: true
  

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

三、初始化Login.vue组件

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

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

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

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

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

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

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

4. 访问效果

四、绘制登录页面背景

创建global.css样式文件

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

并填充如下内容

html,body,#app{
  height:100%;
  margin:0;
  padding:0;
}

应用global.css

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

import './assets/css/global.css'

给登录页面绘制背景

给 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>

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

现在登录页面效果：

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

五、绘制登录盒子

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

2. 给 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>
  

• 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>
  

在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>

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

六、绘制登录表单

配置ElementUI

• Element-ui参考网址

• 运行指令安装element-ui

  npm install element-ui
  

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

  npm install babel-plugin-component -D 
  

  

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

  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
  

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

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

  不需要引入相关的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>
  

  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: ''
        }
      }
    }
  }
  

• style样式部分

    .login-box {
    ……
      .el-form {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
      }
  }
  

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

绘制图标

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

图标库官网

具体使用：

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

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

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

3. 在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>
   

   示例代码：

效果：