木灵鱼儿

木灵鱼儿 1天前 Python

3 windows安装Python和设置环境变量

官网地址python在顶部导航栏找到Downloads，选择适合你系统的版本下载即可。安装下载完成后，双击安装包进行安装。务必勾选“Add Python to PATH”，这样可以在命令行中直接使用 Python。建议选择“Customize installation”，可以根据需要选择安装组件和路径。一般组件保持默认即可，主要是可以选择安装路径，建议安装在一个简单的路径下，比如 D:\Python。选择好后，点击“Install”开始安装，等待安装完成即可。配置环境变量如果在安装时没有勾选“Add Python to PATH”，需要手动配置环境变量。右键“此电脑”图标，选择“属性”。...

51 0 0

安装环境变量 Python

2 Python 编程语言极简指南：从起源到实战的底层逻辑

木灵鱼儿 2天前 Python

2 Python 编程语言极简指南：从起源到实战的底层逻辑

前言在当今的编程世界中，Python 无疑是最受瞩目的语言之一。但要真正掌握它，我们需要跳出语法细节，先从它的设计初衷、发展历史以及它在现代技术栈中的独特生态位说起。一、意外诞生的“巨蟒”Python 的诞生颇具戏剧性。1989 年圣诞节期间，荷兰程序员 Guido van Rossum（吉多·范罗苏姆，人称“龟叔”）为了打发无聊的假期时间，决定编写一门新的脚本语言。他以自己喜爱的一部电视剧《Monty Python's Flying Circus》（巨蟒之疯狂马戏团）将其命名为 Python。虽然现在我们看到的 Logo 通常是一条大蟒蛇，但这门语言的基因里其实充满了幽默与随性。Py...

48 0 0

Python

1 编程语言运行机制详解：编译型 vs 解释型

木灵鱼儿 2天前 Python

1 编程语言运行机制详解：编译型 vs 解释型

前言高级语言（如C、Python）编写的代码，计算机无法直接理解，必须依靠“翻译软件”将其转换为机器指令。根据翻译方式的不同，编程语言分为编译型和解释型两大类，分别对应编译器和解释器一、核心运行机制对比这两种语言最本质的区别在于：代码是如何被“翻译”并交付给CPU执行的。1. 编译型语言（代表：C、C++、Go）机制：整体翻译，一次生成。流程：源代码通过编译器（Compiler）进行一次性编译，生成一个独立的可执行文件（如Windows下的 .exe）。特点：独立性：生成可执行文件后，源代码即可脱离环境。用户只需运行该文件，无需再次编译。一次编译，多次执行：除非修改代码，否则后续运行无...

57 0 0

Python 编程语言编译型

手把手实现 SWR 缓存策略，彻底告别页面闪烁

木灵鱼儿 1周前 vue 项目实战

手把手实现 SWR 缓存策略，彻底告别页面闪烁

前言在开发移动端 H5 项目时，我们经常面临一个棘手的用户体验问题：页面切换时的加载闪烁。当用户在 Tabbar 之间切换时，页面组件通常会重新渲染并触发 API 请求。即使后端响应迅速，用户依然会看到短暂的“白屏”或“骨架屏”，随后内容突然跳出。这种反复的 Loading 状态打断了用户的操作流，体验并不友好。为了解决这一痛点，通常的思路是进行接口缓存。即：将数据缓存在本地，再次进入页面时优先读取缓存。但如果完全依赖缓存，又会导致数据更新不及时。如何在“极速渲染”和“数据新鲜度”之间找到平衡？业界有一个成熟的方案——SWR (Stale-While-Revalidate)。本文将带你在...

164 0 0

vue3 SWR API缓存

TypeScript 进阶：如何在 Vite + Vue 3 中正确声明全局对象（以 WeixinJSBridge 为例）

木灵鱼儿 1周前 TypeScript

TypeScript 进阶：如何在 Vite + Vue 3 中正确声明全局对象（以 WeixinJSBridge 为例）

前言在使用 Vite + Vue 3 + TypeScript 开发微信 H5 页面时，我们经常遇到一个痛点：TypeScript 报错找不到 WeixinJSBridge。// TS Error: Cannot find name 'WeixinJSBridge'. WeixinJSBridge.invoke('getNetworkType', {}, () => {}); // TS Error: Property 'WeixinJSBridge' does not exist on type 'Windo...

212 0 0

模块 declare 全局类型声明

在 Vue 项目中实现 github-markdown-css 的亮色与暗色模式动态切换

木灵鱼儿 1周前 vue 项目实战

在 Vue 项目中实现 github-markdown-css 的亮色与暗色模式动态切换

前言最近项目中需要接入用户协议与隐私政策，法务部门提供的是 Word 文档。为了方便维护和在项目中直接渲染，我将文档转换为 Markdown 格式，并通过 Vite 的 unplugin-vue-markdown 插件将其作为 Vue 组件直接引入：<template> <Privacy /> </template> <script lang="ts" setup> import Privacy from "@/locales-other/zh-CN/agreements/privacy.md"...

143 0 0

主题 github-markdown-css 亮色

Vue 3 进阶实战：基于 Promise 的通用弹窗管理器（命令式调用）

木灵鱼儿 1月前 vue 项目实战

Vue 3 进阶实战：基于 Promise 的通用弹窗管理器（命令式调用）

🚀 前言在 Vue 项目开发中，弹窗（Dialog/Modal/Drawer）是交互的核心载体。然而，随着业务复杂度的攀升，传统的声明式弹窗管理逐渐暴露出“样板代码多”、“状态分散”、“逻辑割裂”等痛点。本文将介绍一种基于 Promise 驱动的命令式弹窗管理方案，它能让你像调用 API 一样从 JS/TS 中直接唤起弹窗，并获取用户操作结果，彻底告别繁琐的 visible 变量。😫 痛点分析：传统模式的“四宗罪”看看这段典型的父组件代码，你是否感到熟悉且头疼？<template>  <UserEditDialog v...

378 6 0

promise dialog vue3

搭建基于 Vite + TypeScript + Vue 3 + Electron的小项目

木灵鱼儿 2月前 vue 项目实战

搭建基于 Vite + TypeScript + Vue 3 + Electron的小项目

前言有时候我们需要将前端项目打包成一个exe文件供人使用，在不考虑性能或者包体大小的情况下，使用Electron来打包项目是一个不错的选择，那么有没有办法从现有的前端项目中加入Electron呢？答案，当然是可以的，这里以我自己的项目为例，我的项目基于Vue3 + TypeScript + Vite，目的是为了实现一个excel文件的格式化处理功能，打包成exe安装包也只是为了减少运维的工作，用户自己安装本地运行就可以了，没必要部署到线上。核心概念：主进程与渲染进程在开始之前，理解 Electron 的两个核心概念至关重要：主进程 (Main Process)：每个 Electron 应...

882 25 0

vue3 vite Electron

OpenClash如何设置规则跳过指定网站代理

木灵鱼儿 2月前教程

OpenClash如何设置规则跳过指定网站代理

前言之前设置某些域名不进行代理，比如国内的一些站点设置了国外IP不能访问，导致访问失败，我之前一直在【插件设置】-【流量控制】-【绕过指定区域 IPv4 黑名单】里面添加，实际上一点效果都没有，加了个寂寞，网上搜也搜不到什么教程，刚好最近折腾明白了，自己写一篇教程，分享给大家。教程我们需要在OpenClash配置页面中找到：【覆写设置】-【规则设置】-【勾选自定义规则】，此时会展示两个输入框，第一个是优先匹配，第二个是候选匹配，我们只需要关系第一个优先匹配就行。鼠标移动到第一个输入框中，然后滚动滚轮，找到关键词rules:，我们需要在它的下面添加规则配置，以我自己网站为例，我不希望访问...

2009 0 0

OpenClash clash 规则

深入Element Plus：让自定义组件继承表单的 size 属性

木灵鱼儿 2月前 vue 项目实战

深入Element Plus：让自定义组件继承表单的 size 属性

前言最近在开发一个较为复杂的表单页面时，我遇到一个场景：页面中包含了一些自定义封装的组件，需要让这些组件的 size 属性（用于控制尺寸）能够自动继承自父级 el-form 组件的设置。我们知道，在 Element Plus 中，只要为 <el-form> 组件设置了 size 属性（如 large 或 small），其内部的 el-input、el-button 等官方组件都能自动继承这个尺寸。但对于我们自己开发的组件，例如一个自定义的 <Icon> 组件，它默认是无法感知到 el-form 的 size 设置的。那么，如何才能让我们的自定义组件也具备这种“继...

618 3 0

继承 element-plus size

前端项目版本号管理与CI-CD自动化发布实践

木灵鱼儿 2月前前端基础建设与架构

前端项目版本号管理与CI-CD自动化发布实践

前言在现代前端开发中，规范的版本管理和高效的持续集成/持续部署（CI/CD）是保障项目质量和迭代效率的关键。本文将探讨如何利用 npm（或 pnpm/yarn）对前端项目进行版本号管理，并结合 GitHub Actions 实现标签（tag）触发的自动化发布流程，从而构建一个简洁而强大的 CI/CD 工作流。核心工具：package.json 中的 version 字段所有基于 Node.js 的项目（包括绝大多数前端项目）都通过 package.json 文件来管理元数据，其中 version 字段是记录项目版本号的核心。我们通常遵循语义化版本规范（Semantic Versionin...

975 24 0

git version 版本号

git 如何修改已提交的commit信息

木灵鱼儿 2月前 Git 笔记

git 如何修改已提交的commit信息

前言在使用 Git 提交代码时，我们有时会因为手速过快、疏忽大意或使用 AI 辅助工具时未及时调整，导致提交（Commit）信息不符合规范或包含错误格式。例如：AI 生成的 Commit 信息带有 Markdown 代码块的格式，如下所示，明显是不合适的：``` feat(settings): 重构情绪权重组件并优化交互逻辑将 EmotionSlider 和 EmotionRadar 组件重构为独立模块，调整其目录结构并增强功能。 ... (省略部分内容) ```为了修复这种情况，我们需要修改已经提交的 Commit 信息。根据要修改提交的数量，Git 提供了不同的解决方案。教程：如何...

1957 0 0

git commit rebase

解决 Element Plus 中 el-space 与 v-if/v-show 的渲染冲突问题

木灵鱼儿 3月前 vue 项目实战

解决 Element Plus 中 el-space 与 v-if/v-show 的渲染冲突问题

前言最近在开发后台管理系统时，我遇到了一个常见的需求：在表格的操作列中，根据数据状态动态显示不同的操作按钮。为了让按钮之间排列整齐并带有分隔符，我使用了 Element Plus 的 el-space 组件。代码如下：<el-space size="16" spacer="|"> <el-button type="primary" text> 修改 </el-button> <el-button v-if="isRecycle" type="succ...

2443 4 0

slot 插槽 element-plus

解决 Element Plus 中 el-space 与 v-if/v-show 的渲染冲突问题

vscode 快速引入和解构插件：fast-import

木灵鱼儿 4月前 VSCode

vscode 快速引入和解构插件：fast-import

前言在日常的编码工作中，手动输入 import 语句和进行对象解构时，频繁地移动光标常常会打断我们的编程体验。为了解决这一痛点，我自己开发了 fast-import这个VS Code 插件，旨在通过简单的快捷键操作，极大地提升代码引入与解构的效率和流畅度。痛点回顾与解决方案你是否曾因为以下场景而感到烦恼？手动 import：输入 import {} from "..." 后，需要手动将光标移入 {} 中，再等待代码提示。对象解构：键入 const {} = object; 后，同样需要手动定位光标以输入解构属性。fast-import 插件正是为解决这些重复且繁琐...

2138 1 0

解构 vscode import

git 让新的提交合并到上一次提交中

木灵鱼儿 4月前 Git 笔记

git 让新的提交合并到上一次提交中

前言在提交代码的时候常常会遇到这种情况，我已经把改动提交到远程了，也就是推送了，但是呢，总是会有一些想不到的遗漏发生，比如变量名写错了，注释写错了，反正就是一些很小的细节，但是我又不想再创建一次提交记录，因为这会让历史记录变得很混乱。为此，便有了这篇文章。教程注意，害怕的话我建议先把代码存储一下，因为如果已经合并到上一次记录了，取消本次操作只能reset记录了，到时候代码回退到上一次的提交，你本次修改的东西就没了。操作也很简单，我们利用下面这个命令：git commit --amend此时会打开一个提交信息的编辑界面，我们可以修改提交信息，然后保存退出。（进入到编辑界面会有操作提示，es...

2044 0 0

git commit 合并提交

git 快速将 Git 仓库迁移至其他平台

木灵鱼儿 5月前 Git 笔记

git 快速将 Git 仓库迁移至其他平台

前言在项目开发或重构过程中，我们有时需要将代码仓库从一个平台（如 GitHub）迁移到另一个平台（如自建的 GitLab）。最近就遇到这样的需求，因此整理了一下迁移的相关知识。准备工作：创建新仓库在开始迁移之前，你需要在目标平台（例如 GitLab）上创建一个空仓库。仓库命名：建议新仓库的名称与旧仓库保持一致，例如 my-project。保持纯净：创建仓库时，请勿初始化任何文件。不要勾选创建 README.md、.gitignore 或 LICENSE 等选项。一个完全空的仓库是迁移成功的前提，可以避免后续推送时产生不必要的合并冲突。迁移教程我们提供两种迁移方法，你可以根据实际需求选择。...

2633 15 0

git Remote 迁移

告别手动重启：一键刷新 VS Code 服务的效率神器 —— Restart VSCode Server

木灵鱼儿 6月前 VSCode

告别手动重启：一键刷新 VS Code 服务的效率神器 —— Restart VSCode Server

初心作为一名前后端开发者，你是否也曾遇到过这样的场景：刚刚调整了项目的 TypeScript 或 ESLint 配置，满心欢喜地以为大功告成，却发现类型检查依然报错，代码提示也未按预期生效。这时候，我们通常需要重启 VS Code 服务，才能让新的配置被正确加载。然而，每一次修改配置都可能需要一次手动重启，这个过程不仅繁琐，更会打断我们宝贵的“心流”状态。为了解决这个问题，我曾尝试过一些社区的插件。但它们或多或少存在一些不便，比如我用过的一款，它的重启按钮只在 .ts 或 .js 文件中显示，而在我常用的 .vue 文件中却不见踪影，导致我每次都得特意切换文件才能操作。为了彻底解决这个痛...

2822 6 0

插件 vscode 重启服务

告别手动重启：一键刷新 VS Code 服务的效率神器 —— Restart VSCode Server

plugin-legacy 动态读取 .browserslistrc配置

木灵鱼儿 6月前 vue 项目实战

plugin-legacy 动态读取 .browserslistrc配置

前言在前端开发中，为了确保一致和良好的用户体验，我们通常需要处理不同浏览器对 HTML、CSS 和 JavaScript 的支持差异。在 Vite 生态中，我们通常使用 .browserslistrc 文件来统一管理目标浏览器范围。像 postcss-preset-env 这样的工具会自动读取它来进行 CSS 降级。然而，一个常见痛点是 @vitejs/plugin-legacy 插件的 modernTargets 选项并不会自动读取该文件，需要我们手动配置。这就导致了同一个配置需要维护在两个地方：一份在 .browserslistrc 中给 PostCSS 使用，另一份在 vite.c...

1821 0 0

postcss vite @vitejs/plugin-legacy

vite中正确使用unplugin-auto-import实现自动引入vue相关依赖（支持Eslint v9）

木灵鱼儿 6月前 vue 项目实战

vite中正确使用unplugin-auto-import实现自动引入vue相关依赖（支持Eslint v9）

前言在日常的 Vue 项目开发中，我们常常需要手动从 vue 或 vue-router 等库中导入 ref、computed、onMounted 等 API。这不仅是一项重复性的劳动，也打断了我们编写业务逻辑的思路。手动引入（之前）：import { computed, ref } from 'vue' const count = ref(0) const doubled = computed(() => count.value * 2)unplugin-auto-import 这款插件正是为了解决这个痛点而生。它能够自动为我们导入这些常用的 API，让我们专...

1.5w 345 2

自动引入 eslint ts

vite中正确使用unplugin-auto-import实现自动引入vue相关依赖（支持Eslint v9）

Vite 代码降级完全指南：从build.target到自动化 Polyfill

木灵鱼儿 6月前 Vite

Vite 代码降级完全指南：从build.target到自动化 Polyfill

前言在前端开发中，浏览器兼容性是一个绕不开的话题。之前我曾探讨过如何用 Vite 解决低版本浏览器的白屏问题，但方案尚不完善。本文将以一个实际问题为切入点，深入剖析 Vite 项目中代码降级的两种核心方式——语法转译与 API Polyfill，并提供一套精准、自动化的终极解决方案。一个实际问题：Object.hasOwn 引发的兼容性报错有一次我的在开发微信H5页面应用的时候，我引入ky这个请求库，然后我就发现，即便是最新的微信开发者工具，打开还是会报错：Uncaught TypeError: Object.hasOwn is not a functionObject.hasOwn 是...

3089 2 1

babel vite 兼容

Vite 代码降级完全指南：从build.target到自动化 Polyfill

前端字体优化

木灵鱼儿 7月前前端功能

前端字体优化

前言想写这篇文章已经很久很久了，最近狠下心来整理这些资料，希望能帮助到大家。合适的字体格式字体文件有很多种：ttf、otf、eot、svg、woff、woff2；不同的格式用于不同的使用场景，而且大部分格式其实都不推荐使用，最终最值得使用的就是 woff2 格式。格式推荐优先级WOFF2：面向所有现代浏览器，性能最优。WOFF：面向稍旧一些的浏览器，作为 WOFF2 的主要备选。TTF/OTF：面向更老旧的移动浏览器。EOT (可选)：仅在需要兼容 IE8 及以下浏览器时才添加。SVG (基本不用)：除非有极端罕见的兼容性需求。最佳实践代码一个健壮的@font-face 实践代码：@fo...

3630 7 1

压缩字体 font-face

数据库索引

木灵鱼儿 8月前 MySQL

数据库索引

1. 什么是索引？索引是数据库中用于加速数据检索的数据结构，类似于书籍的目录。通过索引，MySQL 可以更快地定位到需要的数据行，避免全表扫描。2. 如何使用索引？创建索引：在创建表时添加索引：CREATE TABLE users ( id INT PRIMARY KEY, name VARCHAR(50), email VARCHAR(100), INDEX idx_name (name) );在已有表上添加索引：CREATE INDEX idx_email ON users(email);删除索引：DROP INDEX idx_col ON 表名;查看索引：SHOW ...

3481 2 2

MySQL 索引

数据库外键约束

木灵鱼儿 8月前 MySQL

数据库外键约束

一、什么是外键约束？外键（Foreign Key）约束是关系型数据库中用于建立和加强两个数据表之间联系的一种机制。通过外键，可以确保子表中的某个字段的值，必须在父表的主键或唯一键中存在，从而保证数据的参照完整性。二、为什么要使用外键？保证数据一致性：防止子表中出现无效的引用数据（如引用了不存在的用户ID）。自动维护数据关系：通过级联操作，自动同步父表和子表的数据变更。简化应用逻辑：部分数据校验交由数据库完成，减少应用层代码复杂度。三、外键的使用场景存在主从关系的数据表（如订单表与用户表、评论表与文章表等）。需要保证子表数据依赖于父表数据的场景。需要自动同步删除、更新等操作的场景。四、如何...

3478 16 2

MySQL 外键级联

数据库锁机制

木灵鱼儿 8月前 MySQL

数据库锁机制

数据库锁机制数据库锁机制是保证数据一致性、完整性和并发安全的重要手段。MySQL作为主流的关系型数据库，其锁机制设计合理，能够满足高并发场景下的数据访问需求。本文将详细介绍MySQL中的锁机制，并结合实际案例进行说明。1. 什么是数据库的锁？数据库的锁是一种用于管理多个用户对数据库中同一资源（如表、行等）并发访问的机制。通过加锁，可以防止数据在并发操作时出现不一致或冲突，确保数据的正确性和完整性。2. 有哪些锁？分别的触发条件和实际应用场景1. 表锁（Table Lock）触发条件：当你对整张表进行操作（如 LOCK TABLES、ALTER TABLE、DROP TABLE 等）时会触...

3238 7 0

MySQL 锁机制表锁

Visual Studio Code env环境变量文件高亮

木灵鱼儿 8月前教程

Visual Studio Code env环境变量文件高亮

前言最近vscode升级了版本：v1.100，这个版本除了又是一堆AI相关的功能优化，只有一个功能让我高兴，就是它对 env 文件实现了默认支持，可以对其高亮了，不用再安装额外的env插件。为此我们可以卸载以下两个插件：DotENVENV那么我们该如何正确使用这个默认高亮呢？教程如果你是新的配置，一般来说不需要配置什么，但是如果你之前使用过上面的两个插件，有可能会自定义了一些 Files Associations 配置，比如我之前就会将 .env.development、.env.production、.env.example 设置它的值为 dotenv 实现代码高亮。但是现在由于vsc...

3168 1 0

vscode env 高亮

木灵鱼儿

3 windows安装Python和设置环境变量

2 Python 编程语言极简指南：从起源到实战的底层逻辑

1 编程语言运行机制详解：编译型 vs 解释型

手把手实现 SWR 缓存策略，彻底告别页面闪烁

TypeScript 进阶：如何在 Vite + Vue 3 中正确声明全局对象（以 WeixinJSBridge 为例）

在 Vue 项目中实现 github-markdown-css 的亮色与暗色模式动态切换

Vue 3 进阶实战：基于 Promise 的通用弹窗管理器（命令式调用）

搭建基于 Vite + TypeScript + Vue 3 + Electron的小项目

OpenClash如何设置规则跳过指定网站代理

深入Element Plus：让自定义组件继承表单的 size 属性

前端项目版本号管理与CI-CD自动化发布实践

git 如何修改已提交的commit信息

解决 Element Plus 中 el-space 与 v-if/v-show 的渲染冲突问题

vscode 快速引入和解构插件：fast-import

git 让新的提交合并到上一次提交中

git 快速将 Git 仓库迁移至其他平台

告别手动重启：一键刷新 VS Code 服务的效率神器 —— Restart VSCode Server

plugin-legacy 动态读取 .browserslistrc配置

vite中正确使用unplugin-auto-import实现自动引入vue相关依赖（支持Eslint v9）

Vite 代码降级完全指南：从build.target到自动化 Polyfill

前端字体优化

数据库索引

数据库外键约束

数据库锁机制

Visual Studio Code env环境变量文件高亮

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

3 windows安装Python和设置环境变量

2 Python 编程语言极简指南：从起源到实战的底层逻辑

1 编程语言运行机制详解：编译型 vs 解释型

手把手实现 SWR 缓存策略，彻底告别页面闪烁

TypeScript 进阶：如何在 Vite + Vue 3 中正确声明全局对象（以 WeixinJSBridge 为例）

在 Vue 项目中实现 github-markdown-css 的亮色与暗色模式动态切换

Vue 3 进阶实战：基于 Promise 的通用弹窗管理器（命令式调用）

搭建基于 Vite + TypeScript + Vue 3 + Electron的小项目

OpenClash如何设置规则跳过指定网站代理

深入Element Plus：让自定义组件继承表单的 size 属性

前端项目版本号管理与CI-CD自动化发布实践

git 如何修改已提交的commit信息

解决 Element Plus 中 el-space 与 v-if/v-show 的渲染冲突问题

vscode 快速引入和解构插件：fast-import

git 让新的提交合并到上一次提交中

git 快速将 Git 仓库迁移至其他平台

告别手动重启：一键刷新 VS Code 服务的效率神器 —— Restart VSCode Server

plugin-legacy 动态读取 .browserslistrc配置

vite中正确使用unplugin-auto-import实现自动引入vue相关依赖（支持Eslint v9）

Vite 代码降级完全指南：从build.target到自动化 Polyfill

前端字体优化

数据库索引

数据库外键约束

数据库锁机制

Visual Studio Code env环境变量文件高亮

最近评论

博客文章RSS订阅

博客评论RSS订阅