2301_80636534的博客

原创 小程序测试

学习。

原创 es6解构赋值

数组中不想要的元素也可以通过添加额外的逗号来把它丢弃。

原创 vue一些基本配置（持续更新）

vite.config.ts 关闭console。config.ts 查找域名。

原创 高德地图自定义折线矢量图形

实现的功能：通过点标记连接生成线 实现折线适量图形。

原创 微信小程序登录

原创 vue3添加统一路由前缀

试了好多办法，这个最直接。

原创 微信小程序配置

1.进入微信小程序公众平台，进入后注册域名。

原创 vue3框架+element-plus

可视化安装

原创 vue单页面 与多页面的区别

只要用框架基本上都是单页面工程。

原创 搭建一个vue3+vite框架

可以使用以下两种搭建方式可以使用以下两种搭建方式。

原创 pinia

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的。来共享一个全局状态。对于单页应用来说确实可以，但如果应用在服务器端渲染，这可能会使你的应用暴露出一些。

原创 高德地图矢量图形点击事件生成

对地图进行渲染， 如果点击后只显示一个矢量图形，可以加上限制判断，不需要的不用加。必须添加中心点，需要根据中心点进行渲染。通过改变点的位置，对矢量图形重新绘画并重新获取各个点的位置进行渲染。通过计算给四周的点进行标记，可以直接使用该算法。生成矢量图形如上，代码如下。

原创 高德地图自定义点标记

由于自定义图标可能会发生偏移，我这里对原文档的样式进行了调整，原文档的文字写在 var markerContent = '' 这样会造成位置偏移，解决起来更加复杂，我对其进行调整为'摄像机，防止了位置偏移。并对 样式进行了调整。自定义点标记内容-点标记-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)

原创 Invalid Object: LngLat(NaN, NaN)高德地图报错

解决方法：地图初始化之后，先进行数据渲染，再进行位置标记。原因二：地图渲染比数据渲染快，数据没有跟上导致报错。

原创 高德地图绘图，点标记，并计算中心点

【代码】高德地图绘图，点标记，并计算中心点。

原创 整体字符串转数组，数组转字符串

数组转字符串JSON.stringify。字符串转数组 JSON.parse。

原创 将详情页两个数据通过列表页分开展示

1.列表页添加一个数值区分详情页得两个数据。2.添加一个中间页将值传到详情页。3.详情页使用v-if判断区分。

原创 VUE3使用screenfull利用dom节点部分全屏

【代码】VUE3使用screenfull利用dom节点部分全屏。

原创 vue3利用父子传参将页面展示到另一个页面上

绑定点击事件，在点击事件里传入参数1，将参数赋值给父组件绑定的tag参数上。props获取父组件参数。

原创 模式Hash和history

vuerouter有两种路由模式Hash和history。区别：Hash为默认模式，url中包含一个#符号的哈希部分。优势：兼容性好，不需要后端服务器的特殊配置。缺点：不够美观，搜索引擎优化较差。History模式使用的浏览器的History API ，通过修改浏览器的历史记录来实现前端路由的切换。优势：对搜索引擎优化更好，能够更好的处理没有哈希部分的URL 缺点：兼容性较差。

原创 vue3根据路由参数判断按钮是否显示

【代码】vue3根据路由参数判断按钮是否显示。

原创 vue3SeamlessScroll实现列表的无限循环滚动

全局部署：main.ts。

原创 Cesium加载3D模型

什么是GLB文件？关于GLB文件格式你需要知道的事-优快云博客GLTF模型为什么越来越流行？ - 3D建模模拟仿真 - SegmentFault 思否使用Cesium加载并调整3D Tiles - 简书 (jianshu.com)cesium编程入门(六)添加 3D Tiles，并调整位置，贴地 - 伐罗密 - 博客园 (cnblogs.com)图形学基础 | 详解3D中的obj文件格式_obj格式-优快云博客开源全球地理空间数据可视化框架——Cesium学习（2023.8.21）-优快云博客cesi

原创 VUE3实现两张图片滑动对比效果实现

最后根据自己需要的结果调整样式。

原创 error `slot` attributes are deprecated vue/no-deprecated-slot-attribute

{{ item.title }} 是一个模板标签，它在模板中插入了一个元素（slot），并指定了元素的名称为 “title”。这个标签在模板中显示为一个空白元素，可以通过设置其 data 属性来提供内容。在Vue.js中，slot是一种分发内容的机制，用于在子组件中插入内容。slot的使用中有一种旧的语法，即在template标签上使用slot属性，这种语法已被弃用。原文链接：https://blog.youkuaiyun.com/qq_30503389/article/details/130557761。

原创 ref和reactive区别

数据类型：ref用于包装基本数据类型（如数字、字符串），而reactive用于包装对象。 访问数据：使用ref时，需要通过.value来访问数据，而reactive则允许直接访问属性。 数据的包装：ref返回一个包装对象，而reactive返回一个包装后的对象。 reactive比较灵活，可以将任意对象转换成响应式数据，并且可以进行深层次的响应式处理。ref()函数可以接受原始类型（最常见的是布尔值、字符串和数字）以及对象作为参数，而reactive()函数只能接受对象作为参数。 ref

原创 ts里的as

if(typeof (animal as Fish).swim === 'function') { //但是这样会隐藏animal可能为Cat的情况，将animal直接断言为Fish。// if(typeof animal.swim === 'function') { //此时swim会报错，因为cat接口没有swim方法。//但这种情况ts编译也会报错，window上没有foo属性，此时可以使用断言。* 类型断言，可以用来手动指定一个值的类型。* 1、将一个联合类型断言为其中一个类型。

原创 antdesignvue对话框用户可移动并缩放

使用 JavaScript 代码更灵活，但需要更多的代码和调试。Ant Design 是一个流行的前端 UI 框架，提供了一系列实用的组件，包括模态对话框。属性或 JavaScript 代码，我们可以轻松地实现 Ant Design 模态对话框的拖拽缩放功能。这将增强用户的交互体验，让你的对话框更具可定制性和实用性。，我们告诉浏览器允许用户调整对话框的宽度和高度。现在，当你点击按钮打开对话框时，你可以拖动它的边框来改变大小。现在，当用户点击对话框标题栏并拖动鼠标时，对话框的大小就会随之改变。

原创 前端获取后端返回的数组[].文字[]

现在我需要文字下面的数据，获取方法如下。已知目前获取到的后端数据。

原创 web前端性能优化

减少HTTP请求如Chrome浏览器最多同时允许对同一个域名Host建立6个TCP连接，不同的浏览器有所区别，减少http请求也就是减少我们html里css/js等资源的数量使用HTTP2.0需要配置一个支持h2的web服务器，并下载安装一张TLS证书，让浏览器与服务器通过h2链接设置浏览器缓存策略白屏时间做加载动画增强用户体验。

原创 修改功能联动高德地图显示矢量图形

目前的情况：页面的逻辑是根据修改实现的，逻辑如下：当项目需要修改->页面传id到地图页。修改：地图页接受id并在详情接口提取该图形中心位置-->进行地图渲染。现在面临的问题是如何在一个页面实现新增和修改改图形。1.获取id并循环出中心位置。首先要初始化高德地图。

原创 VUE3后台项目在右边面板上增加页面

4.在页面加入跳转事件里加入跳转参数。2.在主页面引用路由，添加跳转参数。3.在侧边栏添加跳转参数。1.在hook里添加。

原创 记录一下项目添加路由VUE３，仅供参考

我的项目写的相对复杂，所以仅供参考，我认为他这个项目这样写的目的为了后期维护，所以每个功能分了板块，并在中间重新定义，方便后期复用。因为要新增在侧边栏上，在ｓｉｄｅｒ．ｖｕｅ页面加入新增的页面。１.在router／ｉｎｄｅｘ．ｊｓ写入新增的页面。２.在ｅｎｕｍｓ声明一个名字。

原创 VUE3dist打包提示文件过大Some chunks are larger than 500kb after minification

2.一些优化方式，我还没用到，大家可以尝试一下。

原创 vue3返回的数据输出的类型是RefImpl

value 是要转换为 ref 对象的原始值，__v_isShallow 是一个布尔值，表示是否使用浅层响应式。RefImpl 会将 value 转换为 _rawValue 和 _value 两个属性，_rawValue 是原始值的副本，_value 是原始值的响应式版本。当设置 value 时，会判断新值和旧值是否有变化，如果有变化，则更新 _rawValue 和 _value，并调用 trigger 函数通知依赖更新。函数的作用是返回一个响应式对象的原始对象。顺带了解了一些知识，一起记录一下。

原创 修改element-plus样式灰色下划线

在VUE３上修改样式需要按照节点顺序到想要修改的ｃｌａｓｓ下面。

原创 vue3写一个弹窗功能并将结果渲染到页面上

2.想要将弹窗的值渲染到页面上并在页面上for循环每次输入的结果，将渲染的数组放入接口里，因为我的XX声明的是对象，但是转接口里是数组，所以我的思路是先用对象保存弹窗输入的内容，再将对象存入数组。这样的写法没有获取到想要的name，经过查找之后发现是没用使用i的原因，foreach后i代表了XX数组里面的值（foreach只能循环数组），下面应该i.id和i.name，这样就可以获取到啦。1）每次渲染到页面上的数据都显示的是第二次弹窗输入的数据。2）configure的数据没有按我想要的区分开。

原创 document.getElementById(‘enviorconfig‘).innerHTML渲染页面不显示

使用nextTick 让innerHTML在dom渲染完再加载。

原创 自动出现nver[ ]如何改成可以使用的数组

后面加 as [] 可以申明成正常的数组。

原创 VUE npm i 报错提示镜像源过期

但此时npm config get registry已经得出最新的淘宝镜像源，我把这个文件注释掉重新 install,报错还是同样错误，那就说明问题不在这里，我用搜索将报错地址在项目里搜索，发现以下两个文件出现的地址正是报错的地址，改成以下地址，重新install。期间，朋友建议我用vpn裸连，我将淘宝镜像源去掉尝试了VPN裸连，但是因为项目里面使用了淘宝镜像源，所以一直没办法绕开，还是回归了淘宝镜像源，有想法的友友也可以试一下。我在项目中尝试配置最新的淘宝镜像源，发现依旧是之前的。