Vite 框架集成：React、Vue、Svelte、Solid 与官方插件生态
系统覆盖 Vite 与主流前端框架的集成：@vitejs/plugin-vue、plugin-react、Svelte/Solid 插件、框架预设（create-vite 模板）、JSX 转换、框架 HMR、选择框架插件的要点。
tag
Vue
共 32 篇文章。
前端安全进阶：XSS、CSP、SRI 与供应链安全
系统性前端安全深度指南：XSS 全分类（Reflected/Stored/DOM-based/mXSS）与防御矩阵（转义/CSP/DOMPurify/Trusted Types）、CSP（Content Security Policy）策略设计与部署、SRI（Subresource Integrity）校验、CSRF Token 与 SameSite Cookie、前端加密与密钥管理、npm 供应链安全（package-lock/audit/SBOM/openSSF Scorecard）、原型污染防御、eval/new Function 沙箱替代方案、浏览器安全头全览。附 Vue/React/Next.js 安全配置。
Web 可访问性（a11y）：合规标准、技术实现与用户体验
系统性 Web 可访问性指南：WCAG 2.1/2.2 标准解读（感知性/可操作性/可理解性/健壮性四大原则）、语义化 HTML 与 ARIA 正确使用、键盘导航与焦点管理、屏幕阅读器兼容（NVDA/JAWS/VoiceOver）、色彩对比度与色觉障碍、减少动态内容（prefers-reduced-motion）、表单可访问性、可访问性测试工具（axe-Core/Lighthouse/pa11y）、法律合规（ADA/EN 301 549/中国无障碍环境建设法）。附 Vue/React 实战代码。
PWA 与 Service Worker：离线化、缓存策略与服务扩展
系统性 PWA 实战指南：Service Worker 注册与生命周期（install/activate/fetch）、缓存策略（Cache-First/Network-First/Stale-While-Revalidate/Cache-Only/Network-Only）、Workbox 自动化缓存、Background Sync、Push 通知、Web App Manifest、Add to Home Screen（A2HS）、Service Worker 更新机制与版本控制、PWA 与 SPA/SSR 结合。附 Vue/React/Next.js 完整配置。
前端状态管理全景对比与选型指南
系统性对比前端状态管理方案：Flux/Redux（RTK）、Zustand、Jotai、Recoil、Valtio、Pinia、Vuex、TanStack Query / SWR（服务端状态）、Context API、URL State、Local Storage State。按状态类型分类（服务端/客户端全局/本地/UI），给出选型决策树、性能对比、跨框架方案与实战代码。覆盖 Vue3 + React 生态。
Web 性能指标全解析：Core Web Vitals 与真实用户监控（RUM）
系统性解读 Web 性能指标体系：Core Web Vitals（LCP、INP、CLS）的测量原理、优化阈值与实战方案；TTFB/FCP/FID/TBT 等辅助指标；真实用户监控（RUM）与实验室测试（Lighthouse）的结合；Web Vitals JS API、Chrome UX Report（CrUX）、PerformanceObserver、Resource Timing；Vue/React 性能监控 SDK 接入。
TypeScript 工程化实战：从类型体操到架构安全
系统性 TypeScript 工程化指南：tsconfig 严格模式配置、高级类型体操（条件类型、映射类型、模板字面量、infer）、类型守卫与 Narrowing、泛型约束与协变逆变、类型安全边界（noUncheckedIndexedAccess、exactOptionalPropertyTypes）、monorepo 类型共享、API 类型自动同步（OpenAPI → TS）、品牌类型（Branded Types）与名义类型系统。附 Vue/React/Node.js 实战配置。
CSS 工程化体系：Tailwind 原子化到设计令牌系统
系统梳理现代 CSS 工程化方案：Tailwind CSS 原子化设计哲学与原理、JIT 编译器、主题定制与插件开发；CSS 设计令牌（Design Tokens）、PostCSS 插件链、CSS-in-JS 对比（Styled Components vs Linaria）、CSS Modules 与 Scoped CSS、CSS 架构方法论（BEM/ACSS/Utility-first）。附 Vue、React、Next.js 实战配置。
前端工程化全景：从代码规范到 CI/CD 流水线
全面梳理企业级前端工程化体系：Monorepo 与 Polyrepo 选型、包管理策略（npm/yarn/pnpm/bun）、代码规范工具链（ESLint/Prettier/Husky/lint-staged）、Git 工作流（Git Flow/GitHub Flow/trunk-based）、标准化 CI/CD 流水线（GitHub Actions/GitLab CI）、Docker 化部署与环境管理。附 Vue/React 项目实战模板。
专题三：前端工程化与性能优化
前端工程化是保障大型项目可维护性与团队协作效率的系统性方法论。本专题从工程化体系出发，系统覆盖代码规范与 ESLint/Prettier 配置、Monorepo 架构与 pnpm workspace、Vite/Webpack/esbuild 构建工具深度解析、CI/CD 自动化流水线、Web 性能全栈优化（Core Web Vitals、RUM 真实用户监控、资源加载策略、图片/字体/代码分割优化）、浏览器缓存与 CDN 配置、Web 安全（CSP/CORS/XSS 防护）、前端测试（单元测试/E2E/视觉回归）、可访问性 a11y 与 PWA 渐进式 Web 应用，以及 Vue/React/Next.js/Astro 等框架的工程化最佳实践，打造企业级前端交付能力。
Vue 性能优化指南：虚拟列表、懒加载、渲染优化与 Core Web Vitals
Vue 3 应用性能优化完整策略：虚拟滚动（vue-virtual-scroller）、组件懒加载与异步组件、KeepAlive 缓存、Suspense 异步优化、v-memo 渲染记忆化、响应式性能（shallowRef/toRaw）、Bundle 分析与代码分割、虚拟 DOM 优化、编译时优化、网络优化、性能分析工具、大规模应用架构、以及 Core Web Vitals（LCP/INP/CLS）调优。
Nuxt.js 完全指南：Vue 全栈框架的 SSR、SSG、API 路由与部署实践
Nuxt.js 3 深度实践：文件系统路由、SSR/SSG/ISR 渲染模式、API 路由（Server Routes）、useFetch/useAsyncData 数据获取、中间件与插件、SEO 与 Meta 管理、Nitro 服务端引擎、自动导入、部署到 Vercel/Netlify/Node.js。
Vue 测试深度指南：Vitest + Vue Test Utils + Playwright E2E 与 CI 集成
Vue 3 应用从单元测试到 E2E 的完整测试策略：Vitest + Vue Test Utils 组件测试（mount/emits/slots/async）、Pinia Store Mocking、MSW API 拦截、Playwright 端到端测试、Cypress 组件测试、覆盖率标准与 GitHub Actions CI 集成。
Vue + TypeScript 深度实战：组件类型、Props 泛型、Pinia 类型安全与 API 契约
Vue 3 与 TypeScript 结合的生产级实践：组件 Props 类型标注、defineProps 泛型、 emits 类型、ref/reactive 类型推断、computed 类型、Pinia Store 类型、Vue Router 类型安全、Zod API 数据契约、以及 strict tsconfig 配置。
Pinia 状态管理完全指南：Store 设计、持久化、SSR 兼容与生产级实践
Pinia 是 Vue 官方推荐的状态管理库，作为 Vuex 的继任者。本文完整覆盖：Pinia vs Vuex 对比、Store 定义与组织、State/Getter/Action 模式、插件系统、持久化方案、SSR 兼容性、Devtools 调试，以及与 Vue Router 的组合使用。
Vue Router 完全指南：v4 路由模式、导航守卫、动态路由、懒加载与生产实践
Vue Router 4 深度实践：声明式路由与 Hash/History 模式、嵌套路由、动态路由匹配、导航守卫（全局/路由独享/组件内）、路由元信息、滚动行为、懒加载与代码分割、以及与 Vue 3 Composition API 的结合使用。
Vue Composition API 完全指南：setup、ref、reactive、computed、watch、生命周期与自定义 Composable
Vue 3 Composition API 深度实践：setup 语法糖、ref/reactive 响应式原理、computed 计算属性、watch/watchEffect 侦听器、生命周期钩子、provide/inject 依赖注入、defineProps/defineEmits 组件通信，以及自定义 Composable 的开发与复用模式。
Vue 详解：渐进式框架的核心概念与响应式系统
Vue.js 是渐进式 JavaScript 框架，以声明式渲染、响应式系统和组件化架构著称。本文系统讲解 Vue 3 的核心概念：Options API vs Composition API、响应式原理（Proxy + ref/reactive）、模板语法、计算属性与侦听器、生命周期、Teleport/Suspense、以及 Vue 与 React/Angular 的对比选型。
React vs Vue vs Svelte vs Solid（2025）：四大前端框架选型决策指南
深度对比 2025 年前端四大主流框架：React、Vue、Svelte、Solid。从架构范式、运行时性能、编译时优化、学习曲线、生态规模、就业市场等 12 个维度逐项评分，按 8 个典型场景给出选型建议和混合使用策略。
Vercel 部署 Nuxt.js (Vue) 实战：SSR / SSG / Nitro 全栈上云指南
详细讲解如何在 Vercel 上部署 Nuxt.js + Vue 3 项目：SSR 与 SSG 模式选择、Nitro Server 路由配置、环境变量、Vercel Functions 适配、图片与缓存优化。附完整代码和部署验证命令。