vue3+vite+ts视频背景酷炫登录模板【英雄联盟主题】

最近我准备在自己的网站上开发一个博客系统，首先要实现后台登录界面。我选择使用Vue 3 + Vite + TypeScript框架来构建，下面是针对该主题的详细说明：

在网页中使用视频作为背景图已经相当常见了，而且网上也有很多相关的插件可供使用。我选择使用"vue-responsive-video-background-player"插件来实现这个功能。

首先，你需要通过以下命令来安装该插件：

npm install vue-responsive-video-background-player

下面是两种不同的引入方式，并将插件注册到Vue应用中：

作为组件：
在main.ts文件中引入插件，并将其作为一个全局组件注册：

import VideoBackground from 'vue-responsive-video-background-player'

Vue.component('video-background', VideoBackground);

作为插件：
在main.ts文件中引入插件，并使用Vue的use方法注册插件：

import {
    
     Plugin } from 'vue-responsive-video-background-player'

Vue.use(Plugin);

如果在使用过程中出现了找不到声明模块的错误，你可以创建一个以.d.ts为后缀的新文件，然后添加以下内容：

declare module 'vue-responsive-video-background-player'{
    
    
    const content: any
    export = content
}

这样就能解决找不到声明模块的问题了。

创建视频组件

<template>
  <div class="v_bg" style="z-index: 0;">
    <video-background src="视频地址" style="width: 100vw;max-width:100%; height: 100vh;height: 100vh;" muted preload playsWhen="canplay"
      objectFit="cover">

      <h1 style="color: white;padding-left: 20px;" >Entrie Star皆星河</h1>
    </video-background>
   
  </div>
</template>

<script setup lang="ts">
import {
    
     ref } from 'vue';

</script>

<style scoped>
body {
    
    
  margin: 0;
}
h1 {
    
    
  font-size: 3.2em;
  line-height: 1.1;
}


</style>

src（路径，必填)
autoplay（自动播放,默认值：true)
muted（静音，默认值：true)
preload（预加载，默认值：auto)
objectFit（适应容器，默认值：cover|fill|contain)

更多的组件配置可以参考vue-responsive-video-background-player文档

使用组件

//创建login.vue
<template>
   <div class="login">
      <videoTool></videoTool>
      <div class="Loginform">

         <el-row :gutter="20">
            <el-col :span="15">
               <div class="input_form">
                  <div class="title">欢迎来到英雄联盟~</div>
                  <div class="input_user">
                     <img class="user_logo" src="@/assets/lol.png">
                     <el-input v-model="username" placeholder="请输入召唤师账号" />
                  </div>
                  <div class="input_pas">
                     <img class="pas_logo" src="@/assets/R-C_pixian.png">
                     <el-input v-model="password" placeholder="请输入召唤师密码" />
                  </div>
                  <div class="input_valiCode">
                     <el-input v-model="vailcode" placeholder="请输入验证码" />
                     <valicode></valicode>
                  </div>
                  <div class="commit">
                     <el-button type="warning" >进入峡谷</el-button>
                     
                  </div>
               </div>
            </el-col>
            <el-col :span="9">

            </el-col>
         </el-row>
      </div>
   </div>
</template>

<script lang="ts" setup>
import {
    
     ref} from 'vue';
import "animate.css";

import videoTool from '@/components/videoTool.vue'
const username=ref()
const password=ref()
const vailcode=ref()
</script>

<style lang="scss" scoped>
body {
    
    
   margin: 0;
}

.login {
    
    
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;

   .Loginform {
    
    
      position: fixed;
      width: 700px;
      height: 400px;
      background-color: rgb(34, 50, 75);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999;
      opacity: 0.95;
      background-image: url('@/assets/1_pixian.png');
      background-size: 700px 400px;
      background-position: 230px 0;
      background-repeat: no-repeat;

      .input_form {
    
    
         width: calc(100% - 20px);
         height: 380px;
         margin: 10px 10px;

         .title {
    
    
            width: 100%;
            height: 80px;
            line-height: 80px;
            text-align: center;
            font-size: 30px;
            font-weight: bolder;
         }

         .input_user {
    
    
            display: flex;
            width: 90%;
            height: 80px;
            margin: 0 auto;
            align-items: center;
            position: relative;

            .user_logo {
    
    
               width: 25px;
               height: 25px;
               position: absolute;
               z-index: 1111;
            }

            :deep(.el-input .el-input__inner)::placeholder {
    
    
               text-indent: 20px;
               color: rgb(95, 40, 74);
               /* 设定缩进的距离，根据需要进行调整 */
            }
         }

         .input_pas {
    
    
            display: flex;
            width: 90%;
            height: 70px;
            margin: 0 auto;
            align-items: center;
            .pas_logo{
    
    
               width: 25px;
               height: 25px;
               position: absolute;
               z-index: 1111;
            }
            :deep(.el-input .el-input__inner)::placeholder {
    
    
               text-indent: 20px;
               color: rgb(95, 40, 74);
               /* 设定缩进的距离，根据需要进行调整 */
            }
         }
         .input_valiCode{
    
    
            display: flex;
            width: 90%;
            height: 80px;
            margin: 0 auto;
            align-items: center;
            
            :deep(.el-input ) {
    
    
               width: 200px;
               /* 设定缩进的距离，根据需要进行调整 */
            }
            :deep(.el-input .el-input__inner)::placeholder {
    
    
               // text-indent: 20px;
               color: rgb(95, 40, 74);
               /* 设定缩进的距离，根据需要进行调整 */
            }
         }
         .commit{
    
    
            display: flex;
            justify-content: center;
            
            :deep(.el-button) {
    
    
               width: 150px;
               /* 设定缩进的距离，根据需要进行调整 */
            }
         }
      }
   }
}</style>

这里是使用elementUI的组件，所以需要安装element-ui

npm install element-plus --save

安装scss

npm i sass sass-loader --save-dev

验证码组件请参考我之前的文章---->vue3+vite+ts验证码组件

常见问题

1.视频地址
视频地址不可以直接在src里引入，需要定义变量传入，例如const vurl = ref('../src/assets/test.mp4')
2.vue打包视频不会将视频，需要上传至服务器
3.视频加载很慢，卡顿建议使用对象存储将视频文件上传使用在线地址减少服务器压力

最终效果图：
在这里插入图片描述

效果预览地址：点这里

后续优化

输入框提示，登录动画，主题色
持续更新~