- 博客(53)
- 收藏
- 关注
RSS订阅原创 Vue3+TypeScript 项目中，配置 ESLint 和 Prettier
typescript-eslint/eslint-plugin：插件，包含一系列TypeScript的ESint规则。eslint-plugin-vue：仅支持vue，提供的规则可以支持 .vue\js\jsx\ts\tsx 文件校验。执行命令，yarn lint-fix，项目按照eslint-prettier规则进行代码格式化。eslint-config-prettier：解决eslint和prettier冲突。eslint-config-prettier：将prettier作为eslint规则。
2024-08-09 09:48:41
1053
原创 TypeScript类型断言as
有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。出现原因：尽管props['mode']是string类型，但data中可能并不包含键名为props['mode']的这条数据。然而，当你在TypeScript里使用JSX时，只有。它没有运行时的影响，只是在编译阶段起作用。TypeScript会假设你，程序员，已经进行了必须的检查。这种方式可以告诉编译器，“相信我，我知道自己在干什么”。语法断言是被允许的。
2024-08-09 09:48:32
218
原创 从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios
postcss-px-to-viewport-8-plugin：postcss-px-to-viewport-8-plugin 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。创建一个types/index.d.ts，用于处理包括postcss-px-to-viewport-8-plugin一类的没有声明文件的依赖。然后就是test下随便创建一个路由，对应的，views下创建相应的vue文件，App.vue给上router-view。
2024-08-09 09:48:25
924
原创 node版本管理工具nvm
前端更新较快，而老项目依赖经常是基于node老版本，而新项目往往会与之冲突。nvm是一个node的版本管理工具，可以简单操作node版本的切换。根据自己的环境，选择nvm版本，选择自己习惯的下载使用方式。nvm -v检查，安装成功。下载好安装包进行安装。
2024-08-09 09:48:09
252
原创 海康威视监控rtsp播放
Real Time Streaming Protocol或者RTSP（实时流媒体协议），是由Real network 和Netscape共同提出的如何有效地在IP网络上传输流媒体数据的应用层协议。RTSP提供一种可扩展的框架，使能够提供能控制的，按需传输实时数据，比如音频和视频文件。rtsp对流媒体提供了诸如暂停，快进等控制，而它本身并不传输数据，rtsp作用相当于流媒体服务器的远程控制。传输数据可以通过传输层的tcp，udp协议，rtsp也提供了基于rtp传输机制的一些有效的方法。
2024-08-09 09:47:45
1245
原创 VideoJS播放hls视频
它的工作原理是把整个流分成一个个小的基于HTTP的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。在开始一个流媒体会话时，客户端会下载一个包含元数据的extended M3U (m3u8)playlist文件，用于寻找可用的媒体流。HLS只请求基本的HTTP报文，与实时传输协议（RTP)不同，HLS可以穿过任何允许HTTP数据通过的防火墙或者代理服务器。缓冲播放，延迟较长，不适用监控、直播等适时场景。
2024-08-08 10:52:56
320
原创 js手写点击盒子外任意位置关闭当前盒子
组件开发时，隐藏盒子通常需要进行传参或者使用仓库控制隐藏参数，需要将上面示例进行扩展变形……实现点击盒子外任意位置关闭当前盒子，点击盒子内任意位置不关闭当前盒子。需要注意的是：它以HTMLElement为参数，且返回布尔值。在不使用各种UI组件的情况下，自己敲写一个盒子或者弹窗。这里介绍一个简单实用的JS方法 contains()；，js原生方法，用于判断DOM元素的包含关系。
2024-08-08 10:52:46
177
原创 eval()由字符串获取变量值
这就需要用到eval()方法，eval()的参数为要计算的字符串（必需），其中含有要计算的 JavaScript 表达式或要执行的语句。随笔记录，这种方式的应用环境相对较少，更多的当然是使用对象key值获取变量值更方便简单...如果不将变量num装进对象数组里的话，怎么由字符串"num"获取对应变量num的值呢？字符串获取变量值，通常是将字符串转换为对象的key值，从而获取变量值，由于eval()会执行字符串，所以可以通过它来实现字符串获取变量值。
2024-08-08 10:52:36
223
原创 React Hooks
它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其转化为 class。是允许你在 React 函数组件中添加 state 的 Hook。Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。
2024-08-08 10:52:28
762
原创 Redux
Action：一个普通对象，触发数据（State）改变的方法，type属性必需，表Action的名称，其他key为携带信息，如：{ type:'ADD_TODO',text:'old value' }每当 dispatch action 的时候就会执行，state 树中的一部分可能已经变化。Store 就是用来维持应用所有的 state 树 的一个对象。reducer (Function): 接收两个参数，分别是当前的 state 树和要处理的 action，返回新的 state 树。
2024-08-08 10:52:18
150
原创 react-router-dom
component、render、children能够同时存在，权重component>render>children。Redirect from属性是地址与from匹配（可以用正则），才会重定向到to属性指定的路径。其中children中的函数无论是否匹配都会执行，接收参数match，如果不匹配返回null。Link跳转，to属性：跳转路径，可以是string、object、funcrion。Switch 是Route 从上到下匹配，如果有一个匹配，后面的就不会再继续匹配了。
2024-08-08 10:51:56
287
原创 React开发入门
原文：https://blog.csdn.net/LQ271524/article/details/114371811。目前React 16.8+的生命周期分为三个阶段，分别是挂在阶段、更新阶段、卸载阶段。同时，当 DOM 中组件被删除的时候，被称为“卸载（unmount）”。当组件第一次被渲染到 DOM 中的时候，被称为“挂载（mount）”。官网：https://zh-hans.reactjs.org/不是拼写错误 —— 它是。
2024-08-08 10:51:45
625
原创 如何使用Webpack
这时候我们发现css通过style标签的方式添加到了html文件中，但是如果样式文件很多，全部添加到html中，难免显得混乱。webpack打包出来的js文件我们需要引入到html中，但是每次我们都手动修改js文件名显得很麻烦，因此我们需要一个插件来帮我们完成这件事情。就是将文件在进行一些处理后（主要是处理文件名和路径、解析文件url），并将文件移动到输出的目录中。插件，把css样式从js文件中提取到单独的css文件中。我们的入口文件是js，所以我们在入口js中引入我们的css文件。
2024-08-08 10:51:22
744
原创 js下载文件
a> 元素最重要的属性是 href 属性，它指示链接的目标。下载静态文件时，有时我们会遇到下载提示“找不到文件”的问题，所以这里href文件的路径尽量放在根目录下的static或者public文件夹下；与标签不同的是，点击后立即下载，window.location.href可以封装在方法中，在需要时下载。标签下载扩展名.img, .pdf, .txt, .html等格式的文件也都是没有问题的；属性挺有意思的，有了这个属性我们就可以用标签实现文件的下载了。
2024-08-08 10:51:08
307
原创 Vue使用WebSocket
上图对比可以看出，相对于传统HTTP每次请求-应答都需要客户端与服务端建立连接的模式，WebSocket是类似Socket的TCP长连接通讯模式。在海量并发及客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实时性优势明显。在开发方面，WebSocket API 也十分简单：只需要实例化 WebSocket，创建连接，然后服务端和客户端就可以相互发送和响应消息。以下简要介绍一下WebSocket的原理及运行机制。
2024-08-08 10:50:56
656
原创 腾讯云对象存储COS的JS上传封装
地址：https://cos-sdk-archive-1253960454.file.myqcloud.com/cos-js-sdk-v5/latest/cos-js-sdk-v5.zip?参考：https://blog.csdn.net/qq_40146880/article/details/102829629。官网：https://cloud.tencent.com/document/product/436/11459。（可前往上面官网下载）
2024-08-08 10:50:39
205
原创 学习Vue3.0，这一篇就够了
ref 底层的本质其实还是 reactive，系统会自动根据我们给 ref 传入的值将它转换成 ref(xx) -> reactive({value: xx})其实现原理是利用ES6的import会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去webpack冗长的打包时间。由于 reactive 必须传递一个对象，所以导致在企业开发中，如果我们只想让某个变量实现响应式的时候会非常麻烦，如果是通过 shallowRef 创建数据，那么 Vue监听的是 .value 的变化，并不是第一层的变化。
2024-08-08 10:50:24
1296
原创 TypeScript（装饰器）
装饰器：装饰器是一种特殊类型的声明，它能够附加到类声明、方法、属性和参数上，可以修改类的行为。通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。第一个参数：对静态成员来说是类的构造函数，对实例成员来说是类的原型对象。第一个参数：对静态成员来说是类的构造函数，对实例成员来说是类的原型对象。常见的装饰器：类装饰器，属性装饰器，方法装饰器，参数装饰器。装饰器的写法：普通装饰器（无法传参），装饰器工厂（可传参）多个同样的装饰器则先执行后面的装饰器。第二个参数：成员的名字。
2024-08-08 10:50:06
142
原创 JavaScript 异步：微任务、宏任务与Event-Loop
同步和异步任务分别进入不同的执行环境，同步的进入主线程，即主执行栈，异步的进入 Event Queue （任务队列）。JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事，但是一个任务耗时太长，那么后面的任务就需要等待，为了解决这种情况，将任务分为了同步任务和异步任务，而异步任务又可以分为微任务和宏任务。从图中可以看到，宏任务执行顺序优先于微任务，所以JS执行顺序为：script>清空微任务>宏任务>清空微任务>宏任务>清空微任务……
2024-08-07 09:37:11
379
原创 TypeScript（接口—泛型）
软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。如果使用泛型的话，可以支持不特定的数据类型，要求就是传入和返回的类型一致，具体返回什么类型，由调用的时候决定。现在我们可以知道参数类型与返回值类型是相同的了。这允许我们跟踪函数里使用的类型的信息。来创建可重用的组件，一个组件可以支持多种类型的数据。），之后我们就可以使用这个类型。这样接口里的其它成员也能知道这个参数的类型了。
2024-08-07 09:36:30
335
原创 TypeScript（类—继承—多态）
类(class)这个概念来源于OOP（Object Oriented Programming），也就是面向对象编程，OOP是一种计算机编程架构，其有着封装，继承，多态三种特性。用abstract定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。多态：父类定义一个方法不去实现，让继承他的子类去实现，每一个子类有不同的表现。2、抽象类和抽象方法是一个标准，定义标准后，子类中必须包含抽象定义的方法。protected：保护类型，类里、子类可以访问，类外不可访问。
2024-08-07 09:36:16
159
原创 TypeScript（安装配置—数据类型—函数）
TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。项目中tsc命令报错：无法加载C:\XX\XX\tsc.ps1，因为在此系统上禁止运行脚本。取消config中注释的“outDir”，选择编辑后的文件生成目录。，它可以定义多行文本和内嵌表达式。这种字符串是被反引号包围（顾名思义，可以改变参数数据类型，和es5中一样。同名函数的参数不同时，选择执行不同方法。检查typescript安装是否成功。保存文件后，自动生成目录编译为es5。
2024-08-07 09:36:05
888
原创 IE9兼容
5.颜色rgb更换为16进制，rgba也可以通过识色转换为16机制，不过不透明，如果介意透明度的话可以外套一个div设置opacity透明度属性。4.flex布局更换为float浮动和positon定位。1.let、const更换为var声明。2.箭头函数更换为function。3.模板字符串``使用字符串拼接。
2024-08-07 09:35:54
220
原创 web移动端自适应vw、vh、rem
（视口宽度等于设备宽度，初始不缩放，用于解决页面宽高自动适配屏幕）依赖包中打开./node_modules/lib-flexible/flexible.js。相对单位，根据CSS的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化。1vw等于设备宽度的1%，同理1vh等于设备高度的1%，百分比布局。举例：浏览器默认html的字体大小为16px，则1rem=16px。1. lib-flexible，手淘开发，用于适配移动端的开源库。，顾名思义，就是我们设计稿的宽度和我们设定的最大宽度。
2024-08-07 09:35:44
393
原创 npm随笔记录
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。// 查看npm -g全局安装路径。// 查看本地全局依赖包。// 检查是否安装成功。
2024-08-07 09:35:35
73
原创 移动端常见安卓、IOS兼容问题
该样式生效时，会覆盖原来的padding-bottom，需要的话则需要calc计算，示例原padding-bottom为10px时：则可修改为padding-bottom: env(safe-area-inset-bottom + 10px);minimun-scale=1.0，maximum-scale=1.0——>页面最小、最大缩放比例。ios的overflow滚动存在卡顿和不能触底的问题，所以ios的滚动很有必要配合。initial-scale=1.0——>页面初始缩放比例1:1。
2024-08-07 09:35:22
285
原创 学jQuery看这一篇就够了
和forEach类似，这里遍历出的this是原生对象，如果需要使用jQuery方法需要在外层包裹一个$()，该方法遍历数组时需要将数组转化为jQuery对象。这个方法可以得到一个jQuery对象，而要使用jQuery，首先要得到的就是一个jQuery对象。3.fadeIn、fadeOut、fadeToggle、fadeTo（淡入淡出）2.slideDown、slideUp、slideToggle（上下）1.show、hide、toggle（大小）将jQuery对象转换回原生对象。
2024-08-07 09:34:52
391
原创 Sass和Scss
Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于Sass。由于 Scss 是 CSS 的扩展，因此，所有在 CSS 中正常工作的代码也能在 Scss 中正常工作。Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。
2024-08-07 09:34:26
751
原创 SVN的基本使用
这里显示的 SVN 仓库地址是通过计算机名称来描述的，这对于局域网内的访问没有任何问题，对于局域网外的用户，如果需要访问这个仓库，需要将计算机名称替换为本机的 IP 地址，并且这需要是一个可以被外网访问的 IP 地址，否则这个 SVN 仓库只能在局域网内网使用（通常对于档案管理这种需求，这已经最够了）！安装后，直接运行软件，显示的界面就是 VisualSVN Server 管理平台， 我们首先创建几个用户，，用户需要从我们第二步创建的所有用户中选择，设置完毕后，点击 "上右键，打开右键菜单，选择 "
2024-08-07 09:34:06
335
原创 Git远程仓库的使用
多人协作开发项目时本地仓库就不再适用了，这时候和我们就需要一个远程仓库，这里我们选择Github作为我们的远程仓库。如果其他开发成员修改了某文件并推送至远程仓库，而自己也对该文件做出了相应修改时，推送就不会成功。然后执行以下命令将本地仓库推送至远程仓库（可能会验证Github的账号密码）在后续的操作中，如果需要将本地仓库推送至远程仓库执行以下命令即可。到这我们的远程仓库就创建完成了，上图红框就是我们远程仓库的地址。推送完成，刷新仓库页面就可以看到本地仓库的内容了。2.注册登录成功后显示如下页面。
2024-08-06 15:23:14
338
原创 Git本地仓库的使用
从仓库中恢复，如果工作区该删除文件内容作出过改动，恢复的文件也只是文件之前提交时的状态，如果暂存区有该文件则恢复的是暂存区该文件，否则从Git恢复该文件。3.Git每一次提交修改都是一个新的版本，如果Git文件误删就需要版本回退，回退可能引起更多的问题存在，所以删除文件需要谨慎操作。初次运行Git前需要进行配置，配置工作只需一次，以后会沿用现在的配置，如果需要修改用相同的命令修改已有配置即可。文件夹内生成一个隐藏文件.git，未设置显示的话看不见该文件，这个.git就是我们的本地仓库。
2024-08-06 15:20:21
894
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人