通过 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>

组合使用
您所需的一切。

路由 & 布局

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

数据获取

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

资源 & 样式

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

SEO & Meta 标签

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

中间件

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

状态管理

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

过渡效果

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

错误处理

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

图层

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

服务器路由

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

自动导入

Nuxt 自动导入 helpers、composables 和 Vue API,以便在您的应用程序中使用,而无需显式导入它们。

TypeScript

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

通过以下方式更快地交付
无尽的集成

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

由开发者构建
遍布世界各地。

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

受到
万维网的信赖。

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

Evan You

Vue.js 和 Vite 的创建者

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

Addy Osmani

Chrome 首席工程师

对于开发者和框架作者而言,Nuxt 一直是创新和灵感的源泉。看到它在 Web 上各种规模的 Web 项目中的增长令人惊叹。
Guillermo Rauch

Guillermo Rauch

Vercel 的联合创始人兼 CEO

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 首席技术官