qq_51553982的博客

Pinia-Storage是使用TypeScript编写的Pinia的持久化存储解决方案，可根据业务需求将state中的数据存储到localStorage和sessionStorage中，依赖于性能更好、扩展性更强、灵活度更好的fastify组织提供的序列化方案：fast-json-stringify和反序列化方案：secure-json-parse，因此在性能上强于pinia的持久化插件pinia-plugin-persist。的性能主要取决于被序列化对象的大小和结构，以及机器的硬件配置。

RouterBootUI组件库（Vue3+TS+Scss/Sass+Vite+Lerna+Rollup）基于localStorage的优化页面存储方案wosqljwtToken解决方案jquicker-spring-boot-starteralibaba-oss解决方案routerboot-oss-spring-boot-starter对axios的封装方案日程时间轴引擎timepipe本人在此承诺，相关所有组件开源，文章免费。

平行光是沿着特定方向发射的光。这种光的表现像是无限远,从它发出的光线都是平行的。常常用平行光来模拟太阳光的效果。我们可以清楚看到周围的环境光给了一个粉色的光源，所以反射到我们眼睛里的就是粉光，而正上方y轴射过来的是白光。其中第三个参数是光源到光照强度为0的位置，设置100即光可以找到100的位置，超过一百则无光。从一个点向各个方向发射的光源，我们可以用这个光来制作灯光的效果。只有我们使用标准材质的时候才能结合光源产生光的效果。环境光会均匀的照亮场景中的所有物体，

我们使用到的是BufferGeometry对象构建几何体，然后设置点的位置，最后将几何体通过点绘制出来。通过使用dat.gui可以动态调整视图。

从这里我们可以知道在使用getElapsedTime的时候已经记录了oldTime，下一行getDelta获取的是oldTime到当前调用的秒数，自然很短很短约等于0，所以会导致输出为0。如果performance.now可用，则 Clock 对象通过该方法实现，否则回落到使用略欠精准的Date.now来实现。缩放其实也是使用Vector3做的所以和移动一样可以通过x,y,z属性调整，也可以使用set直接设置。旋转使用是Eular欧拉角，也可以设置x,y,z当然也能用set方法直接设置。

登录GitHub搜索three.js。然后我们任意选择我们需要看的即可。在package.json中。使用VSCode打开。

用于简单模拟3个坐标轴的对象，红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴。用于模拟相机视锥体的辅助对象，它使用 LineSegments 来模拟相机视锥体。Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。和动画不同的是，轨道控制器由用户操控，手动调整位置来观察物体。用于模拟方向的3维箭头对象。

很简单，我们直接输入名称、版本、以及设置出的颜色就可以直接生成了，注意颜色需要为16进制的颜色，若修改输入需要刷新一下。生成后选择下面的代码复制即可使用了，可以直接复制到HTML中或Markdown里。

用处：我们可以使用这个方式生成全局唯一的标识以动态设置组件的ID标识，用于绑定，生成等等。需要注意版本，支持版本为TypeScript 4.6+直接调用以下方法即可获得。

现在有以下场景：我们在写一个组件时设置了很多个主题，但是主题的名称由用户传入，我们也不知道用户会使用哪个主题，此时我们要怎么做呢？设置存放css属性的地方，如果这个地方看不懂的话，你需要再去好好学习以下scss的基础函数（mixmin）部分。解答：其实我们这时候只要设置用户能够传入的主题然后，通过遍历设置好于主题响应键的Map集合即可。函数进行取用，其中第一个参数是map的名称，第二个参数开始是map的键，通过键取到值。我们需要注意的是若你想要这样去取值的时候，我们需要映入。说明：获取map中所有的键。

canvas的用途有很多，常用于绘制各类图形，如我们常用的Echarts就是使用canvas构建的。canvas的默认大小为长：300px，宽：150px。使用drawImage函数。

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验前端就是你能看到的东西指的是超文本标记语言。...

px是指像素的意思，1px就是一个像素点，是我们常用的长度单位。

如果你想要直接以项目的方式学习构建，请不要看上面的创建Electron工程，而是直接看“项目中构建Electron工程”

前端系列——vue2+高德地图web端开发（热力图）前言组件间的调用说明总体思路代码热力图坐标点搜索对搜索到的数据进行实际的获取展示热力图结果展示前言热力图其实实现起来不难原理是在图层上将获取到的坐标点进行层级渲染形成多层的圆，每层的圆以不同的颜色进行展示，当多个圆叠加到一起就形成了热力图组件间的调用说明在Vue中我将组件拆为map.vue和config.vue使用一个父页面将这两个组件拼合到一起总体思路首先选择config.vue中的复选框，传递复选框被选中的标志给Map.vue（标志比

前端系列——HTML5拖拽HTML5拖拽拖拽目标触发的事件释放目标时触发的事件阻止默认事件方法执行示例代码效果截图HTML5拖拽使用属性draggable即可实现对于元素的拖拽<div draggable="true" id="test1"></div>拖拽目标触发的事件ondragstart: 开始拖拽触发ondrag: 正在拖拽触发ondragend: 结束拖拽触发释放目标时触发的事件ondragenter：进入容器内触发ondragover：拖动对

Vuex学习总结官方文档概述什么样的数据适合存入引入和使用安装Vuex导包使用创建store对象挂载store对象常见项目中使用方式（建议看这个）1. 安装2.在src下创建store目录创建index.js文件3.在index.js中进行实例化并且暴露出store4.在main.js中进行挂载Vuex的核心State（共享数据仓库）存储后如何进行获取方式1（全部获取）方式2（按需获取）Mutation（修改State中的数据）在组件中调用Mutation中的方法1调用同时传参在组件中调用Mutation中

window.localStorage空值判断问题前言问题描述问题原因分析先看输出原因根本原因总结前言我们都知道window.localStorage是用于查看你浏览器的本地存储的我们可以根据本地存储进行判断用户状态等一系列的事件问题描述今天在写的时候我对localStorage里的token进行空值判断来判断用户状态以渲染用户头像发现使用(window.localStorage.getItem('token') != ‘’来判断的话无法正确判断token是否为空，必须使用(window.lo

UI设计系列——线性，面性图标制作前言制作一个用户图标分析技巧制作一个下雨天的面性图标确定大小层次结构复制一层绘制内部图标绘制一个多角星修改弯曲度用椭圆添加弯曲形成雨点修改颜色再打组放入外层容器中定义位置调整背景渐变色加一点小细节前言本身制作图标其实不难难的是你要有新奇的想法制作一个用户图标分析首先我们看到头部和身体旁边的增加是圆形然后身体是个三角形而其他的地方则是线技巧双击你要修改的原始图形像🖊笔一样的是用来直接绘制或钢笔工具弯曲的那个线条工具是用来使得你选中的边任意弯曲的

UI设计系列——Figma基础使用Figma下载文档社区（中国）为什么选择Figma汉化基本操作创建新设计修改项目名使用步骤1.新建画布2.添加页面元素2.1 使用标尺（快捷键shift+R）2.2页面元素属性蒙版1.添加页面元素2.复制底层模板3.打组（ctrl + G）4.设置蒙版5.放置替换组件中添加头像（插件切换）1.安装插件选择下载使用组件中添加图片（自定义）Figma下载figmachina.com/文档https://figmachina.com/guide/社区（中国）figm

ES6常用部分ES6概述let 和 constletconstconst和let都有封闭性死区解构赋值基本嵌套可忽略不完全解构剩余运算符字符串等但以上均不常用（常用）对象解构增加Mapforeach遍历set类型转换数组去重并交差函数对象优化新增Object.keys（）取出对象的键新增Object.values（）取出对象的值Object.entries（）取出键值对对象深拷贝对象合并async await 进行异步处理（ES7）ES6概述ES6， 全称 ECMAScript 6.0目前多数浏览器支

json的使用什么是jsoneval()将json转化为js对象json语法json键值对json的值json对象循环遍历遍历取出键遍历取出值对象嵌套对象中嵌套数组删除对象属性json 数组遍历数组错误示范正确示范删除数组的元素注：其他赋值修改等操作就是和js数组一样json 文件json.parse()对象转换语法实例从服务端接收 json 数据从服务端接收数组的 JSON 数据json.stringify将js对象转化为字符串实例获取服务器数据写入自己的json文件，再使用js读取json文件什么是j

less的使用什么是less基础认知css与less比较：css：less:嵌套注意点less注释less变量1.属性值变量写法2.属性变量和选择器变量写法(基本不用，除非你懒)变量遵守覆盖例子less混合1.普通混合2.无参混合3.带参数混合4.命名参数混合5.“匹配”混合less运算less转义less函数less命名空间和访问符less映射导入什么是lessless是一门预处理语言文档网址：less文档在 Node.js 环境中使用 Less ：npm install -g less在浏

前端库——按钮前言知识点1.流布局2.线性渐变3.径向渐变4.锥形渐变5.滤镜基础按钮1修饰宽高设置颜色修饰部分：修饰边框阴影修饰部分：拟态按钮1修饰部分：拟态按钮2关键代码：非常规形状拟态关键代码：水滴效果按钮关键代码：毛玻璃按钮效果线性渐变毛玻璃关键代码：中心渐变毛玻璃关键代码：毛玻璃灯光效果关键代码：中心磨砂差值色按钮关键代码：流动线条按钮关键代码：前言所有按钮均使用html+css实现，其实做一个网站这些小细节确实是很重要的，所以我整理了一下我常用的一些按钮样式，当然配色大家自由发挥，按照风格来

微信小程序——用户登录，退出，缓存官方API说明文档地址授权登录设置缓存wx.setStorageSync(string key, any data)查看获取缓存any wx.getStorageSync(string key)移除缓存 wx.removeStorageSync(string key)1.最简单（不使用es6语法）2.使用es6语法3.简化es6和逻辑的登录4.退出登录（使用es6+弹窗判断）5.使用缓存技术实现保持登录状态以及登出清空缓存清空缓存注意对应你设置的缓存名官方API说明文档

翻译：npm错误！代码1npm错误！路径C:\Users\Syf200208161018\Desktop\PackingGo\front\u vue\pro\node\u modules\node sassnpm错误！命令失败npm错误！命令C:\WINDOWS\system32\cmd.exe/d/s/C node scripts/build.jsnpm错误！构建：D:\nodejs\node.exe C:\Users\Syf200208161018\Desktop\packingo\f

动态动画属性(常用)我个人觉得网页上有动态元素会让人感觉很炫酷所以整理了一下个人感觉很常用的一些CSS属性动画属性(常用)属性说明background背景color字体颜色filter滤镜flex...

前端（html[5],css[3]学习总结）开发工具工具设置VScode:VScode使用（html文档的生成：）VScode快捷键html基础标签分类基础标签（常用）(*表示我常用)html参考文档下载CSS基础CSS常用CSS参考文档下载开发工具VScode+firefox浏览器工具设置VScode:以下是我使用的比较好用的插件在扩展的商店里就可以搜到VScode使用（html文档的生成：）新建后ctrl+s保存成.html后缀VScode快捷键英文半角下shirt+1打出！可