← 返回博客
前端开发

Nuxt3 入门指南

从零开始学习 Nuxt3 框架,掌握 Vue3 全栈开发

爱圈子 2025年1月15日 8 分钟阅读

Nuxt3 入门指南

Nuxt3 是基于 Vue3 的全栈框架,提供了开箱即用的功能。

为什么选择 Nuxt3?

1. 服务端渲染 (SSR)

Nuxt3 支持服务端渲染,对 SEO 非常友好:

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true
})

2. 自动导入

Nuxt3 支持自动导入组件和组合式函数:

<template>
  <div>
    <!-- 不需要手动 import -->
    <MyComponent />
  </div>
</template>

3. 文件路由

基于文件系统自动生成路由:

pages/
  index.vue      -> /
  blog/
    index.vue    -> /blog
    [slug].vue   -> /blog/:slug

快速开始

创建项目

npx nuxi@latest init my-app
cd my-app
npm install
npm run dev

项目结构

├── pages/          # 页面路由
├── components/     # 组件
├── composables/    # 组合式函数
├── layouts/        # 布局
├── server/         # 服务端API
└── public/         # 静态资源

总结

Nuxt3 是现代 Vue 全栈开发的最佳选择,特别适合需要 SEO 的内容网站。

相关文章