通过 100 多个技巧学习 Nuxt!

直观的
Vue 框架

Nuxt 是一个 开源框架 ,它使 Web 开发直观而强大。
自信地创建高性能、生产级的全栈 Web 应用程序和网站。
开始使用

深受顶尖前端团队的信赖

强大的
Vue 组件

我们像您一样热爱 Vue 单文件组件。Nuxt 简单、直观且强大,让您以有意义的方式编写 Vue 组件。每个重复性任务都自动化,因此您可以专注于自信地编写全栈 Vue 应用程序。
app.vue
<script setup>
useSeoMeta({
  title: 'Meet Nuxt',
  description: 'The Intuitive Vue Framework.'
})
</script>

<template>
  <div id="app">
    <AppHeader />
    <NuxtPage />
    <AppFooter />
  </div>
</template>

<style>
#app {
  background-color: #020420;
  color: #00DC82;
}
</style>

静态或动态,
由您选择

在路由级别决定您需要的渲染策略。通过利用混合渲染,您可以获得两全其美的效果:静态站点的性能和动态站点的交互性。
<script setup>
// Pre-render the homepage at build time
defineRouteRules({
  prerender: true
})
</script>

<template>
  <div>
    <h1>Homepage</h1>
    <p>Pre-rendered at build time</p>
  </div>
</template>

使用
您需要的一切进行组合。

路由 & 布局

基于文件的路由系统,以强大而传统的方式构建复杂的视图和界面。

数据获取

在服务器上运行的可组合项,用于获取组件的数据,并使您能够以不同的方式渲染内容。

资产 & 样式

图像、字体和脚本优化,内置对 CSS 模块、Sass、PostCSS、CSS-in-JS 等的支持。

SEO & 元标记

生产就绪,可被搜索引擎索引,同时为最终用户提供应用程序的感觉。

中间件

在渲染页面或一组页面之前运行自定义代码,例如身份验证、本地化或 A/B 测试。

状态管理

Nuxt 提供了一种在组件之间共享响应式和 SSR 友好的状态的简单方法。

过渡效果

通过内置对 Vue 和浏览器过渡的支持,在布局、页面和组件之间创建平滑的过渡效果。

错误处理

内置的错误处理和日志记录功能,可帮助您调试应用程序并提供更好的用户体验。

图层

使用另一个 Nuxt 应用程序扩展您的 Nuxt 应用程序,以重用组件、可组合项、布局、页面等。

服务器路由

创建 API 端点和服务器路由,以安全地连接第三方服务并从您的前端消费。

自动导入

Nuxt 自动导入帮助程序、可组合项和 Vue API,以便在您的应用程序中使用,而无需显式导入它们。

TypeScript

Nuxt 提供有用的快捷方式,以确保您在编码时可以访问准确的类型信息。

使用
无限集成更快地交付

与您喜欢的工具和服务集成。Nuxt 的构建具有灵活性,可以通过强大的模块生态系统进行扩展。只需一行代码即可将您的应用程序与流行的无头 CMS、电子商务、数据库或 UI/UX 库连接起来。
NetlifyNuxtHubVercelHerokuCloudflareAmplifyDigitalOceanTailwind CSSSupabaseStripeFirebaseStrapiWordPressDirectusStoryblokSanitySentryShopifyMeilisearchAlgolia

由全球
开发人员构建。

Nuxt 及其生态系统的开发由一个国际团队领导。从贡献者到开发者倡导者,该社区由具有不同视野和技能的成员组成。我们很高兴每天看到新成员,并鼓励任何人加入我们,并通过多种方式提供帮助:回答问题、发表演讲、创建模块并为核心做出贡献。

深受
万维网的信赖。

Nuxt 提供了一个引人注目的解决方案和一个强大的生态系统,可帮助您交付高性能且对 SEO 友好的全栈 Vue 应用程序。在 SSR 和 SSG 之间进行选择的灵活性更是锦上添花。
Evan You

Evan You

Vue.js 和 Vite 的创建者

Nuxt 是团队在 Web 上构建生产级产品的绝佳选择。它旨在融入性能最佳实践,同时保持出色的 Vue.js DX。
Addy Osmani

Addy Osmani

Chrome 首席工程师

对于开发者和框架作者而言,Nuxt 一直是创新和灵感的不可思议的来源。看到它在 Web 上各种规模的 Web 项目中的发展真是太棒了。
Guillermo Rauch

Guillermo Rauch

Vercel 的联合创始人兼首席执行官

Nuxt 具有出色的开发者生产力、体验和开箱即用的性能!它非常注重细节,确保团队拥有触手可及的一切,以便高效地构建各种应用程序。
Sarah Drasner

Sarah Drasner

Google 工程总监

Nuxt 采用独特的方法,将出色的开发者体验与可重用、完全集成的功能相结合,从而加快您的下一个网站或应用程序的开发和性能。
Dominik Angerer

Dominik Angerer

Storyblok 联合创始人

我第一次使用 Nuxt 就爱上了它。除了其可扩展性、性能和开发者体验之外,它背后的团队也非常出色。感谢开发如此出色的框架,让我们的生活更加轻松!
Savas Vedova

Savas Vedova

GitLab 高级前端工程师

Nuxt 将高性能和专注的开发者体验融合在一起,改变了游戏规则。它的 SSR 和 SSG 灵活性,加上与 Vue.js 生态系统一样充满活力的社区,使其成为现代 Web 项目的绝佳选择。
Rijk van Zanten

Rijk van Zanten

Directus 首席技术官