Vue(二)使用Element-ui元件庫渲染後臺系統登入頁面

王紅珠發表於2019-04-23
VueUI元件

我們想要實現的最終效果為:

1555817105664

一、專案初始化

執行指令

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

在這裡插入圖片描述

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

    示例程式碼：

在這裡插入圖片描述

效果：

在這裡插入圖片描述

相關文章