Mastering Nuxt 3 课程
开发和部署快速、生产就绪的 Nuxt 3 应用程序的完整指南
教程演示🔗
An Introduction to Mastering Nuxt 3
掌握Nuxt 3简介
Nuxt 3 和 Mastering Nuxt 3 课程背后的团队分享了他们对创建 Nuxt 的旅程的见解以及学习该平台的终极指南。该视频包括来自 NuxtLabs、Vue School 和 Mastering Nuxt 的团队。探索引领课程启动的史诗般的道路
Build awesome websites 建立很棒的网站
Learn how to build robust, modern websites with Nuxt from scratch. Or improve your website performance, code quality, while making better use of the framework.
了解如何使用Nuxt从头开始构建强大的现代网站。或者提高你的网站性能，代码质量，同时更好地利用框架。
Learn the best practises, common pitfalls to avoid, and tons of tips and tricks. Prior experience with Nuxt is beneficial but not required.
学习最佳实践、要避免的常见陷阱以及大量提示和技巧。先前使用Nuxt的经验是有益的，但不是必需的。
Nuxt.js is a modular framework built on top of the easiest web development framework in 2020 Vue.js. It allows developers of any kind to create elegant websites progressively. We see huge enterprise companies and governments using Nuxt to build websites quickly — very important especially during the pandemic. We also see solo devs building exceptional side projects with Nuxt.
Nuxt.js 是一个模块化框架，建立在 2020 年 Vue.js 最简单的 Web 开发框架之上。它允许任何类型的开发人员逐步创建优雅的网站。我们看到大型企业公司和政府使用Nuxt快速构建网站，这非常重要，尤其是在大流行期间。我们还看到独立开发者使用Nuxt构建出色的副项目。
What you will build 您将构建的内容
Learn the best practises, common pitfalls to avoid, and tons of tips and tricks
学习最佳实践、要避免的常见陷阱以及大量提示和技巧
Get to grips with building your own online course and database, and then build a blazing-fast landing page to sell your course. Explore technologies like VueUse, Nuxt, Vue.js.
掌握建立自己的在线课程和数据库，然后建立一个极快的登录页面来销售您的课程。探索 VueUse、Nuxt、Vue.js 等技术。
Course Outline 课程大纲
We cover everything you need in order to build real-world applications and performant landing pages.
我们涵盖了构建真实世界的应用程序和高性能登录页面所需的一切。
Frontend 前端
We start by building our MVP as quickly as possible. You learn file-based routing, how Universal rendering works, and more, in order to build out the client-side of our app. Then we deploy the app to Netlify so it’s live for the world to see.
我们从尽快构建 MVP 开始。您将学习基于文件的路由、通用渲染的工作原理等，以便构建我们应用程序的客户端。然后，我们将应用程序部署到 Netlify，以便让全世界都能看到它。
Now that things are working, we take some time to make sure our app is engineered well.
现在一切正常，我们需要一些时间来确保我们的应用程序设计良好。
We learn how to architect our Nuxt app and organize our code so that it’s maintainable over the long term . There’s nothing worse than trying to work on an old codebase that’s become a tangled, messy, dumpster fire.
我们学习如何构建我们的Nuxt应用程序并组织我们的代码，以便它可以长期维护。没有什么比试图在一个旧的代码库上工作更糟糕的了，因为这个代码库已经变成了一个纠结的、凌乱的、垃圾箱的火灾。
✅ We won’t let that happen to you and your Nuxt apps.
✅ 我们不会让这种情况发生在你和你的Nuxt应用程序上。
We also need to make sure our apps are robust enough for the real-world, and that means adding in TypeScript and thorough error-handling. No, it’s not exciting, but making sure that your app doesn’t break down means a better UX for your customers, as well as stress-free weekends.
我们还需要确保我们的应用程序在现实世界中足够强大，这意味着添加 TypeScript 和彻底的错误处理。不，这并不令人兴奋，但确保您的应用程序不会崩溃意味着为您的客户提供更好的用户体验，以及无压力的周末。
Backend 后端
We’ve already learned a ton about Nuxt, but now we dig deeper into how Nuxt works. Here we take a look at what powers the magic behind Nuxt – the Nitro server.
我们已经对Nuxt有了大量的了解，但现在我们更深入地研究了Nuxt是如何工作的。在这里，我们来看看是什么推动了Nuxt背后的魔力 – Nitro服务器。
Next up is adding authentication. We need to be able to restrict access to our course, and we can do that using Supabase and Nuxt middleware.
接下来是添加身份验证。我们需要能够限制对课程的访问，我们可以使用 Supabase 和 Nuxt 中间件来做到这一点。
Time for the APIs. API 的时间。
We use Prisma in combination with a Postgres database from Supabase so we can have type-safe access to our data. Then we build out an API that let’s us grab all of our course data from the database.
我们将 Prisma 与 Supabase 的 Postgres 数据库结合使用，因此我们可以对数据进行类型安全访问。然后，我们构建了一个 API，让我们可以从数据库中获取所有课程数据。
And now that we have a database set up, we can start to track our student’s progress through the course.
现在我们已经建立了一个数据库，我们可以开始跟踪学生在课程中的进度。
Landing Page 登陆页面
Finally, we need a way to sell the product!
最后，我们需要一种销售产品的方法！
We build a blazing-fast landing page, using many of the tricks that Nuxt has in order to squeeze as much performance out as we can. We’ll see how to use Hybrid rendering, lazy loading, and proper asset management in order to keep things speedy.
我们建立了一个极快的登陆页面，使用Nuxt的许多技巧，以尽可能多地榨取性能。我们将了解如何使用混合渲染、延迟加载和适当的资产管理来保持速度。
Of course, we’ll also optimize the page for SEO so we get tons of traffic to our landing page.
当然，我们还将针对 SEO 优化页面，以便为我们的目标网页获得大量流量。
What you will learn
您将学到什么
The Mastering Nuxt 3 course aims to provide you with a true understanding of how Nuxt 3 works and how you can apply those principles to your own projects. On completion of the course you’ll be able to build a production-ready Nuxt 3 app from scratch, from the backend to the front end and everything in between, including the following:
掌握 Nuxt 3 课程旨在让您真正了解 Nuxt 3 的工作原理以及如何将这些原则应用到您自己的项目中。完成课程后，您将能够从头开始构建一个生产就绪的 Nuxt 3 应用程序，从后端到前端以及介于两者之间的所有内容，包括以下内容：
Who is this for? 这是给谁的？
The course is for anyone that wants to learn how to build professional websites!
该课程适合任何想要学习如何建立专业网站的人！
You just need to be interested in learning Nuxt. No matter what level you’re at you can learn at your own pace and become a master in Nuxt with this course.
你只需要对学习Nuxt感兴趣。无论您处于什么水平，您都可以按照自己的节奏学习，并通过本课程成为Nuxt的大师。
Senior Developers – develop full-blown, performant Vue and Nuxt 3 applications.
高级开发人员 – 开发成熟、高性能的 Vue 和 Nuxt 3 应用程序。
Junior Developers – build your first state-of-the-art website using Nuxt 3 and the best practices. Avoid common gotchas in learning and get ahead of the herd.
初级开发人员 – 使用 Nuxt 3 和最佳实践构建您的第一个最先进的网站。避免学习中的常见陷阱，领先于群体。
Students – start learning a new skill and join the global community of Nuxt developers. You can add the Mastering Nuxt 3 project to your portfolio and GitHub.
学生 – 开始学习一项新技能，并加入Nuxt开发人员的全球社区。您可以将 Mastering Nuxt 3 项目添加到您的投资组合和 GitHub 中。
Business & Agencies – some of the largest business and agencies use Nuxt because it makes building modern websites easy and quick. Agencies also appreciate the great performance and SEO that Nuxt comes with.
商业和代理机构 – 一些最大的企业和代理机构使用Nuxt，因为它使构建现代网站变得简单快捷。代理商也欣赏Nuxt带来的出色性能和SEO。
Do you have any questions?
你有什么问题吗？
Why use Nuxt? 为什么使用Nuxt？
Nuxt allows developers of any level to create elegant websites progressively.
Nuxt允许任何级别的开发人员逐步创建优雅的网站。
Nuxt.js is a framework that provides an organized way to build complete, performant Vue applications. Nuxt is based on a powerful modular architecture and allows you to tailor your project to your needs with more than 50 modules — making your development faster and easier.
Nuxt.js 是一个框架，它提供了一种有组织的方式来构建完整、高性能的 Vue 应用程序。Nuxt 基于强大的模块化架构，允许您通过 50 多个模块根据您的需求定制您的项目——使您的开发更快、更容易。
Who is the trainer?
谁是培训师？
The Mastering Nuxt 3 course has been developed by Michael Thiessen, an experienced front-end developer and author who is passionate about helping Vue.js developers level up their skills. With thousands of developers already helped through his independent courses, he’s now partnered up with VueSchool and NuxtLabs to bring you Mastering Nuxt 3 and help you get the most out of this incredible framework.
Mastering Nuxt 3 课程由 Michael Thiessen 开发，他是一位经验丰富的前端开发人员和作者，他热衷于帮助 Vue.js 开发人员提升技能。数以千计的开发人员已经通过他的独立课程得到了帮助，他现在与 VueSchool 和 NuxtLabs 合作，为您带来 Mastering Nuxt 3 并帮助您充分利用这个令人难以置信的框架。
Can I add the course project to my CV or portfolio?
我可以将课程项目添加到我的简历或作品集中吗？
Absolutely. You are more than welcome to take the source code and add it to your portfolio and GitHub.
绝对。非常欢迎您获取源代码并将其添加到您的投资组合和 GitHub 中。
We encourage you to present your source code as your own work when looking for a job.
我们鼓励您在找工作时将源代码作为自己的作品展示。
What does a real-world app mean?
真实世界的应用程序是什么意思？
Many course providers say ‘real-world’ and provide a course that’s a foo-bar example or a to-do list. NOT HERE! When we say we build a real-world application we mean it! In our lessons, we will cover everything you need to know in order to build from scratch or optimize a Nuxt website.
许多课程提供者说“真实世界”，并提供的课程是 foo-bar 示例或待办事项列表。不在这里！当我们说我们构建一个真实世界的应用程序时，我们是认真的！在我们的课程中，我们将介绍从头开始构建或优化Nuxt网站所需了解的所有内容。
In the Mastering Nuxt 3 course, we will be building an online course platform complete with authentication, a Postgres database, error-handling to make our app rock-solid, and more! It’s a prod-ready app that covers the entire stack from backend to frontend. Course content and student progress is stored in a Postgres database powered by Supabase and accessed using Prisma. We’ll also build a landing page so we can sell our course, and we’ll optimize it for speed using many of the tricks Nuxt 3 has up it’s sleeve.
在 Mastering Nuxt 3 课程中，我们将构建一个在线课程平台，包括身份验证、Postgres 数据库、错误处理，使我们的应用程序坚如磐石等等！这是一款生产就绪的应用程序，涵盖了从后端到前端的整个堆栈。课程内容和学生进度存储在由 Supabase 提供支持的 Postgres 数据库中，并使用 Prisma 进行访问。我们还将建立一个登录页面，以便我们可以销售我们的课程，我们将使用 Nuxt 3 的许多技巧来优化它的速度。
What is the state of the Mastering Nuxt 3 course today?
Mastering Nuxt 3 课程今天的状况如何？
The Mastering Nuxt 3 course is completed.
Mastering Nuxt 3 课程已经完成。
There are 86 lessons for you to watch. Check out the published lessons, here.
有 86 节课供您观看。在此处查看已发布的课程。
What backend technology will you be using?
您将使用什么后端技术？
Although Mastering Nuxt 3 course is also focused on Nuxt, we need some backend tech to turn it into a real-world app.
虽然掌握 Nuxt 3 课程也专注于 Nuxt，但我们需要一些后端技术才能将其变成现实世界的应用程序。
We’ll be using Supabase for authentication, as well as for providing a Postgres database for our backend. We’ll access the database through Prisma, which makes it a breeze to use TypeScript with our data.
我们将使用 Supabase 进行身份验证，并为我们的后端提供 Postgres 数据库。我们将通过 Prisma 访问数据库，这使得使用 TypeScript 处理我们的数据变得轻而易举。
Can I buy both Mastering Nuxt 2 and 3 as a bundle?
我可以捆绑购买 Mastering Nuxt 2 和 3 吗？
Yes! For those developers wanting an in-depth courses on both Nuxt 2 and Nuxt 3, we have made available a discounted bundle deal for both courses, here.
是的！对于那些想要同时学习 Nuxt 2 和 Nuxt 3 深入课程的开发人员，我们在这里为这两门课程提供了折扣捆绑优惠。
Do you have course for mastering Nuxt 2?
你有掌握Nuxt 2的课程吗？
We sure do! Check out the Mastering Nuxt 2 course where you will learn to build an Airbnb clone called NuxtBNB from scratch.
我们当然可以！查看掌握Nuxt 2课程，您将学习从头开始构建名为NuxtBNB的Airbnb克隆。
How long do I get access to the course?
我可以参加该课程多长时间？
Buy the course once and it’s yours forever! As we update the course you’ll continue to have access to the full course including any progressive updates.
购买一次课程，它就永远属于您！随着我们更新课程，您将继续访问完整课程，包括任何渐进式更新。
Can I put NuxtBnB in my CV or portfolio?
我可以把NuxtBnB放在我的简历或投资组合中吗？
Absolutely. You are more than welcome to take the source code and add it to your portfolio and in GitHub.
绝对。非常欢迎您获取源代码并将其添加到您的投资组合和 GitHub 中。
We encourage you to present your source code as your own work when looking for a job.
我们鼓励您在找工作时将源代码作为自己的作品展示。
Will I get a certificate of completion?
我会得到结业证书吗？
Yes! We will be offering a certificate of completion once you’ve completed the course. We would recommend you adding this to your CV as it could help you get that dream job you’ve always wanted.
是的！完成课程后，我们将提供结业证书。我们建议您将其添加到您的简历中，因为它可以帮助您获得您一直想要的梦想工作。
What is the course format?
课程形式是什么？
The course consists of HD video lessons. After you purchase, you will join our training platform and you will be able to watch all the lessons online. If you buy the Complete package you can also download the videos for offline use so you can watch them on the train or on top of the mountain.
该课程包括高清视频课程。购买后，您将加入我们的培训平台，您将能够在线观看所有课程。如果您购买了完整套餐，您还可以下载视频以供离线使用，以便您可以在火车上或山顶上观看。
Do you provide Purchase Power Parity discount?
你们提供购买力平价折扣吗？
Yes! We believe education must be available to everyone no matter the country they live in. We take pride in offering adjusted prices to people from countries where the conversion rate to US dollars is prohibiting high or the course might be too expensive.
是的！我们相信，无论他们生活在哪个国家，每个人都必须接受教育。我们很自豪能够为来自美元兑换率高或课程可能过于昂贵的国家/地区的人们提供调整后的价格。
Do I get Mastering Nuxt 3 if I purchased Mastering Nuxt 2, or vice versa?
如果我购买了 Mastering Nuxt 2，我会得到 Mastering Nuxt 3 吗，反之亦然？
Both Mastering Nuxt 2 and Mastering Nuxt 3 are separate courses and need to be purchased individually. Mastering Nuxt 2 provides the knowledge to those developers wanting to study Nuxt 2 by building an AirBnb clone. Although Mastering Nuxt 2 customers who purchase the Complete package will get a bridge course to convert their project to Nuxt 3. Mastering Nuxt 3 focuses solely on Nuxt 3 and introduces a new project to build and is most suitable for developers jumping straight into learning Nuxt 3.
Mastering Nuxt 2 和 Mastering Nuxt 3 都是单独的课程，需要单独购买。掌握 Nuxt 2 为那些想要通过构建 AirBnb 克隆来研究 Nuxt 2 的开发人员提供了知识。虽然掌握Nuxt 2，但购买完整包的客户将获得一个桥梁课程，将他们的项目转换为Nuxt 3。Mastering Nuxt 3 只专注于 Nuxt 3，并引入了一个新项目来构建，最适合直接学习 Nuxt 3 的开发人员。
Can I buy both Mastering Nuxt 2 and 3 as a bundle?
我可以捆绑购买 Mastering Nuxt 2 和 3 吗？
Yes! For those developers wanting an in-depth course on Nuxt 2 and Nuxt 3, we have made available a discounted bundle deal for both courses.
是的！对于那些想要深入了解 Nuxt 2 和 Nuxt 3 的开发人员，我们为这两门课程提供了折扣捆绑交易。
Course Prerequisites 课程先决条件
This is what you need to get the most out of Mastering Nuxt 3:
这是充分利用Mastering Nuxt 3所需要的：
- Comfortable with Vue — You don’t need to be an expert, but you should be familiar with Vue and Javascript.
熟悉 Vue — 你不需要成为专家，但你应该熟悉 Vue 和 Javascript。 - Knowledge of Nuxt is not needed — If you know nothing about Nuxt or Nuxt 3, that’s totally fine! You’ll learn what you need to know as we progress through the course.
不需要 Nuxt 的知识——如果你对 Nuxt 或 Nuxt 3 一无所知，那完全没问题！随着课程的进展，您将了解您需要了解的内容。 - No TypeScript needed — We’ve tried to strike a balance between showing you what TypeScript with Nuxt 3 is capable of, while keeping it approachable for those of you who have never used TypeScript.
不需要 TypeScript — 我们试图在向你展示 Nuxt 3 的 TypeScript 功能之间取得平衡，同时让那些从未使用过 TypeScript 的人也能理解它。
Topics Covered 主题
Here’s a more detailed list of the things you can expect to learn from Mastering Nuxt 3.
以下是您可以从 Mastering Nuxt 3 中学到的东西的更详细列表。
- Architecture for large projects
大型项目的架构- Keeping it maintainable over time
保持其可维护性 - Composition API and Composables
组合 API 和可组合项 - Reusable Components 可重复使用的组件
- State Management and Pinia
状态管理和 Pinia
- Keeping it maintainable over time
- Fast 快
- SEO Optimization SEO优化
- Performance Optimization 性能优化
- Managing Static Assets 管理静态资产
- Advanced topics 高级主题
- Route middleware and server middleware
路由中间件和服务器中间件 - Nuxt internals: Nitro and h3
Nuxt 内部结构：Nitro 和 h3 - Using modules and 3rd party libraries
使用模块和第三方库
- Route middleware and server middleware
- Render modes 渲染模式
- Universal rendering 通用渲染
- Hybrid rendering 混合渲染
- Static Site Generation 静态站点生成
- Server Side Rendering 服务器端渲染
- Single Page Apps 单页应用程序
- Nuxt fundamentals Nuxt基础知识
- Pages 页面
- Layouts 布局
- Components 组件
- Composables 可组合项
- TypeScript 打字稿
- Integration with Nuxt 3 与 Nuxt 3 集成
- Building type-safe APIs 构建类型安全的 API
- Type safe database access with Prisma, Supabase, and Postgres
使用 Prisma、Supabase 和 Postgres 进行类型安全数据库访问
- Other topics covered 涵盖的其他主题
- File-based routing and nested routes
基于文件的路由和嵌套路由 - Async and isomorphic data fetching
异步和同构数据提取 - Error handling — client-side and server-side
错误处理 — 客户端和服务器端 - User authentication and permissions with Supabase
Supabase的用户身份验证和权限 - Deploying and hosting with Netlify
使用 Netlify 进行部署和托管 - Using
nuxi用nuxi
- File-based routing and nested routes
Is this course for you?
这门课程适合你吗？
We’ve worked hard to make sure this course has no fluff and is 100% focused on teaching you how to build production-ready Nuxt 3 applications.There’s a lot of less important stuff that we cut out. But your time is valuable, and you want to learn how to get everything you can out of Nuxt 3.
我们一直在努力确保这门课程没有绒毛，并且 100% 专注于教你如何构建生产就绪的 Nuxt 3 应用程序。我们删掉了很多不太重要的东西。但是你的时间很宝贵，你想学习如何从Nuxt 3中获得一切。
What’s the best way to learn State Management for Vue.js?
学习 Vue.js 状态管理的最佳方法是什么？
If you want to learn the officially recommended state management solution for Vue.js and even directly from its creator, then we suggest you sign up for Mastering Pinia. The course has been developed by Eduardo San Martin Morote, the creator of both Pinia and Vue Router. For more information, visit masteringpinia.com
如果你想学习官方推荐的 Vue.js 状态管理解决方案，甚至直接从它的创建者那里学习，那么我们建议你注册 Mastering Pinia。该课程由 Pinia 和 Vue Router 的创建者 Eduardo San Martin Morote 开发。欲了解更多信息，请访问 masteringpinia.com
