nuxt3项目搭建：一、初始化项目流程指南

一、初始化项目

初始化命令

1、创建nuxt3项目

npm create nuxt@latest

2、填写项目名称

这里我直接填了nuxt-app

3、选择包管理器

这里的包管理器我们选择pnpm

4、选择是否创建git仓库

选择完包管理器后，脚手架会自动下载依赖，git仓库我已经创建好了，这里我选择否，键盘直接输入n就能选择否

5、选择需要添加的模块

看自己项目情况选择添加的模块，按空格勾选/不勾选，按上下键选择模块

对应的中文意思如下：

您想安装任何官方模块吗？

@nuxt/content基于文件的CMS，支持Markdown、YML、JSON

@nuxt/eslint项目感知、易于使用、可扩展且面向未来的ESLint集成

@nuxt/fonts添加自定义网络字体，同时考虑性能

@nuxt/icon Nuxt的图标模块，包含200，000+个，准备使用来自Iconify的图标

@nuxt/Image添加具有渐进处理、懒惰加载、收件箱和提供商支持的图像

@nuxt/books添加第三方脚本而不牺牲性能

@nuxt/test-utils测试Nuxt实用程序

@nuxt/ui由Reka UI和Tailwind CSS支持的直观UI库

6、打开项目目录

选择完模块后，nuxt脚手架会自动下载对应依赖，等待下载完成后我们就可以进入项目目录启动项目了。

cd main
pnpm run dev

启动的时候报了错：

Cannot start nuxt: Could not locate the bindings file. #3097 无法启动 nuxt：找不到绑定文件。

issue解决方法：https://github.com/nuxt/content/issues/3097

运行 pnpm approve-builds，此命令会将 onlyBuiltDependencies 添加到 package.json 中，也可以手动添加：

"onlyBuiltDependencies": [
      "@parcel/watcher",
      "@sentry/cli",
      "better-sqlite3",
      "esbuild",
      "sharp"
    ]

调试 工具

1、开始调试工具

nuxt.config.ts

devtools: {enabled: true}