一文教會你快速上手vue的登錄界面(最新版)

更新時間：2022年11月21日 08:34:58 作者：呼啦啦呼啦啦啦啦啦啦

幾乎每個項目都會使用登錄頁面,這篇文章主要給大家介紹了如何通過一文教會你快速上手vue的登錄界面,文中通過實例代碼介紹的很詳細(xì),需要的朋友可以參考下

一、創(chuàng)建vue項目

使用vue的腳手架創(chuàng)建項目，然后把不需要的內(nèi)容刪去，可以看到頁面如下：

需要注意的是你創(chuàng)建時候需要去勾選router選項,如果不勾選的話未來會很麻煩，需要自己重新配置下載，如何創(chuàng)建vue項目，可以翻找我的博文，我的博文里面有記載。

二、引入依賴

把需要的依賴引入，這里我不打算講太深，就是很簡單的把element-ui依賴下載
具體怎么下載打開terminal，輸入指令npm install element-ui -S就可以下載，下載完可以在package.json可以看到

我這里有個axios不用在意，因為我實現(xiàn)了前后端互聯(lián)，所以對于基礎(chǔ)功能而言這些是不需要注意的

三、改造下項目

app.vue改造成如下樣式

router下的index.js需要改變下，因為新的頁面為Login.vue

在assets下加入名為background的圖片，圖片已取出放在下面了

對了差點忘了要改一下main.js

代碼如下：

import Vue from "vue";
import router from "./router";
import ElementUI from 'element-ui';
import App from './App.vue';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

還有就是駝峰法則查的很嚴(yán)，

要在vue.config.js上

控制下擺脫這東西，

代碼如下：

const { defineConfig } = require(“@vue/cli-service”);
module.exports = defineConfig({<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
transpileDependencies: true,
lintOnSave: false,
});

四、寫入Login視圖

在views下創(chuàng)建Login.vue

代碼如下：

<template>
    <div>
  <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
     <h3 class="loginTitle">
       系統(tǒng)登錄
     </h3>
      <el-form-item prop="username">
          <el-input type="text" v-model="loginForm.username" placeholder="親，請輸入用戶名" >
          </el-input>
      </el-form-item>
      <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="親，請輸入密碼" >
          </el-input>
      </el-form-item>
      <el-form-item prop="code">
          <el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="點擊圖片更換驗證碼" style="width: 250px;margin-right: 5px">
          </el-input>
          <img :src="captchaUrl">

      </el-form-item>
      <el-checkbox v-model="checked" class="loginRemember">記住我</el-checkbox>
      <el-button type="primary" style="width:100%" @click="submitLogin">登錄</el-button>
  </el-form>
    </div>
</template>

<script>
export default {
  name: "Login",
    data(){
      return{
          captchaUrl: "",
          loginForm:{
              username:"admin",
              password:"ssssss",
              code:''
          },
          checked: true,
          rules:{
              username:[{required:true,message:"請輸入用戶名",trigger:"blur"},{ min: 5, max: 14, message: '長度在 5 到 14 個字符', trigger: 'blur' }
              ],
              password:[{required:true,message:"請輸入密碼",trigger:"blur"},,{ min: 6,  message: '密碼長度要大于6', trigger: 'blur' }],
              code:[{required:true,message:"請輸入驗證碼",trigger:"blur"}],
          }

      }
  },
    methods:{
      submitLogin(){
          this.$refs.loginForm.validate((valid) => {
              if (valid) {
                  alert('提交成功');
              } else {
                  this.$message.error('登錄出錯請重新輸入');
                  return false;
              }
          });
      }
    }
};
</script>

<style lang="less" scoped>
    .loginContainer{
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: aliceblue;
        border:1px solid blueviolet;
        box-shadow: 0 0 25px #f885ff;
    }
    .loginTitle{
        margin: 0px auto 48px auto;
        text-align: center;
        font-size: 40px;
    }
    .loginRemember{
        text-align: left;
        margin: 0px 0px 15px 0px;
    }
    body{
        background-image: url("../assets/background.jpg") ;
        background-size:100%;
    }
</style>

然后細(xì)細(xì)講解下代碼

style中主要控制登錄框的位置，以及如何去設(shè)計，body那里樣式是設(shè)計的全局背景圖，rules：設(shè)置了檢驗規(guī)則避免無效登錄，設(shè)置成一失去焦點就會繼續(xù)檢查，checked保證了登錄功能后續(xù)開發(fā)，巴拉巴拉一大堆但是很容易懂。