前端开发

前端开发

Vue Router 完全指南

Vue Router 4 是 Vue 3 的官方路由库,与 Vue 3 的 Composition API 深度集成。 createWebHistory 可传入 base 参数,例如 createWebHistory('/app/'),适合应用部署在子路径下。 子路由的 path 不需要以 / 开头,父组件模板中必须包含 <RouterView>。 通过 TypeScript 模块扩充声明,为 meta 添加类型约束: router.push() 参数与 <RouterLink to=""> 完全一致,均接受 RouteLocationRaw: 当路由从

By yellowdog

前端开发

PrimeVue 完全指南

PrimeVue 是 PrimeTek 出品的 Vue 3 UI 组件库,提供 90+ 开箱即用的组件。v4 在 v3 基础上进行了重大架构调整:以 CSS 变量和设计令牌体系替代了 SASS 主题,并引入了 PassThrough(PT)API 实现完全无样式模式。 PrimeVue v4 提供三种开箱即用的主题预设: CSS 变量命名规则:--p-{组件}-{属性},如 --p-button-background。 在 main.ts 中引用: PassThrough API 允许将自定义属性、类名、样式注入到组件内部任意 DOM 节点,无需覆盖 C

By yellowdog

前端开发

Pinia 完全指南

相关文档:Vue3入门(/vue-3-ru-men-zhi-nan/) TanStack Query 完全指南(/tanstack-query-wan-quan-zhi-nan/) Axios完全指南(/axios-wan-quan-zhi-nan/) Pinia 是 Vue 官方推荐的状态管理库,是 Vuex 的继任者。 Pinia 支持两种风格:选项式(类 Vuex)和 Setup(推荐)。 每个 Store 只管理一类数据,不要创建一个大而全的 Store: 用 TanStack Query 管理服务端数据(自动缓存、失效),Store 只管理真正

By yellowdog

前端开发

Nuxt 3 完全指南

Nuxt 3 是基于 Vue 3 的全栈框架,内置 SSR、SSG、文件路由、自动导入等能力。底层使用 Nitro 服务器引擎和 Vite 构建工具。 在 nuxt.config.ts 中配置渲染模式: pages/ 目录下的 .vue 文件自动生成路由,规则如下: 动态路由示例: 捕获所有路由(...slug.vue): 在页面中指定布局: <NuxtLink> 是对 Vue Router <RouterLink> 的封装,增加了预取等能力。 useFetch 是 Nuxt 对 $fetch 的封装,自动处理 SSR 去重、响应式和 TypeScrip

By yellowdog

前端开发

Vite 初级指南

Vite 是一个现代前端构建工具,由 Vue 作者尤雨溪创建。它的核心设计目标是解决传统打包工具(如 Webpack)在大型项目中开发体验缓慢的问题。 Webpack 的工作方式是在启动开发服务器前,先把所有模块打包成 bundle,然后再提供服务。随着项目规模增大,这个打包过程会越来越慢,冷启动时间可能长达数十秒甚至数分钟。 Vite 采用了完全不同的策略: Vite 在不同阶段使用不同策略: 这种分离设计保证了开发体验极速,同时生产产物质量有保障。 Vite 5+ 要求 Node.js 版本: 建议使用 LTS 版本。可用 node -v 检查当前版

By yellowdog

前端开发

Vite 中级指南

本文覆盖 Vite 中级配置与使用模式,包括完整的配置项参考、多页面应用、库模式、环境变量进阶等内容。适合已掌握 Vite 基础的开发者。 需要加入 include 的场景: 1. 动态 import() 引入的 CommonJS 包(Vite 静态扫描时发现不了) 2. monorepo 中的本地包(链接包不走预构建,但其依赖可能是 CJS) 3. 某些通过插件间接引入的依赖 需要加入 exclude 的场景: 1. 已是纯 ESM 的包且体积小,无需合并 2. 包含 native 模块,esbuild 无法处理 3. 包含副作用,不适合被 esbui

By yellowdog

前端开发

TanStack Table / Form / Virtual 完全指南

最后更新:2026-03-29 TanStack Table 是一个无头(Headless)表格库,只提供逻辑和状态管理,不提供任何 UI 样式,完全由开发者控制渲染。支持 React、Vue、Solid、Svelte。 无头的含义:Table 的核心是一个状态管理器,你传入数据和列定义,它返回处理好的行、列、单元格数据和操作方法,具体如何渲染成 HTML 完全自定义。 TanStack Form 是一个无头、类型安全的表单状态管理库,支持同步/异步验证,支持 React、Vue、Solid 等。 与 React Hook Form 对比: TanSta

By yellowdog

前端开发

TanStack Query 完全指南

最后更新:2026-03-29 TanStack Query(前身 React Query)是前端异步状态管理库,专门解决服务端数据的获取、缓存、同步和更新问题。支持 React、Vue、Solid、Svelte、Angular。 核心能力: 用 queryKey 工厂函数统一管理缓存键:分散的字符串数组难以追踪和重构,集中定义键工厂: Mutation 后立即 invalidate 相关查询:写操作成功后调用 invalidateQueries,让相关缓存自动重新请求,保持数据一致性: staleTime 与 gcTime 按业务特点调整:静态配置数据

By yellowdog