nuxt概述

nuxt.js是一个基于vue的框架，服务器端渲染（SSR），适合需要 SEO、首屏加载优化的场景（如企业官网、博客、电商平台等）。

nuxt2文档:https://v2.nuxt.com/

nuxt3项目

创建命令

bash

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

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

nuxt3目录结构

plaintext

my-nuxt3-app/
  ├─ pages/          # 路由页面（自动生成路由）
  ├─ components/     # 自动导入组件
  ├─ layouts/        # 布局文件
  ├─ nuxt.config.ts  # 配置文件（TypeScript 支持）
  └─ app.vue         # 应用入口

my-nuxt3-app/
  ├─ pages/          # 路由页面（自动生成路由）
  ├─ components/     # 自动导入组件
  ├─ layouts/        # 布局文件
  ├─ nuxt.config.ts  # 配置文件（TypeScript 支持）
  └─ app.vue         # 应用入口

核心配置在 nuxt.config.js，路由基于 pages 目录，组件需手动注册或通过 plugins 全局引入。

nuxt2项目

bash

npx create-nuxt-app my-nuxt2-app
cd my-nuxt2-app
npm run dev

npx create-nuxt-app my-nuxt2-app
cd my-nuxt2-app
npm run dev

Nuxt 2：稳定成熟，适合维护 Vue 2 项目或对模块生态依赖强的场景。

Nuxt 3：未来主流，基于 Vue 3 和 Vite，性能与开发体验全面升级，推荐新项目使用。

约定式路由

通过 pages 目录结构自动生成路由，无需手动配置 router.js。

plaintext

pages/
  index.vue         → 路由 /
  about.vue         → 路由 /about
  users/[id].vue    → 路由 /users/:id

pages/
  index.vue         → 路由 /
  about.vue         → 路由 /about
  users/[id].vue    → 路由 /users/:id

自动导入

components/ 目录下的组件无需手动注册，可直接使用。

服务器端渲染（SSR）

页面在服务器端渲染后返回给客户端，提升 SEO 和首屏加载速度。

适用于内容型网站（如博客、新闻站点）。

适用场景

需要 SEO 的网站：SSR/SSG 让搜索引擎更好地抓取内容。

多页面应用：约定式路由和布局系统简化页面管理。

快速原型开发：无需复杂配置，专注业务逻辑。

静态站点或博客：利用 SSG 生成高性能静态页面。

nuxt概述 ​

nuxt3项目 ​

nuxt2项目 ​

约定式路由 ​

自动导入 ​