基于 Vue.js 的
全栈 Web 应用框架
使用 Vue 快速构建可用于生产环境的 Web 应用。基于文件的路由、自动导入和服务器端渲染，所有功能均已开箱即用。
app/app.vue
<script setup lang="ts">
const version = 4
</script>
<template>
<h1>
Hello Nuxt {{ version }}!
</h1>
</template>
<style scoped>
h1 {
font-size: 3rem;
}
</style>
app/pages/index.vue
<template>
<h1>Index page</h1>
<NuxtLink to="/blog/hello-world">
Go to blog post
</NuxtLink>
</template>
app/pages/index.vue
<script setup lang="ts">
const { data: page } = await useFetch('/api/cms/home')
</script>
<template>
<h1>{{ page.title }}</h1>
<NuxtLink to="/blog/hello-world">
Go to blog post
</NuxtLink>
</template>
app/app.vue
<script setup>
const message = ref('Nuxt')
const hello = () => sayHello(message.value)
</script>
<template>
<main>
<h1>Demo with auto imports</h1>
<form @submit.prevent="hello">
<MyInput v-model="message" />
<button type="submit">Say Hello</button>
</form>
</main>
</template>
server/api/hello.ts
export default defineEventHandler((event) => {
return {
message: 'Hello World'
}
})
全球领先企业共同选择
Everything you need, nothing you don't
Nuxt handles the architecture so you can focus on building.
- 零配置立即开始使用 Vue 或 TypeScript 编码 —— Nuxt 为您处理所有设置。
- 渲染模式服务端渲染、客户端渲染、静态网站生成，任您选择，甚至可以精确到页面级别。
- 路由与布局使用基于文件的路由系统构建复杂的基于 URL 的视图，同时复用组件以提升性能。
- 数据获取让您的 Vue 组件支持异步操作并等待数据。Nuxt 提供强大的组合函数用于通用数据获取。
- 错误处理使用内置的错误处理程序和自定义错误页面捕获应用程序中的错误。
- 过渡效果在布局、页面和组件之间实现平滑过渡效果。
- 资源与样式通过内置支持，实现图像、字体和脚本的自动优化。
- SEO 与元标签创建能够被搜索引擎完全索引的生产级应用程序。
- 模块化通过 200+ 个模块扩展 Nuxt 功能，加快应用程序交付速度。
- 中间件在页面渲染之前保护或添加自定义逻辑（本地化、A/B 测试）。
- TypeScript 类型安全使用自动生成的类型和 tsconfig.json 编写类型安全的代码。
- 深入了解 Nuxt
基于成熟的工具
前端使用 Vue，服务器端使用 Nitro。您可以自由选择打包工具。
使用 Vue.js 构建前端
Nuxt 基于 Vue.js 构建，利用其响应式、基于组件的架构，创建功能强大、可扩展且无缝的 web 应用程序。
使用 Vite 进行打包
Nuxt 利用 Vite 的前端构建能力，通过即时 HMR 提供最佳开发体验，支持快速开发 web 应用程序。
使用 Nitro 作为服务器
Nuxt 使用 Nitro 作为服务器引擎，构建多功能全栈 web 应用程序，随时准备部署到任何平台。
受到全球开发者的信赖
为初创企业到大型企业提供动力。100%开源。
使用插件和模块扩展 Nuxt
Nuxt 拥有丰富的模块生态系统，包括官方和社区驱动的模块。这通过提供现成的解决方案来加速开发，以满足常见需求。
部署到任何地方
一键部署。无论是 SSR、静态还是边缘，Nuxt 都能适应您的平台。
由全球开发者共同构建
数百名贡献者每天都在让 Nuxt 变得更好。加入我们吧。
Showcase
