背景前端文件上传本来是一个常规交互操作，没什么特殊性可言，但是最近在做文件上传，需要实现截图粘贴上传，去找了下有没有什么好用的组件，网上提供的方法有，但是没找完整的组件来支持cv上传，经过了解发现可以用剪贴板功能让自己的cv实现文件上传，于是自己就整合了目前几种文件上传的交互方式，码了一个支持cv的vue3文件上传组件（造个轮子）。介绍作为一个完整的组件内容还是挺多的，这里主要介绍下上传交互中一些主要功能，包括上传的几种交互方式，上传进度的获取，上传类型的限制，默认上传请求和自定义上传请求。以下代码都是非完整代码，大家用于参考实现过程，可以通过以下代码修改来完成自己想要的交互功能。几种交互1，

目录前言Transition属性简写进阶用法Animations@keyframes关键帧from&toanimation动画属性简写进阶用法贝塞尔曲线(BezierCurve)总结前言实现动画效果是前端提升用户体验的重要一环，从CSS动画到JS动画帧，每种技术都有其独特的优势和适用场景，本篇文章将与大家分享浏览器CSS的原生动画技术在css中有两种动画形式，分别是Transition（过渡，元素从一种样式逐渐变成另一种样式）和Animation（动画，元素通过几个步骤定义样式改变）Transitiontransition属性用来定义元素何时启动整个过渡的开始、结束状态，以及每个过渡属性的值变

使用VueCLI配置代码压缩、加密和混淆功能简介一、配置代码压缩二、配置代码加密三、配置代码混淆总结简介在Vue应用程序的开发中，代码压缩、加密和混淆是优化应用程序性能和提高安全性的重要步骤。VueCLI是一个功能强大的开发工具，它提供了方便的配置选项来实现这些功能。本文将介绍如何使用VueCLI配置代码压缩、加密和混淆功能，以提高应用程序的性能和安全性。一、配置代码压缩VueCLI使用Webpack作为构建工具，我们可以通过配置vue.config.js文件来修改Webpack的配置，以实现代码压缩。1.创建vue.config.js文件在Vue项目的根目录下，创建一个名为vue.confi

随着chatGPT的火爆，大家越来越认识到到语言大模型的潜力，国内的类chatGPT的生成式语言大模型（LLM）也如雨后春笋般冒出来。如今大家都在探索各种prompt的技巧，其实从我个人看来，LLM其实也是一种检索模型，只不过它的检索粒度更加细致，更加语义化，尽管如此，现如今的LLM其实远没有达到人类大脑的理解能力，其生成能力仍然很大程度受到它们的模型机制以及训练预料的数据分布的限制。下面我就结合使用文心一言编写代码的实践，来谈一下自己的prompt经验。先看具体case： 好了，大家可以看到通过我的promt，文心一言给出的答案还是比较不错的，当然这里不得不提一下文心一言目前在代码生成方面和

此文为【前端修炼场】第三篇，上一篇文章链接：上一篇文章目录前言标志语言基本结构介绍声明介绍标签修饰编码形式常用HTML标签标题标签段落标签换行标识水平线标识加粗标识倾斜标识删除线标识下划线标识上标/下标标识总结前言之前我们使用过的那些标志语言，都没有具体讲解过，这一篇我将带诸位详细学习一下！标志语言我相信大家能来学习前端，对于基础的编程语言肯定有涉猎，就像是c语言一样我们都会有头文件，函数声明等等。当然我们的html也是会有文档声明，大家肯定有疑问，为什么前面我们使用的时候没有声明也没有报错，那么下面我们先介绍一下声明是什么后，来回答这个问题！基本结构介绍声明介绍先在我们的文件夹中新建一个文件

此文为【前端修炼场】第三篇，上一篇文章链接：上一篇文章目录前言标志语言基本结构介绍声明介绍标签修饰编码形式常用HTML标签标题标签段落标签换行标识水平线标识加粗标识倾斜标识删除线标识下划线标识上标/下标标识总结前言之前我们使用过的那些标志语言，都没有具体讲解过，这一篇我将带诸位详细学习一下！标志语言我相信大家能来学习前端，对于基础的编程语言肯定有涉猎，就像是c语言一样我们都会有头文件，函数声明等等。当然我们的html也是会有文档声明，大家肯定有疑问，为什么前面我们使用的时候没有声明也没有报错，那么下面我们先介绍一下声明是什么后，来回答这个问题！基本结构介绍声明介绍先在我们的文件夹中新建一个文件

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。 组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等今天给大家介绍的一款组件是自定义精美steps步骤条进度条插件物流信息跟踪展示

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。 组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等今天给大家介绍的一款组件仿美团地址管理组件列表组件可用于电商平台收获地址管理；

可视化大屏适配/自适应现状三大常用方式vw/vh方案概述：按照设计稿的尺寸，将px按比例计算转为vw和vh优点：可以动态计算图表的宽高，字体等，灵活性较高，当屏幕比例跟ui稿不一致时，不会出现两边留白情况缺点：每个图表都需要单独做字体、间距、位移的适配，比较麻烦scale方案概述：也是目前效果最好的一个方案优点：代码量少，适配简单、一次处理后不需要在各个图表中再去单独适配.缺点：留白，据说有事件热区偏移，但是我目前没有发现有这个问题，即使是地图也没有rem+vwvh方案概述：这名字一听就麻烦，具体方法为获得rem的基准值，动态的计算html根元素的font-size，图表中通过vwvh动态计算

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助前端涉及到的文件下载还是很多应用场景的，那么前端文件下载有多少种方式呢？每种方式有什么优缺点呢？下面就来一一介绍。1.使用a标签下载通过a标签的download属性来实现文件下载，这种方式是最简单的，也是我们比较常用的方式，先来看示例代码：下载就上面的这个示例，我们点击下载，发现是跳转到了百度的首页，并没有真的下载文件。因为a标签下载只能下载同源的文件；如果是跨域的文件，比如图片、音视频等媒体文件等都无法使用上面的a标签方式下载。上面的代码是直接通过书写a标签来实现文件下载；我们也可以通过js来实现，代码如下：const a = do