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

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/weixin_44717761/article/details/89478996

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

一、项目初始化

执行指令

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文件并设置简单内容

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;
}

应用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

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>

• 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. 把下载好的图标库文件复制到项目指定位置：

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

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

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>

   示例代码：

效果：