魔改vue2.7+vite4.x+js实现精美锁屏页面

已于 2024-05-22 12:41:14 修改
阅读量307 收藏
点赞数 6
文章标签： css vue.js javascript java
于 2024-05-22 12:24:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55362295/article/details/139116786
版权

视频观看F-Admin视频效果
锁屏入口
在这里插入图片描述
锁屏密码（和后端进行交互）

在这里插入图片描述
锁屏页面（锁屏壁纸可以随意更换）
在这里插入图片描述

解锁页面（使用格子输入框）
在这里插入图片描述
整个锁屏使用的是vue+js+css实现

想要了解请关注公众号【躺着数星星】

躺着数星星
关注
项目技术栈：Vue3 + JavaScript + Vite4.zip
04-03
Vue3是Vue.js框架的最新版本，它带来了许多性能优化和功能改进，JavaScript作为广泛使用的客户端脚本语言，为前端交互提供支持，而Vite4则是一个由Vue.js作者尤雨溪发起的新型构建工具，以其快速的开发环境启动和热...
datav Vue3+TS+Vite版.zip
04-02
**Vite** 是由Vue.js作者尤雨溪创建的新型前端构建工具，它基于ES模块和现代浏览器的原生特性，实现了快速的热更新和按需编译。与传统的Webpack相比，Vite在开发环境中启动速度更快，因为它在首次启动时不需要预先...
vue2.7 jsx 搬迁vue3.0 jsx项目的一些点
weixin_40461134的博客
06-02 371
最近公司在做低代码开发，由于公司做saas开发，搬迁了一个vue3.0的项目，vue3.0基本是ts+tsx+native开发，这边用了js+vue2.7 componentsAPI +jsx+el，下面写一些遇到的jsx使用点。
【vite】本地打包【vue2.7】 【ant-design-vue1.x】项目
FortheOne的博客
11-13 729
现有vue项目接入vite实现本地打包运行。因为是vue2.7和ant-design-vue1.x的老项目，所以遇到很多问题，本文作了简要记录。
老项目将VUE2.0项目vue-cli配置改造成vite项目配置
weixin_42285167的博客
08-09 4515
vite介绍 vite是尤大大开发的一款新的提供项目基本的脚手架和开发服务器的构建的工具。它不同于webpack做到了本地快速开发启动，模块热更新，按需编译，有无需等待整个项目编译完成的优势。原理是利用浏览器现在已经支持es6的import，根据项目实际加载需要，遇到import才会发送一个http去服务端请求加载文件。 背景 目前在公司维护一个之前开发以VUE2.0为基础采用vue-cli打包的项目。因为经过后面的业务需求开发迭代，使得目前项目像滚雪球似的慢慢变得很大。导致目前项目打包速度很慢，通常
Vite3 + Vue2.7 环境搭建(TS)
japlus的博客
11-23 2735
根据vite官网的描述：> Vite 不再支持 Node 12 / 13 / 15，因为上述版本已经进入了 EOL 阶段。现在你必须使用 Node 14.18+ / 16+ 版本。因此需要注意前端线上构建的服务器环境的nodejs版本。
Vue升级 2.7.0 踩坑集锦
小明同学c的成长日记
07-02 3504
vue 2.7 踩坑集锦
Vue3+Vite+Ts+Pinia+....一个快速开发vue3的模板框架，快速搭建前台应用.zip
02-08
Vite是由Vue.js作者尤雨溪开发的新型前端构建工具。与传统的Webpack相比，Vite利用了ES模块的原生加载能力，实现了热更新和快速启动，极大地提高了开发环境的响应速度。Vite还集成了Rollup用于生产环境的打包，确保...
基于vite2.x + vue3.x + ant-design-vue3.x + typescript基础后台管理系统模板
07-08
1. **vite2.x**：Vite是由Vue.js的作者尤雨溪开发的新型前端构建工具，它摒弃了传统的基于Webpack的打包模式，采用原生ES模块加载，实现了热更新和按需编译，极大地提高了开发效率。Vite的优势在于其快速的开发时...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-12
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于...
从 0 搭建 Vite 3 + Vue 2.7 前端工程化项目
欲变世界，先变其身
10-19 3841
Vue 2.7 正式版已经发布有一段时间啦，但目前许多公司还没有升级 Vue 3 的打算（比如我），随着 Vite 脚手架注定成为下一代前端工具链，许多用户都想基于 Vite 来构建 Vue 项目，如果想基于 Vite 构建 Vue 3 项目，社区模板完全满足您的需求，如果想构建 Vite 3 + Vue 2 + JavaScript 项目，那社区模板不太能满足您的需求，因为社区模板提供 Vue 2 项目几乎是基于 Vite 2 + TypeScript 构建，对于不熟悉 TypeScript 语言的用户不
vue旧项目升级到2.7后使用script setup语法，并使用pinia，支持typescript
10-27 3420
以前使用vue2的项目已经老了，在新项目中习惯了script setup写法之后，已经不想在写老代码了，但是将vue2整体升级到vue3又很痛，刚好vue2的终极版本2.7.13整合了script setup的用法，可以很愉快的整合并开写script setup了，其中慢慢将vuex替换成pinia，到某一天，都换完了，就能直接install vue3，何不爽YY（前提是没有很多自定义的vue2内容，仅针对script setup和store的使用）。下面就是开始愉快的改在自己需要的store逻辑了。
Vue2 + JSX使用总结
热门推荐
东扯葫芦西扯瓜——前端小菜鸟的博客
05-28 1万+
什么是JSX 摘自 React 官方： 它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言，但它具有 JavaScript 的全部功能。 Vue 什么时候应当使用JSX 这里说的是应当，而不是必须。因为在绝大多数情况下，模板语法都能胜任，只不过写起来看着不太好看而已。或者使用模板语法，那写起来恐怕不是一般的长，而且阅读会费劲很多。 下面我们来看下应当使用JSX而
Vue 2.7 正式发布，代号为 Naruto
u012384510的博客
07-01 972
大家好，我是若川。持续组织了近一年的源码共读活动，感兴趣的可以点此加我微信ruochuan12参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信进群。今天，Vue 正式发布了 2.7 版本， 版本名称为 Naruto，即火影忍者。尽管...
Vue2.7正式发布！代号为：Naruto（火影忍者），原生支持 Composition API +终于可以在Vue2项目中使用Vue3的新特性了，真香~
南北极之间
07-02 2918
今天，Vue 创始人尤雨溪刚刚正式发布了 Vue 2.x 最后一个版本：Vue 2.7，代号 "Naruto"（火影忍者）。尽管现在 Vue 3 是默认版本，但由于仍有许多用户由于依赖兼容性、浏览器支持要求或没有足够的带宽升级而不得不继续使用 Vue 2。在 Vue 2.7 中，从 Vue 3 向后移植了一些最重要的功能，以便 Vue 2 用户也可以从中受益。尤雨溪的博客：维埃角 (vuejs.org)https://blog.vuejs.org/posts/vue-2-7-naruto.html按照发布计
CSS“多列布局”（补充）——WEB开发系列35
一条晒干的咸鱼的博客
09-10 660
多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。
水平居中的几种方法（总结）
最新发布
致未来的你。的博客
09-11 679
水平居中的几种方法（总结）
css鼠标移动过去变成手的图标
qq_38880880的博客
09-10 333
【代码】css鼠标移动过去变成手的图标。
vue3+vite 在vite.config.js本地代理
06-15
Vue 3 和 Vite 是现代前端开发中的热门组合，Vite 是一个由尤雨溪（Vite的开发者）创建的高性能前端构建工具，它提供了快速的热更新和预构建能力。在使用 Vite 构建 Vue 项目时，你可能会遇到需要在 `vite.config.js` 文件中配置本地代理的情况，以便访问在开发环境下运行的 API 或静态资源。 在 `vite.config.js` 中，你可以使用 `define` 函数定义一个名为 `proxy` 的对象，这个对象的键是你希望访问的服务路径，值是一个配置对象。以下是一个基本的配置示例： ```javascript export default defineConfig({ // ...其他配置 // 本地代理配置 proxy: { '/api': { target: 'http://localhost:8080', // 你要代理的目标服务器地址 changeOrigin: true, // 允许跨域请求 pathRewrite: { '^/api' : '' } // 将请求的路径前缀 '/api' 替换为空字符串 } } }); ``` 在这个例子中： - `/api` 是你在前端应用中想访问的路径，例如 `/api/data`。 - `target` 指定了代理请求发送到的服务器地址。 - `changeOrigin` 设置为 `true`，意味着 Vite 会在发送请求时自动添加 `Origin` 头，处理跨域问题。 - `pathRewrite` 部分用于重写路径，这里将所有以 `/api` 开始的路径映射到目标服务器的根路径。 如果你有多个代理规则，可以在 `proxy` 对象中添加更多条目，每个条目对应不同的服务或路径。 相关问题： 1. Vite 的代理功能是如何实现的？ 2. 当我们在生产环境中部署时，是否还需要设置这样的代理配置？ 3. 如何在 Vite 中处理动态生成的代理路径？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值