Appearance
第17章:学习资源推荐
1. 官方文档(Nuxt 3 中文文档、API 文档)
Nuxt 3 官方文档:
核心概念文档:
- 路由:https://nuxt.com/docs/guide/concepts/routing
- 数据获取:https://nuxt.com/docs/guide/concepts/data-fetching
- 布局:https://nuxt.com/docs/guide/directory-structure/layouts
- 组件:https://nuxt.com/docs/guide/directory-structure/components
- 中间件:https://nuxt.com/docs/guide/directory-structure/middleware
配置文档:
- nuxt.config.ts:https://nuxt.com/docs/api/configuration/nuxt-config
- 环境变量:https://nuxt.com/docs/guide/going-further/runtime-config
- 模块:https://nuxt.com/docs/guide/going-further/modules
2. 优质学习网站与视频教程
学习网站:
- Nuxt 官方博客:https://nuxt.com/blog
- Vue Mastery:https://www.vuemastery.com/(有 Nuxt 相关课程)
- Frontend Masters:https://frontendmasters.com/(有 Nuxt 相关课程)
- MDN Web Docs:https://developer.mozilla.org/(Web 开发基础)
- Dev.to:https://dev.to/(社区文章)
- Medium:https://medium.com/(技术文章)
视频教程:
- Nuxt 官方 YouTube 频道:https://www.youtube.com/c/NuxtLabs
- Vue School:https://vueschool.io/(Nuxt 相关课程)
- Udemy:https://www.udemy.com/(搜索 "Nuxt.js" 相关课程)
- Bilibili:https://www.bilibili.com/(搜索 "Nuxt.js" 相关视频)
- YouTube:搜索 "Nuxt 3 tutorial" 或 "Nuxt.js tutorial" 相关视频
在线 playground:
- Nuxt Playground:https://nuxt.new/(在线体验 Nuxt 3)
- StackBlitz:https://stackblitz.com/(可以创建 Nuxt 项目)
- CodeSandbox:https://codesandbox.io/(可以创建 Nuxt 项目)
3. 实战项目练手(GitHub 优质 Nuxt 项目参考)
官方示例项目:
- Nuxt 3 Examples:https://github.com/nuxt/starter/templates
- Nuxt Content Example:https://github.com/nuxt/content/tree/main/examples
社区优质项目:
- Nuxt 3 Starter:https://github.com/antfu/vitesse-nuxt3(快速启动模板)
- Nuxt 3 Blog:https://github.com/nuxt/starter/tree/main/templates/content(内容驱动博客)
- Nuxt 3 E-commerce:https://github.com/nuxt-community/commerce(电商示例)
- Nuxt 3 Admin:https://github.com/nuxt/admin(管理后台示例)
学习型项目:
- Todo App:https://github.com/nuxt/starter/tree/main/templates/todo(待办事项应用)
- Weather App:https://github.com/nuxt/starter/tree/main/templates/weather(天气应用)
- Authentication:https://github.com/nuxt/starter/tree/main/templates/auth(认证示例)
4. 社区与工具(Nuxt 官方社区、VS Code 插件、构建工具优化)
社区资源:
- Nuxt 官方 Discord:https://discord.com/invite/nuxt(官方社区)
- Nuxt GitHub:https://github.com/nuxt/nuxt(源码与 issues)
- Nuxt Twitter:https://twitter.com/nuxt_js(官方 Twitter)
- Vue 社区:https://vuejs.org/community/(Vue 官方社区)
- Reddit r/Nuxt:https://www.reddit.com/r/Nuxt/(Reddit 社区)
VS Code 插件:
- Volar:https://marketplace.visualstudio.com/items?itemName=Vue.volar(Vue 3 支持)
- Nuxt:https://marketplace.visualstudio.com/items?itemName=Nuxt.vscode-nuxt(Nuxt 支持)
- ESLint:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint(代码检查)
- Prettier:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode(代码格式化)
- TypeScript:https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next(TypeScript 支持)
构建工具优化:
- Vite:https://vitejs.dev/(构建工具)
- ESBuild:https://esbuild.github.io/(JavaScript 编译器)
- Rollup:https://rollupjs.org/(模块打包器)
- Terser:https://terser.org/(JavaScript 压缩工具)
- PostCSS:https://postcss.org/(CSS 处理工具)
其他工具:
- Prisma:https://www.prisma.io/(数据库 ORM)
- Tailwind CSS:https://tailwindcss.com/(CSS 框架)
- Pinia:https://pinia.vuejs.org/(状态管理)
- Axios:https://axios-http.com/(HTTP 客户端)
- ESLint:https://eslint.org/(代码检查)
- Prettier:https://prettier.io/(代码格式化)
小结
本章介绍了 Nuxt.js 的学习资源推荐,包括官方文档、优质学习网站与视频教程、实战项目练手以及社区与工具等内容。通过本章的学习,你应该已经了解了如何找到更多学习材料和社区资源,帮助你更深入地学习 Nuxt.js。
Nuxt.js 是一个不断发展的框架,社区资源和学习材料也在不断更新。建议你定期关注官方文档和社区动态,以获取最新的学习资源和最佳实践。
希望本教程能够帮助你快速上手 Nuxt.js,并在开发中取得成功!
