全栈
Vue框架
使用Vue构建快速、生产级的Web应用。基于文件的路由、自动导入和服务器端渲染——开箱即用。
app/app.vue
<script setup lang="ts">
const version = 4
</script>
<template>
<h1>
你好 Nuxt {{ version }}!
</h1>
</template>
<style scoped>
h1 {
font-size: 3rem;
}
</style>
app/pages/index.vue
<template>
<h1>首页</h1>
<NuxtLink to="/blog/hello-world">
前往博客文章
</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">
前往博客文章
</NuxtLink>
</template>
app/app.vue
<script setup>
const message = ref('Nuxt')
const hello = () => sayHello(message.value)
</script>
<template>
<main>
<h1>自动导入演示</h1>
<form @submit.prevent="hello">
<MyInput v-model="message" />
<button type="submit">说你好</button>
</form>
</main>
</template>
server/api/hello.ts
export default defineEventHandler((event) => {
return {
message: '你好世界'
}
})
被全球领先企业选择
你需要的一切，没有多余的
Nuxt 处理架构，让你专注于开发。
- 零配置立即使用 Vue 或 TypeScript 开始编码——Nuxt 为你处理所有配置。
- 渲染模式服务器端渲染、客户端渲染、静态站点生成，由你决定，直至页面级别。
- 路由与布局使用基于文件的路由系统构建复杂的基于 URL 的视图，同时复用组件以提高性能。
- 数据获取让你的 Vue 组件异步并等待数据。Nuxt 提供强大的组合式函数用于通用数据获取。
- 错误处理使用内置处理程序和自定义错误页面捕获应用程序中的错误。
- 过渡动画在布局、页面和组件之间实现平滑过渡。
- 资源与样式受益于内置支持的自动图像、字体和脚本优化。
- SEO 与 Meta 标签创建搜索引擎可完全索引的生产级应用程序。
- 模块化通过 200+ 个模块扩展 Nuxt 功能，加速应用程序交付。
- 中间件在渲染页面之前保护或添加自定义逻辑（本地化、A/B 测试）。
- 使用 TypeScript 的类型安全使用自动生成的类型和 tsconfig.json 编写类型安全的代码。
- 立即深入了解 Nuxt
构建于经过验证的工具之上
前端使用 Vue，服务器使用 Nitro，打包器任你选择。
前端使用 Vue.js
Nuxt 构建于 Vue.js 之上，利用其响应式、基于组件的架构，创建强大、可扩展且无缝的 Web 应用程序。
使用 Vite 打包
Nuxt 利用 Vite 的前端构建能力，通过即时热更新赋能 Web 应用的快速开发，提供最佳开发者体验。
使用 Nitro 的服务器
Nuxt 使用 Nitro 作为服务器引擎，构建多功能的全栈 Web 应用程序，随时可部署到任何平台。
受全球开发者信赖
从初创公司到企业，100% 开源。
通过即插即用模块扩展 Nuxt
Nuxt 拥有丰富的模块生态系统，包括官方和社区驱动的模块。通过为常见需求提供即用解决方案，加速开发。
部署到任何地方
一条命令即可部署。SSR、静态或边缘——Nuxt 适应你的平台。
由全球开发者构建
数百名贡献者每天都在让 Nuxt 变得更好。加入我们。
展示
