app.vue
<script setup lang="ts">
const version = 3
</script>
<template>
<h1>
Hello Nuxt {{ version }}!
</h1>
</template>
<style scoped>
h1 {
font-size: 3rem;
}
</style>
pages/index.vue
<template>
<h1>Index page</h1>
<NuxtLink to="/blog/hello-world">
Go to blog post
</NuxtLink>
</template>
pages/index.vue
<script setup lang="ts">
const { data } = await useFetch('/api/cms/home')
</script>
<template>
<h1>{{ page.title }}</h1>
<NuxtLink to="/blog/hello-world">
Go to blog post
</NuxtLink>
</template>
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'
}
})
全球领先企业共同选择
随着您的成长启用功能
Nuxt 随着您的需求增长和适应，同时提供卓越的开发者体验。从简单的登录页面到适合数百名开发者团队的复杂 web 应用程序，您可以构建任何东西。我们设计 Nuxt 使其对所有技能水平的开发者都易于接近。
- 零配置立即开始使用 Vue 或 TypeScript 编码 —— Nuxt 为您处理所有设置。
- 渲染模式服务端渲染、客户端渲染、静态网站生成，任您选择，甚至可以精确到页面级别。
- 路由与布局使用基于文件的路由系统构建复杂的基于 URL 的视图，同时复用组件以提升性能。
- 数据获取让您的 Vue 组件支持异步操作并等待数据。Nuxt 提供强大的组合函数用于通用数据获取。
- 错误处理使用内置的错误处理程序和自定义错误页面捕获应用程序中的错误。
- 过渡效果在布局、页面和组件之间实现平滑过渡效果。
- 资源与样式通过内置支持，实现图像、字体和脚本的自动优化。
- SEO 与元标签创建能够被搜索引擎完全索引的生产级应用程序。
- 模块化通过 200+ 个模块扩展 Nuxt 功能，加快应用程序交付速度。
- 中间件在页面渲染之前保护或添加自定义逻辑（本地化、A/B 测试）。
- TypeScript 类型安全使用自动生成的类型和 tsconfig.json 编写类型安全的代码。
- 深入了解 Nuxt
构建在坚实的基础之上
Nuxt 构建在坚如磐石的开源技术之上，具备在不同构建工具之间进行选择的多样性。
使用 Vue.js 构建前端
Nuxt 基于 Vue.js 构建，利用其响应式、基于组件的架构，创建功能强大、可扩展且无缝的 web 应用程序。
使用 Vite 进行打包
Nuxt 利用 Vite 的前端构建能力，通过即时 HMR 提供最佳开发体验，支持快速开发 web 应用程序。
使用 Nitro 作为服务器
Nuxt 使用 Nitro 作为服务器引擎，构建多功能全栈 web 应用程序，随时准备部署到任何平台。
性能优化
通过专家优化，提升 Nuxt 可靠性。
迁移到 Nuxt
从起步到部署，确保顺利无痛的迁移。
Nuxt 研讨会
通过培训和支持，培养专家团队。
由全球开发者构建
Nuxt 及其生态系统的开发由国际团队领导。从贡献者到开发者宣传员，社区成员拥有不同的背景和技能。我们每天都欢迎新成员，并鼓励任何人以多种方式加入我们：解答问题、演讲、创建模块和贡献核心代码。
