从零开始的mini-vue总集篇
前言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 表单状态管理
本文系统介绍了使用 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的前端权限管理方案
这篇文章系统介绍了基于 CASL 的前端权限管理方案,重点阐述了其通过”能力-规则-操作-主体”模型实现细粒度权限控制的机制。方案支持字段级权限校验和动态条件判断,提供 Vue 框架下的路由守卫集成、组件级权限指令、类型安全增强等实践方案,特别适合中大型项目实现灵活可维护的权限体系,通过前后端统一的权限规则格式,有效保障了系统安全性和开发效率。
基于CASL的前端权限管理方案介绍什么是 CASLCASL 是一套专为 JavaScript 和 TypeScript 开发者设计的工具,用于简化和管理前端应用程序中的访问控制。通过 CASL,您可以轻松地定义和检查用户对应用程序中各种资源的权限,从而确保您的应用在安全性和用户体验方面达到最佳状态。
为什么选择 CASL
灵活性: CASL 提供了灵活的规则定义机制,使您能够根据业务需求轻松创建细粒度的权限规则。
易用性: CASL 的 API 设计简洁直观,使得权限管理在代码中变得容易理解和维护。
框架无关性: CASL 不依赖于特定的前端框架,因此您可以在任何框架(如 React、Angular、Vue 等)中使用。
安装和配置安装 C ...
TanStack Query 请求状态管理
这篇文章系统介绍了 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 有两种形式 环境变量和注解
通过环境变量开启 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 ...
记录一次histroy模式的vue项目部署到githubpage
前言history模式部署 需要注意的东西 如下:
histroy模式加载baseUrl
打包同样 前缀是baseUrlvue.config.js
将dist文件夹下的东西提交到gh-pages指令1git subtree push --prefix dist origin gh-pages效果
部署
microapp微前端实践
前言基于 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函数编写组件
前言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 ...
docker学习笔记
前置知识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 ...
npm发布前端工具库
前言白浪费了那么多有用的代码.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", ...