青花鱼の小栈

💡 背景与痛点之前写项目时，体验了Github Copilot Agent模式的强大功能，它能直接在执行任务时，自动读取项目里关联的上下文。然而我注册了账号，领取免费试用，高高兴兴爽了一个月后，试用到期了。 本着“能白嫖绝不付费，免费就是最好的”原则，我挖掘到了 Gemini CLI 这款神器。它不仅拥有强大的代码辅助能力，更重要的是：它每天提供 1000 次免费请求额度，量大管饱！ 于是我在网上各种找攻略，找教程，翻官方文档，踩遍了各种坑（尤其是账号和网络配置），终于总结出了这套10分钟极速上手指南。希望能帮你节省时间，直接享受 AI 编程的快乐。 🛠️ 先决条件在开始之前，请确保你的环境满足以下要求： Node.js：版本需 > 20 操作系统：支持 macOS、Linux 或 Windows Google 账号：必须使用个人账号（划重点：学生账号、组织账号无法享受 1000 次/天的免费额度，详见后文避坑指南） 🚀 实战步骤：手把手教你配置1.安装 Gemini CLI打开终端（CMD或 PowerShell），运行以下命令进行全局安装： 1npm ...

引言：知其然，更要知其所以然作为一个长期与 Cesium 打交道的 Giser，在搭建Web3D场景时，面对Shader、矩阵变换、酷炫材质等深层定制需求，我常常因不了解三维渲染底层逻辑而感到困惑与束手无策。为此，我在B站上学习了闫令琪大佬的计算机图形学课程，并使用原生WebGL在实践中验证理论。 这篇文章不讲复杂的 API 调用，只讲最纯粹的渲染逻辑。让我们从零开始，写出属于 Web3D 的“Hello World”，一起攻克那些让人头秃的图形学概念！ 建立基本概念在正式开始写代码之前，我们首先需要对以下几个概念建立起明确的认知： 1.WebGL到底是什么？很多人说到 WebGL ，就想到三维、想到酷炫的3D动画效果，认为它是一个无所不能的3D渲染引擎。但实际上WebGLFundamentals 在教程中给出了清晰的定义： WebGL仅仅是一个光栅化引擎，它可以根据你的代码绘制出点，线和三角形。 想要利用WebGL完成更复杂任务，取决于你能否提供合适的代码，组合使用点，线和三角形代替实现。 换言之，WebGL实际上只负责在2D的画布上，画点、线、三角形，以及上色而已，它的功能相当 ...

背景使用hexo框架写文章时，需要为文章生成永久链接，以保证即使文章的文件名更改后，文章的链接也不会变化。之前我使用了hexo-abbrlink插件来完成这一工作，但其存在一个问题——当我没有在本地没有使用hexo generate或者hexo server命令时，文章的abbrlink不会生成，此时我提交代码到github上，触发CI/CD流程，文章的abbrlink不会被记录到远程仓库中。 思路文章的abbrlink应该在hexo new命令执行时生成！查看hexo官网API文档，发现可以监听new事件，于是想到可以在事件的回调中，为文件添加上abbrlink属性 解决在根目录下新建一个script目录 ，创建一个文件：auto-abbrlink.js，将下面的代码粘贴进去： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657const fs = require("fs")const path ...

背景：在前端开发中，UI 设计师的需求往往与 ElementUI、Ant Design 等第三方组件库的默认样式存在冲突。为了还原设计稿，我们经常需要对组件样式进行“魔改”。 很多新手在修改样式时，常遇到样式不生效或造成全局污染的问题。本文总结了在 Vue 项目中定制第三方 UI 样式的几种最佳实践，帮助大家优雅地解决由 scoped 带来的样式隔离难题。 方法总结：方案一：全局样式覆盖（Global Override）适用场景： 需要修改整个项目中某类组件的通用样式（如：统一修改所有按钮的圆角、统一 Input 输入框的高度）。 实现方式： 在项目样式目录下新建一个专门的重置文件（例如 styles/element-reset.scss），编写覆盖代码后，在入口文件引入。 创建重置文件 src/styles/element-reset.scss： 12345678/* 覆盖 element 全局样式 */ .el-button { border-radius: 2px; /* 比如将圆角改小 */ } /* 修改所有弹窗的头部背景 ...

📝 背景在视频监控、直播等场景中，RTSP (Real Time Streaming Protocol) 是一种广泛使用的视频流传输协议。然而，痛点在于：**浏览器原生并不支持 RTSP 协议 **，传统的 <video> 标签无法直接播放 RTSP 流。 为了在 Web 前端实现 RTSP 视频播放，我们需要“曲线救国”：将 RTSP 流转换为浏览器原生支持的 WebRTC 协议。 本文将手把手教你如何使用 MediaMTX 作为流媒体服务器，在 Vue3 前端项目中实现丝滑的 RTSP 视频流播放。 🛠️ 解决方案我们需要两个核心工具： MediaMTX: 一个轻量级的开源流媒体服务器，核心能力是支持 RTSP 转 WebRTC。 FFmpeg: 强大的音视频处理瑞士军刀，用于模拟 RTSP 视频流进行开发测试。 技术架构图: 1RTSP源流 --> MediaMTX服务器 --> WebRTC协议 --> 浏览器播放 💻 实操演练1. 视频流模拟首先，下载并启动 MediaMTX。 然后，下载 FFmpeg 工具，在FFmpe ...

在当今快速迭代的开发环境中，如何高效部署项目是每个开发者必须掌握的技能。宝塔面板作为一款强大的服务器管理工具，能够极大简化部署流程。本文将以Vue前端+SpringBoot后端项目为例，手把手带你完成从零到一的完整部署过程。 1.环境安装1.1 安装nginx在应用商店搜索nginx，点击安装即可 1.2 安装数据库同样在应用商店搜索，根据你使用的数据库，安装对应的即可，这里以mysql为例： 1.3 安装java环境这个稍微有点区别，在左侧菜单栏选择网站，然后再顶部二级菜单栏选择java项目，点击Java环境管理，选择你java项目依赖的版本安装： 2.数据库迁移2.1 创建数据库：点击数据库>选择你使用的数据库>点击添加数据库>点击确定创建： 2.2 迁移数据和表结构上传生成的数据库迁移sql文件，点击导入即可 3.后端部署3.1 上传jar包点击文件，在www/wwwroot目录下，新建一个文件夹，作为后端项目的文件目录： 然后将jar包传到该目录下： 3.2 添加java项目选择网站>Java项目>添加项目，在项目路径一项， ...

在数字时代，我们每天都会接触到大量的图片和视频。无论是手机、电脑屏幕，还是电视、相机，都离不开一些关键的技术术语，例如：像素、分辨率、码率、PPI和DPI。这些概念虽然常见，但很多人对它们的具体含义和区别不甚了解。本文将用通俗易懂的方式，带你一次性搞懂这些令人困惑的术语。 1. 像素 (Pixel) - 构成图像的基石像素（Pixel，简称px）是“Picture Element”（图像元素）的缩写。你可以把它想象成构成一幅数字图像的最小单位，就像是用无数个微小的、单一颜色的“马赛克”方块拼凑出一幅完整的图画。 核心特点： 它是数字图像的最小组成部分。 每个像素只能显示一种颜色。 一张图片由成千上万甚至数百万个像素组成，像素越多，图像的细节就越丰富。 当你把一张图片放大到极致时，你看到的那些小方格就是一个个的像素。 2. 分辨率 (Resolution) - 图像的尺寸与清晰度分辨率（Resolution）通常用来描述一幅图像所包含的像素数量，是衡量图像细节表现能力的重要指标。它通常表示为“宽度像素数 × 高度像素数”。 常见表示： **1080p (Full HD)**： ...

bug描述在cesium+vue3项目开发时，安装依赖后跑不起来，报错提示如下： 排错过程：根据错误提示知道：Cesium引用了@zip.js/zip.js中的zip-no-worker.js文件，推测可能是@zip.js/zip.js的版本不正确，导致cesium拿不到这个引用的文件。 于是到node_modules中查看了@zip.js/zip.js依赖的文件夹： 果然没有，验证了我的推测，于是又查看了cesium中依赖的zip包版本，和实际安装的zip包版本，进一步确认了两者的版本不一致： 问题解决1.先用了npm，把@zip.js/zip.js包删了以后，想用npm i命令指定版本安装一下，发现npm报错，很离谱。 2.直接放弃npm，选择了pnpm安装依赖，在package.json中添加一项配置，强制项目中所有对@zip.js/zip.js的依赖使用该版本： 12345"pnpm": { "overrides": { "@cesium ...

问题背景与描述为了跟上时代的步伐，最近在开发一个vue3+vite+pinia的新项目开发过程中，体验了下vscode的copilot生成代码，不得不说效率真的牛逼！但同时，也会有一些小缺点小问题，需要我们去微调代码，就比如我今天遇到的坑。 我在某个页面组件中使用了useStore中的方法，为store中的某个状态初始化了数据，但跳转到另一个页面时，发现store中的状态被清空了。 解决方法使用router.push方法替代原来的window.location.href做页面跳转即可解决 12345// 跳转到评分页面const jumpToGrade = (item: Contestant) => { // window.location.href = `/grade?id=${item.id}` router.push({ path: '/grade', query: { id: item.id } })} 问题排查过程拷问了deepseek，豆包等AI，都说要对stor ...

问题描述：启动vue项目时，报如下错误： 问题解决：查阅资料后发现，可能是文件路径中有括号导致 1D:\work\17_ym(vue3)\szgc-gcym-server\yj_ym_tdp_ui //路径中含有英文括号 尝试重命名路径（删除路径中的括号）后重新启动，出现了新的报错： 点进node_modules里点了一下依赖，发现无法跳转，推测可能是重命名路径后导致pnpm依赖链接失效，尝试执行命令重新安装依赖： 1pnpm install 安装成功后运行项目： 1npm run serve 问题解决，成功启动项目：

✨ 前言：作为一名从零开始学习Nginx配置的开发者，我在初次部署静态网站时，面对Nginx复杂的配置文件结构感到十分困惑。nginx.conf、sites-available、sites-enabled等目录和文件各自承担着什么职责？它们之间又是如何协同工作的？经过深入研究和实践验证，我整理出了一些初学nginx时的常见问题，以问题的形式为新手建立对nginx的整体认识，希望能帮助初学者快速掌握Nginx的核心配置逻辑。 🛠️环境：操作系统：Ubuntu 22.04 LTS🐧 nginx版本：nginx/1.18.0 (Ubuntu) ❓常见问题解答：Q1：nginx配置文件有哪些 ?📂Nginx 配置文件结构总览 配置文件/目录 路径示例 主要作用 核心配置项/内容 使用说明 nginx.conf (主配置文件) /etc/nginx/nginx.conf 全局配置入口，定义Nginx运行的基础参数 - user, worker_processes - events块 - http块 - include指令 相当于程序的 main 函数 ...

✨ 前言作为一名前端开发者，我们通常只需要将打包好的文件交给后端或运维同学即可完成部署。但在某些场景下，我们也需要亲自将前端资源部署到服务器上。本文将以最直观的方式，带你一步步完成前端项目的完整部署流程，并解释其中涉及的关键概念！🎯 📚 核心概念解析在开始实操前，先了解几个基础概念，这将帮助你更好地理解整个部署过程： 1. 什么是 Nginx？🌐Nginx（发音为”engine-x”）是一款高性能的开源Web服务器，同时具备反向代理、负载均衡和HTTP缓存等强大功能。它最初是为了解决C10K问题（即单服务器处理万级并发连接）而设计。 以下是Nginx的核心功能概览： 功能类别 核心能力 典型应用场景 Web服务器 高效处理静态资源（HTML、CSS、JS、图片等） 托管静态网站、作为前端资源服务器 反向代理 接收客户端请求并转发给后端服务器，隐藏真实服务器信息 作为后端应用的统一入口和安全屏障 负载均衡 将请求分发到多个后端服务器 分散高并发流量，提高应用可用性 HTTP缓存 缓存静态内容及后端响应，加速访问速度 提升用户体验，减少服务器负载 SSL& ...