qbbmnnnnnn-CSDN博客

原创【AI探索】站在前端开发角度看待AI大模型

以上即为我对AI大模型在前端领域应用的浅薄理解。我比较倾向于把自己定位为AI的审查者，当你要用AI做某件事时，首先你得是这件事的相关领域从业者。你需要心里清楚它在说些什么，有没有胡说八道。当你满足这些条件后，你再使用AI时才是真正的放飞自我。脏活累活丢给AI去处理，聊着天就把活干了，自己做一个的角色。此时我才能说AI解放了生产力，在前端领域提供了莫大的助力。

2024-11-18 21:03:22 912 3

原创【vue2.0入门】vue基本语法

以上即为vue基础语法的内容，建议从官方文档入手，结合本篇介绍的需要注意的点一起学习。本篇重点：再次熟悉表达式这个概念了解 computed 的传参用法掌握列表渲染与条件渲染嵌套使用时的应对方法。vue的一些语法简写

2024-11-13 18:15:09 871

以.vue为后缀的文件，一般都包含三个区域template、script、style，分别对应原生前端开发的html、js、css三个部分，比较符合一开始做前端开发的编码习惯。以上即为vue单文件组件常用的内容，有了这些内容做支撑，加上你原有的html、js、css的基础知识，就可以在vue项目中编写页面了。在开发时需要贯彻组件化开发思想，从项目整体设计的维度以及单一功能的维度共同考虑，抽离出合适的组件，互相拼凑完成页面编写。在下篇中，我会结合应用场景讲解如何使用vue的语法技巧，帮助你更快的进行页面编写。

2024-11-08 20:19:08 1735

原创【vue2.0入门】认识vue工程

在熟悉以上文件以及其作用后，接下来我们就开始尝试开展一些vue页面的开发工作了，其他没介绍的内容以及未来可能会新增的内容我们可以边学边补充。此外我们还介绍了vuejs devtools浏览器插件的下载、安装和使用。方便我们在日后开发vue项目时可以更准确的获取项目运行时的各类信息，提高代码开发效率。

2024-11-08 00:07:28 1278

原创【vue2.0入门】初始化vue工程

以上，你已经完成了vue2.0版本工程的创建、运行、打包过程。在此过程中：熟悉了cmd控制台的使用方法。了解了npm镜像源设置方法。跟着过了一遍创建vue项目的全流程。熟悉如何启动、打包项目。接下来我们将认识vue工程的所有文件的作用，以及逐步在工程中完成vue语法的学习。

2024-11-06 00:19:07 1686

原创【前端开发入门】JavaScript快速入门--数据操作

以上即为js数据操作的大体内容，试图理解原型链，掌握引用类型的数据使用方法，进而支持自己可以编写一系列逻辑运算代码，同时利用深浅拷贝规避一些意想不到的bug。当你可以熟练的编写js代码逻辑后，那么就可以进入下一阶段函数封装。再接再厉~

2024-11-04 23:45:00 951

原创【前端开发入门】JavaScript快速入门--函数技巧

本篇我们主要介绍了函数的基本使用技巧，包含函数的默认参数、函数闭包，利用这些特性可以帮助我们优雅的完成代码逻辑编写。此外我详细的列举了注释的几个玩法，感兴趣的朋友可以研究下 `koroFileHeader` 的配置文档，它不只是可以添加函数注释，还可以添加文件的头部注释等。

2024-11-04 23:42:57 886

原创【WebGis开发 - Cesium】三维可视化项目教程---图层管理拓展图层透明度控制

本篇主要是利用 `element-plus` 的 `slider` 组件配合 `pinia` 存储的数据列表做双向绑定，完成图层透明度控制功能。利用 `tree` 组件的 `setChecked` 方法，完成已选图层与图层树的删除联动效果。根据功能拓展的需求，将原有图层管理操作逻辑进行修改完善以适应新功能的接入。重点在于根据业务的需求逻辑，封装cesium提供的原始api方法，形成维度更高的项目级api方法。

2024-10-29 00:23:59 971

原创【WebGis开发 - Cesium】三维可视化项目教程---图层管理拓展图层顺序调整功能

本篇主要是利用 vue.draggable.next 组件库结合cesium图层调整顺序api方法，完成了图层管理已选二维图层顺序调整的功能模块。根据功能拓展的需求，将原有图层管理操作逻辑进行修改完善以适应新功能的接入。重点在于根据业务的需求逻辑，封装cesium提供的原始api方法，形成维度更高的项目级api方法。

2024-10-25 18:35:00 1630

原创【前端开发入门】JavaScript快速入门--js变量

以上即为js定义变量的常见内容，包含Object、Array的解构赋值以及应用场景；定义变量的作用域；虽说是基础常识，但是还是需要在实践中熟悉并掌握，使用它们成为一种习惯。

2024-10-25 00:16:37 902

原创【前端开发入门】JavaScript快速入门--基本认识

本篇简单概述一下js用来干什么，如何调试js代码，以及一些基础内容。后续将结合一些实际应用场景来展开讲解详细内容。发送网络请求，获取服务器后台数据在前端展示（20%）调用第三方库提供的函数、类等内容，完成当前项目的一些操作（50%）根据业务编写逻辑代码封装函数、类等内容，在适当的时候调用它们。例如：鼠标事件、前端框架生命周期阶段、浏览器监听事件等（30%）

2024-10-23 12:38:50 771

原创【CSS Tricks】鼠标滚轮驱动css动画播放，使用js还是css？

animation-timeline，目前还处于试验阶段。指定用于控制CSS动画进度的时间轴。CSS的创建者曾说过，他最初的设想是CSS作为控制网页行为的主要Web技术。只有当CSS无法完成控制行为时，才使用js脚本作为后备手段。如果在不考虑浏览器支持性的前提下（优先使用chrome最新版本浏览器），项目中有做滚动条绑定动画的需求，我非常建议大家尝试一下，它会给你一种全新的开发体验，在实现相同效果的情况下，页面性能优化最佳。再接再厉~

2024-10-10 23:52:19 2164 2

原创【WebGis开发 - Cesium】三维可视化项目教程---图层管理基础

本篇主要讨论如何管理二三维图层，仅以wmts和3dtiles做图层管理示例。我会在接下来的教程里专门针对其他各类图层加载方式做详细介绍。二三维图层管理是三维可视化项目里重要的组成部分，通过树结构管理图层二维图层的互相遮挡问题，需要拓展图层调换顺序功能。图层叠加使用场景，需要拓展图层透明度调整功能。当前场景下图层保存功能，用于场景切换时，关闭及初始化图层树。拓展其他重要图层类型的加载卸载方式。其他。所以说一个完整的模块是亿点点优化而来的。由于篇幅问题，遗留的几个问题我将会在之后的文章中逐步闭环。再接再厉~

2024-10-10 16:24:51 3915 2

原创【CSS Tricks】试试新思路去处理文本超出情况

本篇内容不算复杂，主要涉及到了css变量和css伪类两个要点。将常规样式固化，核心样式提取出简单易理解的变量方便定制化修改。灵活运用伪类，给本体dom添加额外装饰，达到最终样式的表达效果。虽然我们已经完成了长文本的隐藏功能，但是为了网页内容的完整性，我们仍需考虑添加title属性提示全文，或是点击弹窗、伸展dom等方式展示全文。在开发过程中不断完善整体的页面逻辑。再接再厉~

2024-10-06 10:06:17 392

原创【WebGis开发 - Cesium】三维可视化项目教程---视点管理

本篇主要介绍了如何利用 viewer.camera 和 flyTo 完成了视点管理模块必备功能的hooks函数封装。完整的视点管理还需结合后台数据存储，业务数据绑定等等复杂逻辑，这就需要你自行判断如何将本篇的hooks函数应用到业务中去。视点管理或是视角控制，是三维可视化项目中的重点功能。这个功能优化好了，可以让项目操作起来更加丝滑令人舒适。有一些可以探索优化的点：飞行路径的修正，目前是由cesium框架默认计算的飞行路径，没有进行人为干预，可以尝试 maximumHeight 、pitchAdju

2024-10-06 10:05:18 2250

原创【WebGis开发 - Cesium】如何确保Cesium场景加载完毕

本篇主要介绍了如何利用和来判断一个Cesium场景是否加载完成。解决了Cesium场景无法感知加载进度的问题，给业务场景开发提供了明确完成标志。利用vue3.0的新特性，将以上方法封装为hooks函数，更方便业务测使用。再接再厉~

2024-10-05 00:08:38 2552

原创【WebGis开发 - Cesium】三维可视化项目教程---初始化场景

任何一个三维可视化项目的核心点无非以下几点：二维图层、三维模型的加载显示或隐藏的管理（图层树）相机视角管理（视点保存、路径漫游）POI点的展示与点选查询简易图形绘制及保存利用数学计算及图形绘制表达一些gis分析结果（高阶功能）shader应用材质（更随心所欲的高阶技巧）基于Cesium进行三维可视化项目开发

2024-10-05 00:06:48 3582 2

原创【前端开发入门】css快速入门

本篇将介绍css的常用属性及使用场景，为html标签添加样式，美化页面效果。主要介绍了css盒模型的规则。常见css属性到css的结构属性宽高、外边距、内边距、边框、overflow等和样式属性字体属性、背景颜色、阴影等。css的定位position的使用方法和案例。弹性盒子flex的基本使用方法和案例。

2024-10-02 22:52:13 1366

原创【CSS Tricks】css动画详解

动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。相较于传统的脚本实现动画技术，使用 CSS 动画有三个主要优点：能够非常容易地创建简单动画，你甚至不需要了解 JavaScript 就能创建动画。动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用 JavaScript 实现的动画通常表现不佳（除非经过很好的设计）。让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。

2024-09-29 23:45:12 3571

原创【前端开发入门】前端开发环境配置

本篇主要介绍前端开发必要的开发环境配置及软件安装，包含：开发编辑器vscode及相关插件。Nodejs运行环境安装及版本控制。git软件安装及基础配置

2024-09-29 23:43:34 1345

原创【前端开发入门】html快速入门

本篇介绍html的相关内容，包含文档流的概念以及块级元素和行内元素等。同时强调了有关代码编写习惯性问题。

2024-09-29 23:41:25 1405

原创【VUE3.0】动手做一套像素风的前端UI组件库---Message

本篇完成的组件为Message，日常项目中较为常见的组件，主要涉及到的内容有：这次没得抄借鉴了，NES.css没有提供这个组件的样式模板。参考按钮的高光和阴影设计一个具有特色的信息弹窗。利用vue的transition组件给弹窗一些动画效果。采用单例模式将信息弹窗放置在全局避免重复。参考组件库Element Plus的设计使用方式，采用js的方式调用组件并传参。

2024-09-24 23:19:44 1546 2

原创【CSS Tricks】深入聊聊前端编写css的方法论

css作为前端开发工程师重要的一门技术，在开发工作中可能会花费比写js脚本更多的时间，就为了能让页面更贴合乃至1：1还原UI设计稿（往往事与愿违~）。且不谈最终实现的样式效果如何，单从css代码的混乱程度，就非常让人头大。如果遇到产品优化迭代，需要更新样式时，简直是团队噩梦。一个开发团队中每个人都有自己的编码习惯，有些人喜欢用拼音简称去命名样式类名，有些人喜欢在标签里写样式，有些人可能编写过程中忘记自己写过什么样式就重复覆盖了，偶尔会冒出几个机灵鬼用important去压制别人的样式。需要统一规范。

2024-09-24 23:16:35 1485

原创【VUE3.0】动手做一套像素风的前端UI组件库---Radio

本篇复现的组件为radio，日常项目中较为常见的组件，主要涉及到的内容有：参考NES.css进行基础样式构建，使用css模拟箭头指示器。点击动效设计，利用animation的animation-timing-function属性模拟指示器闪动效果。参考组件库Element Plus的设计使用方式，利用vue的slot插槽复现组件调用方式。设置禁用模式和change事件。

2024-09-22 17:07:50 1398

原创【VUE3.0】动手做一套像素风的前端UI组件库---Button

本篇复现的组件为button，日常项目中较为常见的组件，主要涉及到的内容有：基础样式构建。点击动效设计。参考市面上常见组件库的设计，根据type切换颜色。设置禁用模式。

2024-09-19 00:53:12 1709

原创【CSS Tricks】在css中尝试一种新的颜色模型HSL

在日常开发过程中，大多数情况下UI提供的颜色值为rgb或者hex格式，有些设计网站会直接提供hsl格式的色值。通过这篇文章主要想阐述一个事实，那就是hsl相对于rgb在前端开发领域是有很大优势的，尤其是编码层面上。使用hsl会使css的编码更加清晰，得到的颜色大概率不会偏离预期。可能现阶段大家用的不是很多，所以会有所抵触，在使用一段时间后，相信你会爱上这种颜色模式。

2024-09-19 00:50:18 967 2

原创【VUE3.0】如何得到一张像素风格的图片？

像素风图片是一种以像素为基本单位的图像风格。在数字图像中，每一个像素实际上就是一个小方块，它有自己的颜色。在早期的计算机图形学中，由于硬件限制，图像分辨率较低，因此图像由较大且明显的像素组成。随着时间的发展和技术的进步，虽然我们可以创建更高分辨率的图像，但是像素艺术（Pixel Art）作为一种复古的艺术形式依然受到许多人的喜爱。

2024-09-18 00:06:12 1079 2

原创【VUE3.0】动手做一套像素风的前端UI组件库---先导篇

我将在接下来的几篇文档中，完成以下几个内容：1. 参考NES.css研究各类组件样式如何编写。2. 基于vue3框架编写组件库。3. 将组件库发布npm仓库提供下载。

2024-09-18 00:03:50 1258

原创【WebGis开发 - Cesium】获取视野中心点，并设置顶视图视角

> 项目开发过程中遇到一个需求，通过一个按钮切换视角为顶视图。> 分析了一下这个模糊的需求，首先没有给出切换顶视图后俯视的区域范围，其次没有给出俯视点的高度。> 这里可以粗略的认为当前的侧俯视的角度下观看的范围即为俯视的区域范围，当前摄像机的高度为俯视点的高度，以这两点为基准开始编码。

2024-09-15 01:26:49 710

原创【CSS Tricks】一种基于AV1视频格式的现代图像格式-AVIF

AV1图像文件格式（英语：AV1 Image File Format，简称AVIF）是由开放媒体联盟（AOM）开发，采用AV1视讯编码技术压缩图像的一种图像文件格式，能用来储存一般的图像和动态图像。AVIF和苹果公司产品所用的HEIC（英语：High-Efficiency Image Container）图像格式都采用了基于国际标准化组织基本媒体文件格式的高效率图片格式（High Efficiency Image File Format，简称HEIF）容器，不过HEIC采用的压缩技术来自于HEVC/H.26

2024-09-14 16:21:26 1127 2

前端环境搭建软件，vscode+nvm+git

【CSS Tricks】像素风字体、图片

UE5.3.2-VR手部模型替换

空空如也