NanChen的博客

本指南详细介绍了基于大模型开发交互式文字游戏的方法，包括场景生成、角色关系管理和故事线构建。"最强剑魔是高三生"是一款基于AI生成的交互式文字冒险游戏，玩家扮演一位高三学生兼游戏主播，需要在学习和游戏之间寻找平衡。场景生成是游戏的核心机制，DeepseekClient提供了专门的API：场景结构每个生成的场景包含以下结构：进度系统设计游戏进度通过以下结构管理：游戏结束机制当玩家的任一进度指标（游戏成就、学习进度、社交关系、神秘能力）达到1

这是一个基于 Vue 3 + TypeScript + Vite 构建的 Vista AI 演示项目，旨在提供一个简洁易用的界面来展示 Vista AI 大语言模型的能力。项目包含 API 演示和交互式游戏两个主要功能模块，同时支持两种不同风格的 API 调用方式。

先看完整效果：Deepseek语言模型视频演示效果图：基于 Vue 3 + TypeScript + Element Plus 开发的 AI 聊天助手，集成了 DeepSeek 的 API 服务。提供打字机模式和流式输出两种对话模式，支持多种 AI 模型切换。2. 环境配置创建 文件：项目结构组件详解1. ChatContainer.vue聊天界面的核心容器组件。完整代码如下：2. ChatInput.vue输入组件特点：完整代码如下：3. MessageBubble.vue消

这里需要注意一下第四个部分，我这里因为要直接绑定第三方组件Vant的。如果是引导饿了么的组件获取dom类型可以从官网上查看，比如绑定在。如果不用官网的方法也可以直接使用js方法获取，当然你也不需要。引入的第三方库方法我这里就不写了，可以自行去官网查找。// 引导组件显示状态（双向绑定）// 跳过按钮处理函数（暂未启用）的所以需要使用Vant中自带的。// 引导步骤项目接口定义。// 上一步按钮处理函数。// 下一步按钮处理函数。// Props 定义。// 步骤变化处理函数。// 下一步按钮文本。

如何用 Vue3 和 Element-Plus 打造一个交互式音乐播放器

vite + vue3 + ts 移动端开箱即用现代开发模板。

【代码】Vue3+Ts+Element-Plus多级表头以及动态合并单元格。

/ 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。// 必填，需要使用的JS接口列表。// 必填，公众号的唯一标识。// 必填，生成签名的时间戳。// 必填，生成签名的随机串。

如果你是vue2版本想使用uniapp去配置uviewui库可以参考之前的文章小程序的第三方ui库推荐较多的还是uview的，看起来比较美观，功能也比较完善，下面将提一下Vue3安装uview-plus库的教程。

正投影相机和透视相机的区别如果都以高处俯视去看整个场景，正投影相机就类似于 2d 的可视化的效果，透视相机就类似于人眼观察效果如果你想整体预览全部立方体，就需要调整相机的渲染范围，比如设置上下左右的范围。使用场景：正投影可以用来预览中国地图，或者 2D 可视化的效果透视投影相机一般是人在场景用漫游，或者高俯视整个就是将整个模型的所有顶点包裹起来形成一个长方体，此长方体就是 Box3改变相机的位置.position，三维场景在 canvas 画布上呈现不同的效果，如果连续改变相机的位置.positi

两个模型重叠的模型，通过浏览器旋转预览，会发现模型旋转的时候会发生闪烁。这种情况，主要是两个模型重合，电脑分不清谁在前谁在后，这种情况，可以理解为深度冲突。效果：适当偏移，解决深度冲突，偏移尺寸相对模型尺寸比较小，视觉上两个几何体近似还是重合效果。这种情况我这里遇到过一次，通过压缩模型后进行放大缩小会发现出现模型闪烁的 bug，所以这里可以用解决冲突问题。注意：如果两模型面间隙过小，或者重合，，此渲染器对数深度缓冲区也是没有效果的区别：不加这里拿来测试这里可以进行判断，如果等于100，也就

- canvas元素默认是行内块元素 --> < div class = " model " style = " background-color : #ff0000;-- canvas元素默认是行内块元素 --> < div class = " model " style = " background-color : #ff0000;

和都是拥有金属度、粗糙度属性的PBR材质，是的子集，除了继承了他的这些属性以外，还新增了清漆、透光率、反射率、光泽、折射率等等清漆层属性可以用来模拟物体表面刷了一层透明的模的范围0到1，默认0。关于MeshPhysicalMaterial材质是Three.js中的一种材质类型，它是基于物理的渲染（PBR）材质，可以模拟真实世界中的光照和材质反射。它支持金属和非金属材质，可以设置粗糙度、金属度、环境光遮蔽、法线贴图、位移贴图等属性，以实现更真实的渲染效果。还支持高光反射和透明度，可以用于创建逼真的玻璃、水

如果想使用环境贴图对scene所有Mesh添加贴图材质，可以通过Scene的场景环境属性.environment实现,把环境贴图对应纹理对象设置为.environment的属性值即可。用于设置环境贴图的强度。当然在实际开发中，环境贴图的不同也会对渲染效果造成影响，也需要选择合适的贴图，往往这种贴图可以让美术提供即可。表示模型表面的光滑或者说粗糙程度，越光滑镜面反射能力越强，越粗糙，表面镜面反射能力越弱，更多地表现为漫反射。总结：粗糙度越小，反射效果越强，如果设置为0，那么他将完全镜面反射，等同于镜子。

前端推荐使用 Blender 三维建模软件，模型推荐使用 gltf 或者 glb 文件。后续会更新 Blender 的使用方法glTF（GL Transmission Format）是一种用于传输和加载 3D 模型的开放标准格式。它是由 Khronos Group 开发的，旨在提供一种轻量级、高效、可扩展的 3D 模型格式，以便在 Web 和移动设备等平台上实现快速加载和渲染。glTF 格式支持包括几何体、材质、纹理、动画和场景等多种 3D 模型元素，并且可以使用 JSON 格式进行序列化和压缩，从而减少

暗黑主题设置

【代码】Vue3——404、重定向以及导航守卫。

具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。在函数内部，创建了一个frameCount ref对象，并定义了一个updateFrameCount函数，用于递增frameCount的值，并在达到maxCount时停止递增。最后，函数返回一个defer函数，用于检查当前帧数是否达到指定的值n。用于实现一个延迟函数。

从HTML页面中的a链接里携带的参数要在vue3项目里接收到此参数目前有两个项目一个静态项目一个vue项目，我需要从静态页面的链接跳转到Vue项目中，并且这两个项目可以通过参数进行关联这里有两种方案：一种是将静态页面中的id存在本地，在vue中通过获取本地id传给接口从而渲染页面影响：可能会出现跨域第二种通过getUrlKey.js获取URL地址栏中跳转携带的参数。

Element-plus图片上传功能

引入外部模型太大？用DRACOLoader压缩一下！

v-md-editor一款基于Vue3易上手的MarkDown编辑器

封装上传图片效果

调用验证码方法在Request.js也就是axios中添加切换验证码方法在Login.vue的请求接口中使用errorCallback方法封装的验证码地址写法如下登录有两种验证方案，可以使用token验证或者用cookie验证，这里说一下Cookie验证。

两种方案：第一种点击添加按钮添加一项，缺点：页面过于臃肿，用户体验较差第二种：分成两种页面进行添加等操作先说一下第一种，我这里用到了vant3Ui组件库直接上代码：新增节点其中obj里的对象名称要跟reactive中创建这个的数组里的名称一样Vue3是通过v-model生成新的节点，无需用克隆节点生成新的Dom这里因为不需要进入页面，所以直接引入接口就可以了，无需写编辑事件删除：获取对应选中的div盒子，之后对盒子进行删除操作第二种方法下面是详情页这个是把数据存到本地上了，真实项目需

最后通过v-bind给最外层的盒子添加需要替换的颜色。最后弄一个按钮来控制这个颜色的变化。定义一个对象用来存放颜色。写个方法用来存储对象。

vue3+vant做h5转App时，会遇到用手机上的返回键会直接回退到手机桌面，只能用过按钮来实现back回退，网上也有很多实现方法，但mui对vue3来说可能不太支持，所以这里使用原生js的方法实现。完成后通过npm run build打包在手机上进行查看。在index.html中引入vant链接。事件来对物理返回键进行配置。接着写js部分，通过。

打包出现字体文件过大怎么办？压缩字体后出现问题怎么办？来看这篇文章哦~

超级好看的loading样式！！我这里是采用loading为例子制作的随机背景效果（底部附上代码和成品效果展示）

这里的provide和inject可以实现嵌套组件之间进行传递数据。直接看代码即可：首先，需要修改一下app.vue文件，通过reload方法来控制router-view的显示或者隐藏写好之后就可以在子页面中调用即可最后看一下项目实现效果:这时候就有人问了，为什么不适用location.reload()或者router.go(0)来刷新页面呢？这里的缺点也显而易见，这种刷新就类似于ctrl+F5来进行强制刷新，整张页面看起来会出现白屏的现象，用户交互的体验感不好，而这种用provide和inje

想要通过v-if或者v-show来实现动画的衔接动作，也看了网上的一些例子，这里给总结一下。这里如果是想点击一次过渡过去再次点击一次过渡回来的话，是不需要给两个不同的。这种过渡效果很简单，只需要用if语句来判断动画出现顺序即可。标签设置两种动画，只需要用同一个动画即可。就不需要加**name=‘h1’**了。

因为这里使用的是Vant移动端写的，所以不好给自带的input框添加foucs样式，所以我这里就给他一个hover代替点击焦点样式，效果是一致的。

我们可以在组件的逻辑位置写模板代码，这意味着我们可以使用组件的 data 或 props。场景：像 modals,toast 等这样的元素，很多情况下，我们将它完全的和我们的 Vue 应用的 DOM 完全剥离，管理起来反而会方便容易很多。Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意门”。另外，像 modals,toast 等这样的元素需要使用到 Vue 组件的状态（data 或者 props）的值。...

续上篇：这里说一下传送，这个传送就是我可以把teleport标签通过to="名称"放在我想要放在的标签里面看个例子：Home.vue子组件ModalButton.vue我们来具体看一下效果：把to中的body替换成#one再看效果:最后再尝试把to中的#one替换成.two,可想而知效果是一致的效果：如果写成这样：(是进行不了传送的)为什么我们需要 TeleportTeleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意

v2-v3的学习成本不高，只要有v2基础，基本可以上手vue3setup中不能访问v2的配置比如data，methods等使用ref可以创建一个对象，可以是基本类型，也可以是对象例如：这是一个对象类型的响应数据，例：例：特性，也可以说成和watch的区别所有的声明周期要放在setup中Vue3的生命周期如下：1、beforeCreate -> 使用 setup()2、created -> 使用 setup()3、beforeMount -> onBeforeMount4、mount

它是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。在最坏的情况下，我们可能会在页面上看到三个旋转的加载态，在不同的时间显示出内容。组件后，我们就可以在等待整个多层级组件树中的各个异步依赖获取结果时，在顶层展示出加载中或加载失败的状态。在这个组件树中有多个嵌套组件，要渲染出它们，首先得解析一些异步资源。意思就是此组件用来等待异步组件时渲染一些额外内容，让应用有更好的用户体验。就是你指定的加载中的静态组件。

组件中通过new Url('路径/${图片}',import.meta.url).href。在接口中只需要写入图片名称，通过函数的形式拼接字符串，vite中有专门的写法。

官网上面有正则函数异步三种验证效果，但是并没有详细说明多个表单验证该如何实现，这里提一下首先要有form标签 <van-form @submit="onSubmit">这个标签包裹提交按钮 onSubmit(values) { console.log("submit", values); },之后在里面写input框 <van-field v-model="form.tel" type="tel"

Vue 3 + TypeScript + Vite + Element-Plus + Router + Axios + Pinia项目搭建（内含完整架构）

找到vite.config.ts。