创建你的第一个Nuxt应用程序 – 一个增删改查的书店
学习如何创建一个Nuxt应用。
CRUD – 创建、读取、更新、删除
我假设您已经了解了Vue JS的基本知识，或者对framework有一些了解。Nuxt JS是一个强大的框架，建立在Vue JS之上。它本质上与Vue JS相同。那么，为什么要选择Nuxt呢？
对于大多数人来说，使用Nuxt JS的决定通常是因为它的服务器端渲染（SSR）能力。
什么是SSR？
SSR是服务器端渲染的缩写。
通常，对于大多数单页面应用程序（SPA），渲染的文件是在页面加载后自动注入到DOM中的。因此，机器人、SEO爬虫在页面加载时会找到一个空白页面。然而，对于SSR，由于它能够在页面之前在服务器上预渲染应用程序，因此该页面可以被SEO爬虫轻松索引。此外，它可能使应用程序比普通的SPA更具性能。
Nuxt JS使开发人员能够轻松创建SSR应用程序。常规Vue JS SPA应用程序也可以配置为使用SSR，但是这个过程有些麻烦，而Nuxt JS提供了一个包装器来处理所有的配置。除了SSR之外，Nuxt还提供了一种更有效地设置VueJS项目的方法。
尽管Nuxt JS仍然是Vue JS，但它在文件夹结构上有一些基本的区别。
本文的重点是让您能够使用Nuxt构建应用程序，因此我们不会深入探讨Nuxt的文件夹结构，但是我将快速解释一些我们可能在这里需要的重要内容。
Pages
页面文件夹是与常规Vue SPA的一个基本区别。它代表了常规Vue架构中的Views文件夹，而且在Nuxt中，创建在Pages文件夹中的文件会自动作为一个路由提供。也就是说，当您在pages文件夹中创建一个index.vue文件时，它自动成为您的根路由，即localhost:3000/。
此外，当您创建任何其他filename.vue文件时，它就成为一个路由 – 创建about.vue允许您访问localhost:3000/about。
您还可以在Pages文件夹中创建一个文件夹。如果您创建了一个名为'contact'的文件夹，并在该文件夹中创建了email.vue文件，那么您可以访问localhost:3000/contact/email。就是这么简单。这样，您不需要手动创建一个router.js文件，就像您通常在Vue JS中创建路由一样。
组件
它与Vue JS基本相同，创建的组件不会自动作为路由提供。
静态文件夹
静态文件夹取代了常规Vue JS应用程序中的public文件夹，功能基本相同。这里的文件不会被编译，它们以存储的方式提供。
您可以在Nuxt JS documentation page.阅读有关架构和结构的所有详细信息
现在，让我们建立一些有趣的东西…
构建一个图书商店应用程序
我们将构建一个图书商店应用程序，用户可以将他们阅读过的图书添加到他们喜欢的特定类别中。它将如下所示。
所以，我们将有一个简单的布局，就像上面那样，只有3列包含不同部分的书籍。最近阅读的书籍、最喜欢的书籍，还有，最好的书籍（我承认，我不知道如何称呼那一部分，🙂）
所以这里的目标是能够将书籍的标题、作者和描述添加到任何部分的卡片上，编辑已经添加的书籍并删除现有的书籍。我们将不使用任何数据库，所以一切都发生在状态中。
首先，我们安装Nuxt：
npm install create-nuxt-app第二，在安装了Nuxt之后，您现在可以使用以下命令创建项目：
create-nuxt-app bookStore我选择将我的应用程序命名为'bookStore'；您可以给它取一个更酷的名称^_^
然后，让我们继续进行剩余的提示，输入一个描述，
作者姓名，输入一个姓名或按回车保留默认值
选择一个包管理器，无论您对哪个都感到舒适，都可以
选择一个UI框架。对于这个项目，我将使用Vuetify，但是您对任何您感到舒适的UI框架都可以。
选择一个自定义服务器框架；我们不需要任何一个，我选择无
额外的模块，选择您想要的，或者选择两者，我们不会在这个应用程序中使用它们。
代码检查很重要。我们选择ESLint。
虽然测试很重要，但我们今天不会关注它，所以选择无
渲染模式，是的 SSR。
注意：选择SSR并不意味着我们不能享受具有SPA的好处，应用程序仍然保持为SPA但具有SSR。另一个选项仅意味着仅SPA没有SSR。
按回车键继续，
然后我们的项目创建完成，
创建完成后，现在我们可以进入目录并运行
yarn dev如果您使用npm作为您的包管理器，请使用，
npm run dev
默认情况下，应用程序在localhost:3000上运行。在浏览器中访问链接，您应该会看到一个默认的Nuxt页面。
现在让我们开始创建我们需要的组件。我们将有显示每本书信息的卡片，并且我们将有一个包含一个表单以输入新书信息或编辑现有书籍的模态框。
要创建一个组件，只需在components文件夹中创建一个新文件。这是我的卡片组件的代码。
// BookCard.vue
{{bookTitle}}
{{bookAuthor}}
{{bookDescription}}
以上是对上述操作的快速解释。图像是硬编码的；我们暂时不会关心这个。书籍标题、书籍作者和书籍描述从父页面作为props传递到此组件。如果您对props不熟悉，可以把它们想象成通过这个组件可以填充数据的入口点。
现在到下一个组件，模态框。
//BookModal.vue
Add Books
Add
现在，这是模态框的标记；我们需要将v-models创建为数据属性；因此，我们将在标记下方添加一个脚本标记。
此外，还有一个期望“categories”数据的“选择类别”下拉菜单。我们将将其添加到数据中。
现在，我们需要一种方法来打开和关闭模态框，暂时，我们将只有一个“open”数据属性。我们将在下面仔细看看它。
让我们快速创建视图页面，其中我们将拥有三个网格/列，每个部分都有一个。让我们将页面命名为index.vue，如下所示的代码。
//index.vue
最近阅读的书籍
最喜欢的书
最好的书
现在我们有了网格，我们需要为每个添加的书籍在每个网格中添加我们的卡片组件。因此，我们将导入我们的BookCard.vue组件。
最近阅读的书籍
编辑
移除
最喜欢的书
编辑
移除
最好的书
编辑
移除
现在，我们已经导入了BookCard组件，并将其props绑定到循环的结果上；这样确保了在任何部分添加的每个条目都会创建一个卡片。另外，在每张卡片上，我们将包括编辑或移除卡片的按钮。
现在，我们需要从脚本中导入卡片并定义将保存每个类别记录的数组。
接下来，我们需要在页眉中添加一个按钮，以便在需要添加书籍时打开模态框。我们将在'default.vue'文件中进行此操作。我们将按钮添加到默认的应用栏标题中。
添加书籍接下来，我们需要在脚本部分创建openModal方法。在常规的Vue JS应用程序中，有一个事件总线，允许您与另一个组件进行通信，甚至跨组件传递数据，在Nuxt JS中，仍然有一个事件总线，您可以以相同的方式创建它。因此，我们将使用事件总线来传递数据，以打开index.vue页面中的一个模态框（我们还没有导入它）。
让我们看看如何完成这个任务。
要创建一个全局事件总线，请在项目的根目录中打开一个文件，将其命名为eventBus.js，并将下面的代码粘贴到其中。
import Vue from ‘vue'
export const eventBus = new Vue()
是的，就是这样。现在我们可以使用它了。
接下来，我们将返回到我们的BookModal组件，并监听eventBus何时发出'open-add-book-modal'事件。我们将把它添加到脚本部分。
import { eventBus } from "@/eventBus";
created() {
eventBus.$on("open-add-book-modal", this.open = true);
},现在，我们可以打开和关闭我们的模态框，但它还没有添加任何书籍。让我们添加一个方法到我们的Modal中，以便它可以保存添加到状态中的内容（请记住，我们不使用任何数据库或本地存储）。我们将在'created()'之后添加这个方法。
methods: {
saveBook() {
let cardData = {
title: this.title,
author: this.author,
description: this.description,
category: this.category
};
eventBus.$emit("save-book", cardData);
this.open = false;
}
}接下来，当我们编辑任何卡片的数据时，我们需要一种重新填充模态框的方法。所以让我们对'created()'进行一些调整。
created() {
eventBus.$on("open-add-book-modal", data => {
if (data) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = true;
});
},现在，整个BookModal看起来是这样的：
//BookModal.vue
添加书籍
添加
接下来，我们现在可以返回到index.vue页面导入BookModal组件。我们将把它添加到脚本部分。
另外，在body中，我们将添加：
我们需要添加编辑和删除卡片的方法。在之前的模板中，我已经将编辑和删除方法传递给了按钮，如下所示，同样，我传递了每个方法所需的参数。
编辑 删除 让我们创建这些方法。
methods: {
remove(category, index) {
if (category === "最近阅读的书籍") {
this.recentBooks.splice(index, 1);
}
if (category === "最喜欢的书籍") {
this.favouriteBooks.splice(index, 1);
}
if (category === "最好的书籍") {
this.bestOfTheBest.splice(index, 1);
}
},
edit(item, index) {
if (item.category === "最近阅读的书籍") {
eventBus.$emit("open-add-book-modal", item);
this.recentBooks.splice(index, 1);
}
if (item.category === "最喜欢的书籍") {
eventBus.$emit("open-add-book-modal", item);
this.favouriteBooks.splice(index, 1);
}
if (item.category === "最好的书籍") {
eventBus.$emit("open-add-book-modal", item);
this.bestOfTheBest.splice(index, 1);
}
}
}记住，BookModal正在发出一个名为save-book的事件，我们需要在这里监听该事件。
created() {
eventBus.$on("save-book", cardData => {
if (cardData.category === "Recently read books") {
this.recentBooks.push(cardData);
}
if (cardData.category === "Favourite books") {
this.favouriteBooks.push(cardData);
}
if (cardData.category === "Best of the best") {
this.bestOfTheBest.push(cardData);
}
});
},现在，整个index.vue页面的代码如下所示
最近阅读的书籍
查看
编辑
移除
喜爱的书籍
编辑
移除
精选好书
编辑
移除
如果你能看到这里，干得好！！！你很棒！
如前面所述，在pages文件夹中创建的每个.vue文件都会自动成为一个路由，同样适用于在pages文件夹中创建的每个文件夹。这不仅适用于静态页面，动态页面也可以以这种方式创建！
让我们看看具体操作。
使用我们当前的项目，假设我们想为所有的书籍卡片添加一个动态页面，以便查看更多关于一本书的详细信息。
让我们快速添加一个查看按钮，并使用来访问页面。是的，替代了，并且它可以工作。
查看
接下来，我们通过在名称前加下划线来创建一个动态文件夹。例如，_title，并在该文件夹中创建一个index.vue文件，当我们访问该路由时，该文件将被渲染。
只是为了演示，我们将仅在文件中访问params属性。
// _title/index.vue
{{$route.params.title}}
现在，当我们点击“查看”时，它会打开另一个页面，我们可以在该页面上看到我们通过路由传递的标题。就动态页面而言，我们可以开发它来执行任何我们想要的操作。
这就是本课的全部内容！
这个完整的代码可以在这个repository中找到。欢迎您为代码作出贡献。如果您有兴趣掌握这个框架，我建议您参考这个Udemy course。
