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>
   

   示例程式碼：

效果：