- 博客(57)
- 收藏
- 关注
RSS订阅原创 vue3在使用@import “./index.scss“报错
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.More info and automated migrator: https://sass-lang.com/d/import 2 │ @import "./index.scss";在 Sass 3.0.0.之后 导入样式使用 “@use” ，不在使用 @import 如下：
2025-05-06 19:21:35
510
原创 vue3使用轮播图组件swiper
一、在swiper的官网源码下载地址。三、在vue3项目引入swiper。三、swiper配置参数地址。二、官网浏览轮播图类型地址。四、在vue3中使用。
2025-05-06 19:15:08
807
原创 ios进入vite编辑的H5页面报错SyntaxError（白屏）
我使用VConsole打印报错，发现显示SyntaxError，就是一些js文件加载错误，经过百度，就是可能不支持es6语法导致的，那就是需要在打包的时候，转化成es5的语法。开发中，打包上线后，发现在安卓手机和iphone打开H5页面都能正常打开，在iphone12打开，出现白屏的报错，查看官网，发现使用@vitejs/plugin-legacy可以兼容传统浏览器，后面vite.config.js使用了targets下面方法，就可以了。1、使用@vitejs/plugin-legacy插件，用于。
2024-12-11 12:01:00
484
原创 Nuxt3中设置接口代理
我在使用上面这种代理的时候，踩坑了，在使用 （"dev": "nuxt dev --host",）运行项目的时候，能正常发送代理请求，获取到后端的数据，但是，在使用构建build的时候，使用预览preview，后面百度了好久，使用下面的方法，build后代理能正常使用，重要的事说三遍，踩坑研究了几天，血的教训。发现还是出现跨域问题，代理未生效。
2024-12-10 11:06:37
878
1
原创 前端在pc端设置响应式布局
在做pc的数据大屏的时候，为了做成响应式，很多时候使用vh和vw做适配，但是都不是很好的适配，下面提供通过js获取视图大小，动态改动 html的fontSize ，使用rem作为css单位
2024-12-10 10:03:33
255
原创 vue3展示pag格式动态图
在vite.config.js中进行配置，目的是把加载pag文件所需的libpag.wasm复制到项目的dist包中
2024-11-06 14:06:10
1067
原创 在vue3的vite网络请求报错 [vite] http proxy error:
不用localhost，将proxy配置中的target的地址改成使用127.0.0.1 （其他人已谈到的解决方案）另外还有大佬提到下面这个，提供参考。如果代理地址是localhost。提示：如果是使用yarn。
2024-11-05 11:08:54
1331
原创 处理报错 Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
处理vue3+vite在使用低版本sass警告 Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
2024-10-24 10:23:07
3463
原创 vue3 + vite4.0版本后环境变量配置
在env.d.ts在vite.config.ts文件配置好环境变量后，列如上面，VITE_API_BASE_URL 重命名为 __API_BASE_URL__需要给重命名的环境变量 __API_BASE_URL__ 去到 env.d.ts文件，重新声明ts类型参考官网： https://cn.vite.dev/config/shared-options#define。
2024-10-18 16:12:04
1955
原创 js原型链的理解
原型链最终指向 null 主要是为了设定一个明确的边界。如果没有这个终点，属性查找可能陷入无限循环。null 表示没有更多的原型可继承，提高性能。这样一层一层向上查找就会形成一个链式结构，我们称为原型链。当访问一个对象的某个属性时，会先在这个对象本身属性上查找。如果还没有找到就会再在构造函数prototype的。原型链的终点就是 null 因为 Object 的。上查找，即它的构造函数的prototype。直到构造函数原型对象prototype的。原型链为什么最终指向null。如果没有找到，则会去它的。
2024-09-02 11:58:48
347
原创 vue中自定义设置多语言(包括使用vue-i18n)，并且运行js脚本自动生成多语言文件
可以自己编写一个设置多语言文件在项目新建js文件，命名为：language.js，代码如下// language.js 文档CN: {frame_rules: "规则",frame_remark: "虚位拟待",},EN: {},IN: {},VI: {},MS: {},TH: {},HI: {},// 获取我们设置存放在浏览器的sessionStorage 的语言类型// // 阿拉伯语 展示顺序会相反，设置反向，使语言展示正常// }// zh 中文。
2024-07-03 12:01:14
2879
原创 swiper轮播 loop:true失效解决
数据是写死的时候，能够loop:true是有效的;数据是动态获取的loop:true就会失效。
2024-06-27 15:08:17
1503
1
原创 html5 video去除边框
webkit-playsinline="true" 适配ios ，视频初次加载不全屏。x5-video-player-type="h5" 适配ios ，视频初次加载不全屏。poster 视频加载时显示的图像，或者在用户点击播放按钮前显示的图像。controls 显示控件，比如播放按钮。autoplay 视频在就绪后自动播放。height 设置视频播放器的高度。width 设置视频播放器的宽度。muted 视频的音频输出静音。src 要播放的视频路径。
2024-06-27 14:36:29
803
原创 vue3使用mitt.js进行各种组件间通信
我们在vue工程中，除开vue自带的什么父子间，祖孙间通信，还有一个非常方便的通信方式，类似Vue2.x 使用 EventBus 进行组件通信，而 Vue3.x 推荐使用 mitt.js。优点：首先它足够小，仅有200bytes，其次支持全部事件的监听和批量移除，它还不依赖 Vue 实例，所以可以跨框架使用。(1)在组件branchAside.vue，传输参数给组件 fileAside.vue （这两个组件可以没任何关系）2、在项目中自定义ts文件引入并暴露mitt.js。1、在项目中引入mitt.js。
2024-05-20 15:53:09
608
原创 js的 for in 和 for of 的具体使用和区别
在 JavaScript 中，for...in 和 for...of 是用于迭代对象和数组的两种不同的循环结构。先说结论：推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of。for...in循环出的是key，for...of循环出的是value注意，for...of是ES6新引入的特性。修复了ES5引入的for...in的不足for...of不能循环普通的对象，需要通过和搭配使用。
2024-04-03 15:45:27
591
原创 vue3手写抽奖转盘
设置你想要的装盘样式，旋转停止在你想要停的位置，当然也可以设置随机旋转停止位置，你可以根据自己想要的样式需求任意调整css
2024-03-21 18:29:58
2363
1
原创 Vue3 or Vue2使用Svgaplayer进行.svga动画的播放
在游戏中，SVGA动画可用于制作角色动画、过场动画或特效，增强游戏的视觉吸引力。利用SVGA动画可以设计引人注目的引导页面，引导用户浏览应用的特性和功能。SVGA动画可用于展示产品的特性、功能或使用场景，为产品演示增色添彩。具有吸引力的SVGA动画能够在品牌宣传中起到突出的作用，留下深刻印象。SVGA可以用于创建各种炫酷的用户界面动画，提升用户体验和界面交互。利用SVGA动画可以创建生动的教育内容，使学习过程更有趣和易于理解。SVGA动画能够制作生动的广告素材，吸引用户关注，提高广告的效果。
2024-03-12 17:07:42
3615
原创 vue3编写H5适配横竖屏
2、把可以区分横屏还是竖屏的字段参数（自定义名字），存储进去vuex / pinia,方便后续统一更改每个页面适配样式。4、每个做好屏幕，横、竖屏两套样式，监听横屏还是竖屏的字段参数，展示出对应的横屏还是竖屏class样式。1、监听浏览器屏幕变化，通过监听屏幕宽高，辨别出是横屏，还是竖屏状态。在项目的起始根页面进行监听，我就是在App.vue文件下进行监听。3、在App.vue的全局监听添加 pinia 参数字段。
2024-02-28 17:44:36
2895
原创 js的闭包
闭包是指一个函数可以访问并操作其词法作用域之外的变量的能力。换句话说，闭包可以捕获和保存外部函数中的变量，并在自身函数中引用这些变量。// 调用外部函数，返回内部函数// 调用内部函数，输出"I am from outer function"在这个例子中，是一个闭包，它可以访问中定义的变量。即使已经执行完毫秒，仍然可以访问和操作变量。
2024-02-05 14:22:11
379
原创 js的深拷贝与浅拷贝
浅拷贝只复制对象的第一层属性，而深拷贝会复制对象的所有层级。浅拷贝中，如果原始对象的属性值是引用类型，则复制的是这个引用，而不是引用的值本身，导致原始对象和复制对象的这些属性实际上是共享的。深拷贝创建了一个完全独立的对象副本，不共享任何属性或嵌套的引用，因此更加占用内存空间，并可能涉及更复杂的复制过程。
2024-02-01 15:25:10
1160
原创 CSS选择器
◼ :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数。◼ :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数。相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red。选择器（.one>.one_1），选择父元素为.one的所有.one_1的元素 （只选择儿子元素）
2024-01-29 18:13:46
856
原创 Js设计模式
设计模式总的来说是一个抽象的概念，是软件开发人员在开发过程中面临的一般问题的解决方案。我们不暴露创建对象的具体逻辑，而是将将逻辑封装在一个函数中那么这个函数就可以被视为一个工厂。适配器用来解决两个接口不兼容的情况，不需要改变已有的接口，通过包装一层的方式实现两个接口的正常协作。在某些情况下，一个对象不适合或者不能直接引用另一个对象，而代理对象可以在两个对象之间起到中介的作用。定义了对象间一对多的依赖关系，当目标对象的状态发生改变时，所有依赖它的对象都会得到通知。（3）、抽象工厂模式。
2024-01-29 18:01:13
546
原创 Express 会话控制（权限控制）
session //类似cookie的加强版会在浏览器关闭的时候, 销毁。是一种无状态的协议，它没办法区分多次的请求是否来自于同一个客户端，实现会话控制，可以识别用户的身份，快速获取当前用户的相关信息。而产品中又大量存在的这样的需求，所以我们需要通过。实现会话控制，可以识别用户的身份，主要用于移动端。cookie //会在浏览器关闭的时候, 销毁。是以明文的方式存放在客户端的，安全性相对较低。添加在请求报文中，一般是放在请求头中。设置在请求头中，然后传递给服务器。，保存当前访问用户的相关信息。
2024-01-17 14:23:20
978
原创 js多种数组去重方法
经过实测，在1000000个随机数测试的情况下，原生Set方法为21ms，后面三个方法都在1s以上，其中使用filter+indexOf的方法达到了2s。4、使用 includes 或 indexOf：使用 Array 的 includes 或 indexOf 方法，判断元素是否已经存在于数组中，若不存在则添加到新数组中。通过将数组转换为 Set，然后再将其转回为数组，就能实现去重。2、使用 filter：使用 Array 的 filter 方法，遍历数组并返回一个新数组，只包含满足指定条件的元素。
2024-01-17 10:27:27
431
原创 Express安装与基础使用
是一个封装好的工具包，封装了很多功能，便于我们开发。是一个完整的中间件和路由系统，可以看做是一个小型的。如果静态资源与路由规则同时匹配，谁先匹配谁就响应。路由响应动态资源，静态资源中间件响应静态资源。来方便获取请求报文中的数据，并且兼容原生。来方便给客户端响应数据，并且兼容原生。第四步：设置路由中间件，然后使用。对路由进行模块化，更好的管理路由。使用函数封装公共操作，简化代码。只需要对某一些路由进行功能封装。可以像路由回调一样访问。第三步：获取中间件函数。路径中的参数（数据），则就需要路由中间件。
2024-01-16 15:36:09
4824
原创 nodemon（自动重启 node 应用程序）的安装与使用
(2).键入命令 set-ExecutionPolicy remoteSigned。windows 默认不允许 npm 全局命令执行脚本文件，所以需要修改执行策略。全局安装完成之后就可以在命令行的任何位置运行 nodemon 命令。(4)、再运行 nodemon app.js ok。我们可以执行安装选项 -g 进行全局安装。1、安装，在随意一个命令窗口都可以。自动重启 node 应用程序。(3)、输入Y 或者 A。
2024-01-14 17:59:18
1068
原创 mongoose6.0版以上操作mongodb数据库的基本使用
Mongoose 是一个对象文档模型库，官网 http://www.mongoosejs.net/
2024-01-14 00:12:42
1173
原创 MongoDB安装与基本使用
（5）下一步安装 "install mongoDB compass" 不勾选（当然你也可以选择安装它，可能需要更久的安装时间），MongoDB Compass 是一个图形界面管理工具，我们可以在后面自己到官网下载安装。下面路径会直接显示你安装的位置的路径，在步骤（3），默认安装这里显示c盘，自定义安装会显示你自定义目录位置。本人尝试下载6以上的版本，需要安装额外的驱动器，需要额外配置，没特殊需求，4版本就满足正常使用了。） 数据库是一个数据仓库，数据库服务下可以创建很多数据库，数据库中可以存。
2024-01-12 16:07:09
2446
1
原创 git基本使用
应用场景2：有时候开发分支中的代码记录被污染了，导致开发分支合到线上分支有问题，这时就需要拉一条干净的开发分支，再从旧的开发分支中，把 commit 复制到新分支。(2) 再切换回到需要合并代码的master分支（就是把layout分支代码合并到maste的分支），并且拉取该分支的最新代码，查看是否有冲突，假设有冲突就解决冲突。目前是在master分支，就是在合并代码的时候，需要把代码合并到某个分支，当前就应当位于某个分支内，然后再把另一个分支的代码，合并到当前所处的分支。于是，你的技术形象又一落千丈。
2024-01-11 11:41:27
1282
1
原创 CSS 文字溢出 、变量、渐变、伪类三角形
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果。repeating-linear-gradient() 可以平铺的线性渐变。渐变是图片，需要通过background-image来设置。- 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，一样,通过为其设置渐变颜色后，实现的渐变，后面的数字。- 线性渐变的开头，我们可以指定一个渐变的方向。就像这样，定义的时候和属性KV，没有区别，加。，在使用线性渐变的时候，使用。去控制渐变，会更加的灵活。deg deg表示度数。
2024-01-11 11:31:01
558
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人