附录：常用命令与工具汇总

1. Nuxt 常用命令（创建、启动、打包、生成、安装依赖）

项目创建：

# 使用 npx nuxi init 命令创建项目
npx nuxi init <project-name>

# 使用 npm create vite 命令创建项目
npm create vite@latest <project-name> -- --template nuxt

# 使用 pnpm create vite 命令创建项目
pnpm create vite <project-name> --template nuxt

# 使用 yarn create vite 命令创建项目
yarn create vite <project-name> --template nuxt

依赖管理：

# 安装依赖
npm install
# 或
pnpm install
# 或
yarn install

# 安装开发依赖
npm install --save-dev <package-name>
# 或
pnpm add --save-dev <package-name>
# 或
yarn add --dev <package-name>

# 安装生产依赖
npm install --save <package-name>
# 或
pnpm add <package-name>
# 或
yarn add <package-name>

# 卸载依赖
npm uninstall <package-name>
# 或
pnpm remove <package-name>
# 或
yarn remove <package-name>

开发服务器：

# 启动开发服务器
npm run dev
# 或
pnpm dev
# 或
yarn dev

# 启动开发服务器并指定端口
npm run dev -- --port 3001
# 或
pnpm dev --port 3001
# 或
yarn dev --port 3001

# 启动开发服务器并指定主机
npm run dev -- --host 0.0.0.0
# 或
pnpm dev --host 0.0.0.0
# 或
yarn dev --host 0.0.0.0

构建与部署：

# 构建项目
npm run build
# 或
pnpm build
# 或
yarn build

# 生成静态站点
npm run generate
# 或
pnpm generate
# 或
yarn generate

# 启动生产服务器
npm run start
# 或
pnpm start
# 或
yarn start

# 分析构建
npm run build -- --analyze
# 或
pnpm build --analyze
# 或
yarn build --analyze

其他命令：

# 运行类型检查
npm run typecheck
# 或
pnpm typecheck
# 或
yarn typecheck

# 运行 lint
npm run lint
# 或
pnpm lint
# 或
yarn lint

# 运行测试
npm run test
# 或
pnpm test
# 或
yarn test

2. VS Code 常用快捷键（提升开发效率）

编辑操作：

• Ctrl + C：复制
• Ctrl + X：剪切
• Ctrl + V：粘贴
• Ctrl + Z：撤销
• Ctrl + Y：重做
• Ctrl + A：全选
• Ctrl + F：查找
• Ctrl + H：替换
• Ctrl + D：选择下一个匹配项
• Alt + ↑：向上移动行
• Alt + ↓：向下移动行
• Shift + Alt + ↑：向上复制行
• Shift + Alt + ↓：向下复制行
• Ctrl + Shift + K：删除行
• Ctrl + /：注释/取消注释行
• Shift + Alt + A：块注释/取消块注释

导航操作：

• Ctrl + P：快速打开文件
• Ctrl + G：跳转到行号
• Ctrl + Shift + O：跳转到符号
• Ctrl + Tab：切换标签页
• Ctrl + Shift + Tab：反向切换标签页
• Alt + Left：后退
• Alt + Right：前进
• Ctrl + B：切换侧边栏
• Ctrl + Shift + E：打开文件资源管理器
• Ctrl + Shift + F：全局搜索
• Ctrl + Shift + D：打开调试面板
• Ctrl + Shift + X：打开扩展面板

终端操作：

• Ctrl + `：打开/关闭终端
• Ctrl + Shift + ：新建终端
• Ctrl + C：终止终端进程
• Ctrl + L：清屏

其他操作：

• F1 或 Ctrl + Shift + P：打开命令面板
• F5：开始调试
• Shift + F5：停止调试
• F11：切换全屏
• Ctrl + K Ctrl + S：打开键盘快捷键设置

3. 常见问题排查工具（日志分析、调试工具）

日志分析：

• 控制台日志：浏览器开发者工具的控制台
• Nuxt 日志：终端输出的 Nuxt 开发服务器日志
• 服务器日志：生产服务器的日志文件
• 错误监控：Sentry、LogRocket 等错误监控工具

调试工具：

• 浏览器开发者工具：

  • Elements：查看和编辑 DOM
  • Console：查看控制台日志
  • Sources：调试 JavaScript 代码
  • Network：分析网络请求
  • Application：查看本地存储、Cookie 等
  • Performance：分析性能
  • Lighthouse：网站性能审计

• VS Code 调试：

  • 配置 launch.json 文件
  • 设置断点
  • 步进调试
  • 查看变量值

性能分析：

• Webpack Bundle Analyzer：分析打包体积
• Lighthouse：网站性能审计
• Chrome DevTools Performance：分析运行时性能
• Vue DevTools：Vue 应用调试工具

网络工具：

• Postman：API 测试工具
• Insomnia：API 测试工具
• curl：命令行 HTTP 客户端
• wget：命令行下载工具

数据库工具：

• MySQL Workbench：MySQL 数据库管理工具
• pgAdmin：PostgreSQL 数据库管理工具
• MongoDB Compass：MongoDB 数据库管理工具
• SQLite Browser：SQLite 数据库管理工具

其他工具：

• Git：版本控制工具
• ESLint：代码检查工具
• Prettier：代码格式化工具
• TypeScript：类型检查工具
• Vite：构建工具

小结

本附录介绍了 Nuxt.js 常用命令、VS Code 常用快捷键以及常见问题排查工具等内容。通过本附录的学习，你应该已经掌握了如何使用 Nuxt.js 命令行工具、如何使用 VS Code 提高开发效率，以及如何使用各种工具排查和解决开发中遇到的问题。

希望本附录能够帮助你更高效地开发 Nuxt.js 应用，提高开发效率和代码质量。