Nuxt

介绍

Nuxt 是一个免费的开源框架，具有直观且可扩展的方式，可创建类型安全，性能和生产级的全堆栈 Web 应用程序以及 vue.js 的网站。

特点

• Vue.js + Vite 开发环境
• TypeScript 支持
• SSR 渲染
• Nitro 服务器引擎
• 自动导入
• 模块系统

创建一个 Nuxt 项目

npm create nuxt <project-name>

提示

官方 CLI 工具：create-nuxt

目录结构

.nuxt/              # Nuxt 自动生成的目录，包含构建和开发时的临时文件，无需手动修改
.output/            # 生产构建时生成的目录，包含生产环境的输出文件
assets/             # 存放静态资源文件，如 CSS、图片、字体等，会被构建工具处理
components/         # 存放可复用的 Vue 组件，Nuxt 会自动导入这些组件
composables/        # 存放 Vue 组合式函数（hooks），顶级文件会被自动导入
content/            # 存放 .md、.yml、.csv 等文件，用于构建基于文件的内容管理系统（CMS）
layouts/            # 存放布局组件，用于定义页面的整体结构
middleware/         # 存放路由中间件，用于在导航到特定路由前执行逻辑
modules/            # 存放本地模块文件，会被自动注册
node_modules/       # 存放项目依赖，通常应添加到 .gitignore 中
pages/              # 存放页面组件，Nuxt 会根据文件结构自动生成路由
plugins/            # 存放插件文件，用于在应用启动前进行初始化
public/             # 存放静态文件，如 favicon.ico，不会被构建工具处理，直接打包到生产环境
server/             # 存放 API 和服务器处理程序文件
shared/             # 存放共享的工具函数或逻辑
utils/              # 存放全局工具函数，会自动导入
.env                # 用于定义环境变量
.gitignore          # 指定需要忽略的文件或目录
.nuxtignore         # 指定 Nuxt 构建时需要忽略的文件或目录
.nuxtrc             # Nuxt 运行时配置文件
app.vue             # 应用的主入口组件
app.config.ts       # 应用的配置文件
error.vue           # 自定义错误页面组件
nuxt.config.ts      # Nuxt 的主配置文件，用于配置应用的行为
package.json        # 项目的依赖和脚本配置文件
tsconfig.json       # TypeScript 的配置文件