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

这篇具有很好参考价值的文章主要介绍了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>
  1. src(路径,必填)
  2. autoplay(自动播放,默认值:true)
  3. muted(静音,默认值:true)
  4. preload(预加载,默认值:auto)
  5. 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.视频加载很慢,卡顿建议使用对象存储将视频文件上传使用在线地址减少服务器压力

最终效果图:
vue3+vite+ts视频背景酷炫登录模板【英雄联盟主题】,前端,vue.js,前端,javascript,css

效果预览地址:点这里

后续优化

输入框提示,登录动画,主题色
持续更新~文章来源地址https://www.toymoban.com/news/detail-615701.html

到了这里,关于vue3+vite+ts视频背景酷炫登录模板【英雄联盟主题】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 vite ts引入vue文件报错 ts(2307)

    vue3 vite ts 生成的项目模板,在ts文件中引入vue文件报错 ts(2307),只是ts报错,并不影响项目运行。 官方文档有说明:http://vue.dragonlm.com/guide/typescript/overview.html#ide-support 解决方法是安装插件,之后即可正常解析路径,并可以跳转到对应文件。 TypeScript Vue Plugin (Volar)

    2024年02月16日
    浏览(53)
  • Vue3动态路由(Vite+Vue3+TS+Mock)

    Vue通过路由进行页面管理,不同的路由绑定到不同的页面。一般来说,前端直接写好的路由为静态路由,在不修改代码的情况下,路由表是不会改变的。对于不需要动态改变路由表的网站,静态路由就已经足够了,但是当页面需要与权限进行绑定时,不同用户允许浏览的页面

    2024年02月02日
    浏览(114)
  • vite vue3项目打包,跳过ts检查

    遇到这个问题是因为vue文件中script标签没有写lang造成的  剩下的ts类型检查错误  \\\"build\\\": \\\"vue-tsc --noEmit --skipLibCheck vite build\\\",是因为这个vue-tsc打包对ts进行了类型检查,需要全部解决了才行,可以关闭,直接改成\\\"build\\\": \\\"vite build\\\",

    2024年02月16日
    浏览(54)
  • 【Vue3+Ts+Vite】配置滚动条样式

    2024年02月15日
    浏览(43)
  • 3d环形图开发(vue3+vite+ts)

    开发效果(待完善):   技术支持: Echarts  echarts-gl 安装: 注:echarts与echarts-gl版本需对应,可参考官网 pnpm add echarts@4.9.0 echarts-gl@1.1.2  组件封装:

    2024年02月07日
    浏览(45)
  • vue3+vite+ts+elementplus创建项目

    # vue3+vite+ts+pinia 学习笔记 ## 1、创建项目: npm init vite@latest     选择: vue、ts ## 2、进入项目目录后:npm install 安装 ## 3、运行项目: npm run dev ## 4、安装常用插件:     1、安装 npm install vue-router@latest 配置:在src目录下新建router目录,创建index.ts文件代码如下:       ```javascript 创建

    2024年02月09日
    浏览(60)
  • Nuxt+Vue3+TS+Vite入门教程

    什么是Nuxt3 Nuxt3是一个基于Vue.js的应用框架,它提供了一些默认的配置和约定,使得开发者可以更快速地构建出高质量的Vue.js应用程序。Nuxt3是Nuxt.js的下一代版本,它采用了全新的架构和设计,提供了更好的性能和可扩展性。 Nuxt3 的优势 1、更快的启动和渲染速度 2、更好的性

    2024年02月08日
    浏览(42)
  • 基于Vue3+TS+Vite+Cesium创建项目

    随着近几年社会的发展,人们对三维可视化的需求也是越来越多,三维GIS如今真的越来越火了,对于做GIS前端开发的人员来说,Cesium开发是绝对绕不开的一门技术,所以今天来说说如何利用当下最火的 Vue3+TS+Vite 来搭建一个基于Cesium的项目开发环境。 1.使用 yarn create vite 创建

    2024年02月05日
    浏览(70)
  • Electron + Vue3 + Vite + TS 构建桌面应用

    之前是使用React、Electron、TS和webpack来构建桌面应用的。虽然功能齐全,但是打包等等开发的体验不太理想,总感觉太慢了。作为一个开发者,我们总是希望,执行构建命令后,可以快速打包或者启动本地应用,且通过更少的配置,来完成开发体验。 现在的vite已经得到广泛的

    2024年02月14日
    浏览(60)
  • Vue3通透教程【十七】Vite构建TS版本Vue项目

    专栏介绍: 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其

    2024年02月13日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包