Vue Academy · 课时

为 2025 及以后选择合适的 Vue 技术栈

比较 Vue + Vite + Pinia + Nuxt 与 SPA、TypeScript 的采用，以及 Vue 的测试金字塔

为 2025 及以后选择合适的 Vue 技术栈 是 CoddyKit 上的免费 Vue Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

不存在唯一正确的技术栈

合适的 Vue 技术栈取决于应用的需求：搜索引擎优化、交互性、部署目标和团队规模。本课将常见需求与推荐技术栈对应起来，帮助您有意识地做出选择，而不是凭习惯决定。

经典 SPA 技术栈

对于类似应用、需要登录后使用且不重视搜索引擎优化的仪表盘，客户端渲染的 SPA 很理想：Vite + Vue + Pinia + Vue Router。开发速度快、托管简单（任何静态托管服务均可），并且具备完整的客户端交互能力。

// SPA building blocks
// vite          -> dev server + build
// vue           -> UI
// pinia         -> state management
// vue-router    -> client routing

SPA 何时不够用

SPA 会先发送一个空壳，然后在浏览器中进行渲染。对于公开内容网站，这会损害搜索引擎优化和首次内容绘制。如果搜索排名和社交媒体预览很重要，您就需要服务端渲染。

用于 SSR 和搜索引擎优化的 Nuxt 3

Nuxt 3 是一个开箱即用的元框架：提供服务端渲染、基于文件的路由、自动导入、服务端路由（Nitro）以及搜索引擎优化辅助工具。营销网站、博客和电子商务网站等任何需要可抓取 HTML 的项目都可以选择它。

// Nuxt page with SEO meta
<script setup>
useSeoMeta({
  title: 'Product Page',
  description: 'Best widget around'
})
</script>

Nuxt 静态生成

对于很少变化的内容，nuxt generate 会在构建时将页面预渲染为静态 HTML（SSG）。这样既能获得搜索引擎优化效果和即时加载，又无需运行中的服务器，还可以部署到任意 CDN。

# pre-render to static HTML
npx nuxi generate
# output in .output/public, deploy to a CDN

渲染模式速查表

请根据内容匹配模式：

SPA——私有应用、仪表盘
SSR (Nuxt)——需要搜索引擎优化的动态公开页面
SSG (nuxt generate)——大部分为静态内容的页面（文档、博客）
混合——Nuxt 路由规则按路由混合使用 SSR/SSG/ISR

// nuxt.config: per-route rendering rules
routeRules: {
  '/': { prerender: true },
  '/admin/**': { ssr: false },
  '/news/**': { swr: 60 }
}

全面使用 TypeScript

在 2025 年，推荐将 TypeScript 作为整个技术栈的默认选择——用于组件、存储、组合式函数和服务端路由。<script setup lang="ts"> 加上带类型的属性、事件和模型，可以在编译时发现错误，并提供出色的编辑器支持。

<script setup lang="ts">
const props = defineProps<{ id: number; title: string }>()
const emit = defineEmits<{ save: [id: number] }>()
</script>

状态：默认使用 Pinia

Pinia 是官方状态库——支持类型、开发者工具友好且可组合。对于服务端数据的获取与缓存，可以将它与 Nuxt 的 useFetch/useAsyncData 或 TanStack Query 等库搭配使用。

import { defineStore } from 'pinia'

export const useCart = defineStore('cart', () => {
  const items = ref([])
  const total = computed(() => items.value.length)
  return { items, total }
})

测试金字塔

平衡的测试策略遵循金字塔结构：大量快速的单元测试、较少的组件测试，以及一小组端到端测试。推荐的工具包括：Vitest（单元测试）、Vue Test Utils（组件测试）和Playwright（端到端测试）。

Vitest + Vue Test Utils

Vitest 可以快速运行单元测试和组件测试（共享 Vite 配置）。Vue Test Utils 会挂载组件，以断言渲染输出和交互行为。

import { mount } from '@vue/test-utils'
import { test, expect } from 'vitest'
import Counter from './Counter.vue'

test('increments', async () => {
  const w = mount(Counter)
  await w.find('button').trigger('click')
  expect(w.text()).toContain('1')
})

使用 Playwright 进行端到端测试

Playwright 会驱动真实浏览器，在运行中的应用上测试完整的用户流程——登录、导航和表单。此类测试应保持数量较少但价值较高，覆盖关键路径。

import { test, expect } from '@playwright/test'

test('user logs in', async ({ page }) => {
  await page.goto('/login')
  await page.fill('#email', 'a@b.com')
  await page.click('button[type=submit]')
  await expect(page).toHaveURL('/dashboard')
})

快速检查

请测试您对如何选择 Vue 技术栈的理解。

回顾

您已经了解了如何为 2025 年选择 Vue 技术栈：

对于私有应用，使用 SPA（Vite + Vue + Pinia + Router）
使用 Nuxt 3 实现 SSR 和搜索引擎优化；使用 nuxt generate 构建静态网站
推荐将全面使用 TypeScript 作为默认选择
使用 Pinia 管理状态
测试金字塔：Vitest + Vue Test Utils + Playwright

常见问题解答

「为 2025 及以后选择合适的 Vue 技术栈」课时是免费的吗？

是的 — 「为 2025 及以后选择合适的 Vue 技术栈」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「为 2025 及以后选择合适的 Vue 技术栈」这节课中我会学到什么？

比较 Vue + Vite + Pinia + Nuxt 与 SPA、TypeScript 的采用，以及 Vue 的测试金字塔你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「为 2025 及以后选择合适的 Vue 技术栈」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy