鱼与前端🐟

前言mini-Vue 是精简版本的 Vue3，包含了 vue3 源码中的核心内容，附加上 demo 的具体实现。本篇是总集篇，包含了 mini-vue 的全部基本实现，参见传送门内容 传送门reactive篇从零开始的mini-vue①—reactive篇 vnode篇从零开始的mini-vue②—vnode篇 patch篇从零开始的mini-vue③—patch篇 核心diff篇从零开始的mini-vue④—核心diff篇 最长上升子序列篇从零开始的mini-vue⑤—最长上升子序列篇 Component 篇从零开始的mini-vue⑥—Component篇 Scheduler 篇从零开始的mini-vue⑦—Scheduler篇 Compiler 篇从零开始的mini-vue⑧—Compiler篇

本文系统介绍了使用 vee-validate 结合 zod 进行表单状态管理的解决方案，通过对比传统声明式表单验证的局限性（需手动声明响应式变量/校验规则），重点展示了该方案通过高阶组件与组合式 API 实现表单初始化的灵活性、利用 zod 强大的类型校验体系（支持复杂场景如文件名唯一性校验）、提供两种错误反馈机制（提交时全局校验与实时字段级校验），以及多步骤表单的字段值保留策略，最终实现更简洁高效的表单开发范式。 vee-validate 表单状态管理为什么要使用 vee-validate？我们先来看看常规情况下的表单，参考 NaiveUI,使用的是声明式规则和 kv 绑定 1234567891011<n-form ref="formRef" :model="model" :rules="rules"> <n-form-item path="age" label="年龄"> <n-input v-model:value="mod ...

这篇文章系统介绍了基于 CASL 的前端权限管理方案，重点阐述了其通过”能力-规则-操作-主体”模型实现细粒度权限控制的机制。方案支持字段级权限校验和动态条件判断，提供 Vue 框架下的路由守卫集成、组件级权限指令、类型安全增强等实践方案，特别适合中大型项目实现灵活可维护的权限体系，通过前后端统一的权限规则格式，有效保障了系统安全性和开发效率。 基于CASL的前端权限管理方案介绍什么是 CASLCASL 是一套专为 JavaScript 和 TypeScript 开发者设计的工具，用于简化和管理前端应用程序中的访问控制。通过 CASL，您可以轻松地定义和检查用户对应用程序中各种资源的权限，从而确保您的应用在安全性和用户体验方面达到最佳状态。 为什么选择 CASL 灵活性： CASL 提供了灵活的规则定义机制，使您能够根据业务需求轻松创建细粒度的权限规则。 易用性： CASL 的 API 设计简洁直观，使得权限管理在代码中变得容易理解和维护。 框架无关性： CASL 不依赖于特定的前端框架，因此您可以在任何框架（如 React、Angular、Vue 等）中使用。 安装和配置安装 C ...

这篇文章系统介绍了 TanStack Query 在前端请求状态管理中的应用，核心围绕三个关键模块：useQuery（响应式数据获取，支持自动刷新和条件请求）、useMutation（处理副作用操作，提供完整生命周期回调）和 queryClient（请求中继器，支持手动缓存控制）。文章重点阐述了项目实践规范，包括分层架构设计（api/query/type 文件分离）、类型安全规范（DTO/VO 实体定义）以及响应式参数处理技巧（maybeRefOrGetter + toValue 组合），最后还提及了通过 IDE 插件实现代码规范自动化生成的高效开发模式。 TanStack Query 请求状态管理什么是 Tanstack Query？为什么要使用它tanstackQuery 我个人认为是一个请求调用的效率提升工具；帮助开发者基于响应式获取请求数据，基于函数式规范调用接口； tanstackquery 主要分为两部分实现，一部分是 useQuery，一部分是 useMutation；两部分实现都是对请求的抽象调用和获取，我们可以简单的理解为，useQuery 是用于自动化（响应式）获 ...

前言mock 工具的使用以及拓展 形式开启 mock 有两种形式 环境变量和注解 通过环境变量开启 mock（生产阶段优选）这个需要 env 里面是否包含 mock 环境的判断不过一旦构建好就改不了了 mock 通过注解开启 mock（开发阶段优选）项目默认开启 mock(main.ts 中注入)不需要的时候直接注释掉即可 综上的新方法开发环境：默认 mock 环境 123VUE_APP_MODE=mockVUE_APP_URL=x'x'xVUE_APP_MARK_TEXT=开发环境 生产环境 123VUE_APP_MODE=productVUE_APP_URL=xxxxVUE_APP_MARK_TEXT=生产环境 main.ts 1234// 通过注释动态控制开发环境是否需要mockif (process.env.VUE_APP_MODE === "mock") { // require("@/mock");} mock 基本使用http://mockjs.com/examples.html常用： 12 ...

前言history模式部署 需要注意的东西 如下： histroy模式加载baseUrl 打包同样 前缀是baseUrlvue.config.js 将dist文件夹下的东西提交到gh-pages指令1git subtree push --prefix dist origin gh-pages效果 部署

前言基于 microapp 的微前端实操 安装microapp 需要基座项目+若干子项目这里以如下三个项目为例子 123vue create basevue create first_childvue create second_child Cd 到基座项目 安装 microapp 1pnpm install @micro-zoe/micro-app --save 在基座中的 main.ts 中引入 1234567891011121314151617181920212223242526import { createApp } from "vue";import App from "./App.vue";import router from "./router";import microApp from "@micro-zoe/micro-app";microApp.start({ // microApp生命周期 lifeCycles: { created(e ...

前言h 函数 hyperscript （生成 script）用于生成对应的标签其实所有的 vue 组件都是经过一次 render 之后转化成 h 函数，然后再去对应的渲染 dom 的。那么使用 h 函数渲染组件有什么优势呢？ sfc 结构vue 是使用了一段叫做 sfc 的结构，类似于一开始学习前端的时候 body script style，现在 vue 是 template script style 1234567891011121314151617181920212223<template> <div class="example">{{ msg }}</div></template><script>export default { data() { return { msg: "Hello world!", }; },};</script>&l ...

前置知识Nginx 项目运行和打包 安装安装一个 windows 的 docker 略 查看 dockerCmddocker version使用 docker 启动一个项目新建项目npm init vue@latest然后一路回车 给他起名字叫docker-demo-vue之后 123cd docker-demo-vuenpm installnpm run dev 就可以看见项目被运行起来了运行起来后给项目打包npm run build 创建 Dockerfile然后在项目根目录创建 Dockerfile注意大小写 一定不能错 而且文件没有后缀里面的内容后面配置镜像的时候会讲到 拉取 nginx 镜像之后拉取 nginx 镜像win+r cmd 打开控制台 输入docker pull nginx此时会有两种情况 如果没有拉取过 nginx 后面会有条 Status 是 Downloaded newer image for nginx:lastest 如果之前接触过拉过 则显示 image is up to date for nginx:lastest 查看镜像docker imag ...

前言白浪费了那么多有用的代码.jpg避免今后用到相同的代码却要在不同的仓库里反复找实现 我决定把公用的代码抽出来 方便以后能用(方便脑子短路的时候找不到合适的代码)成果：https://www.npmjs.com/package/zlinni_common_pkg?activeTab=readme 编写代码首先 GitHub 建一个仓库，我写的是 zlinni_common_pkg 之后添加一个 README，然后导出clone 仓库后，npm init 出现 packgejson(稍后看)新建一个 src 文件夹新建一点代码 zlinniTool.ts 123export const sayHi = (): string => { return "Hello~";}; 包的规则打开我们的 pkgjson这是我写的规则 附加注释 1234567891011121314151617181920212223242526272829{ "name": "zlinni_common_pkg", ...