如何构建和部署 Nuxt 应用程序？

Nuxt.js 是一个基于 Vue.js、Nitro 和 Vite 的开源框架，可用于开发网络应用程序。

受 Next.js（用于服务器端渲染的 React 框架）的启发，Nuxt.js 使开发人员能够通过应用不同的渲染模式来制作快速的网络应用程序。

Nuxt.js 于 2016 年发布，因其对开发者友好的理念和丰富的功能而获得了开发者的广泛认可。

Nuxt.js 的优势

Nuxt.js 具有多项优势，使其成为 Vue.js 开发的理想选择：

通用渲染

Nuxt.js 可控制网络应用程序在用户端的显示方式。它首先在服务器上渲染初始页面，使页面加载速度超快，尤其适合网络连接速度较慢的用户。

这有助于搜索引擎更快地抓取您的网站，从而提高搜索引擎优化效果。

然后，Nuxt.js 会平滑切换到客户端呈现 (SPA)，以便在应用内的页面之间进行导航。这样就能保持快速响应，就像您对现代网站的期望一样。

通过水合和代码拆分优化性能

Nuxt 3 支持选择性水合，即在客户端对应用程序的部分状态进行水合，以加快首页加载并增强用户体验。

与 Next.js 类似，Nuxt 也会根据路由自动将文件拆分成更小的文件包。

这样，浏览器只需要从服务器下载与当前视图相关的代码，从而大大减少了用户的页面加载时间。

这意味着占用的带宽资源更少，用户体验更好。

内置路由

默认情况下，Nuxt.js 通过基于文件的路由来处理路由，从而简化了应用程序内的导航和路由管理。

它还允许您选择动态配置路由，以适应更复杂的路由场景。

应用程序接口路线

Nuxt.js 可让您跳过为简单任务设置整个独立服务器的过程！它内置了称为 API 路由的快捷方式。

API 路由可在服务器端呈现期间处理数据获取，支持 RESTful 和 GraphQL API。这将使您的应用感觉更加快捷，并帮助搜索引擎更好地理解您的应用内容。

Nuxt.js 的局限性

虽然 Nuxt.js 提供了强大的开发体验，但也有一些限制需要考虑：

学习曲线

Nuxt.js 引入了不同于传统 Vue.js 开发的概念。初学 Nuxt.js 需要时间来适应其特定的架构和功能。

Nuxt 还提供了一个庞大的工具、库和插件生态系统。熟悉这些选项会增加初始学习曲线。

有限生态系统

与 React 和 Angular 等其他主要框架不同，Nuxt 相对年轻。因此，其第三方库和插件生态系统仍在不断壮大。

您需要定制解决方案，以满足特定情况下的某些要求。

服务器端渲染的复杂性

虽然服务器端呈现（SSR）是 Nuxt.js 中的一项强大功能，但它会使应用程序开发变得更加复杂。与更直接的呈现方法相比，SSR 的学习曲线更陡峭。

此外，有效实施 SSR 需要对数据获取和应用程序状态进行精心规划和管理。

这可能会导致服务器上最初呈现的内容与客户端上最终呈现的交互式版本之间出现潜在的错误或不一致。

在 Back4app 上构建和部署 Nuxt.js 应用程序

我们将构建一个联系人管理应用程序，以便更好地了解如何使用 Back4App 构建和部署 Nuxt 应用程序。

这款应用程序允许用户创建、查看和删除联系人信息，使他们的网络联系人簿井井有条，便于访问。

在本项目的后台，我们将使用 Back4app 内置的 PostgreSQL 数据库来存储姓名、电子邮件、电话号码和公司等联系信息。

在 Back4App 人工智能代理的帮助下，这一过程将变得更加简单。

对于项目的前端，我们将使用 Nuxt.js 创建应用程序的用户界面。然后，在使用 Back4App Containers 部署 Nuxt 前端之前，我们将使用 Parse SDK 连接前端和后端。

让我们开始吧。

为 Nuxt.js 应用程序创建后台

创建 Nuxt 应用程序的第一步是准备好后台。

要开始创建联系人应用程序的后端，请访问Back4App 网站，登录并点击 “创建新应用程序 “创建新应用程序。

选择 “Backend as a Service（后台即服务）”选项，如下图所示，在创建新应用程序后就会看到该选项。

为应用程序命名，并选择PostgreSQL选项，我们将使用它作为数据库。

点击 “创建“按钮后，Back4app 会花一点时间设置应用程序，包括数据库。

一切准备就绪后，系统会自动引导您进入应用程序，如下图所示。

要构建应用程序将使用的 PostgreSQL 数据库设计，请导航到Back4app 的人工智能代理并输入以下提示。

Create database tables in my Back4app app; do you need me to provide any information?

要建立数据库，人工智能代理会生成一份它需要的清单。该列表将包括应用程序的唯一键和数据结构（模式）等详细信息。

给人工智能代理提供应用程序密钥后，向人工智能代理提供数据库模式的样子。它应该与我们正在构建的联系人应用程序的模式类似：

1. Contact Class:
Class Name: Contact

Fields:
objectId (String, Automatically generated by Back4App).
name (String, Required)
email (String, Required)
phone (String, Required)
address (String, Required)
company (String, Optional)

将上述信息传递给代理后，可以通过浏览数据库来确认是否已创建联系人类别和相关字段。

接下来，使用下面的提示，让人工智能代理用测试数据填充数据库。

Populate my contact database with some test data with around 10 test contacts with variations in their information.

现在，您可以使用测试数据了。

创建云代码

Back4App 的云代码功能允许您直接在 Back4App 服务器上运行自定义 JavaScript 代码。

该功能可帮助您减少移动应用程序或网站的处理负荷。由于云代码运行在 Back4App 的安全服务器上，它还有助于保护您的数据和应用程序免受安全漏洞的影响。

现在您已经有了一个装满联系人的测试数据库，是时候为您的联系人管理系统实施功能了。

在本节中，您将学习如何创建云代码来实现应用程序的某些功能，例如

• 查看所有联系人
• 创建新联系人
• 删除联系人

您将通过 Back4App AI Agent 实现这些功能。让我们开始吧。

要从图书馆获取所有图书，请向 Back4App AI 代理提供以下提示，以生成所需的云代码。

Develop a cloud code function named "getContacts" to retrieve all contacts 
from the database. The function should return an array containing objects
representing a contact instance with its associated keys and values.

接下来，您还将通过以下提示为 Back4App AI 代理分配创建新联系人的任务：

Generate a cloud code function named “createContact” that takes in the necessary arguments to create a new contact in the Contact class.

最后，您还将向 Back4App AI 代理提供以下提示，以创建从数据库中删除联系人的功能。

Create a cloud code function "deleteContact" that deletes a contact from the Contact class based on the provided "objectId." If the deletion is successful, return a message indicating success. If there's an error, return an error message.

要检查代理是否正确生成了云函数，请查看位于此导航路径末尾的 main.js 文件。

Back4app dashboard → 云代码 → 功能与虚拟主机 → 云 → main.js。

您应该在同一个 main.js 文件中看到您定义的三个函数，以确保您正确创建了云函数。

构建应用程序的前端

我们将创建一个前端来与我们创建的所有云代码功能进行交互。我们将使用 Nuxt.js 创建前端。

要开始前端开发，请在首选目录下的终端连续运行以下代码：

npx nuxi init b4a_nuxt_app
cd b4a_nuxt_app
npm install

这几行代码将初始化一个以b4a_nuxt_app为名的Nuxt应用程序，然后安装所有必要的软件包和依赖项，以便应用程序正常运行。

在终端中运行上述命令后，您将安装一些 npm 软件包，以帮助设计您的应用程序。在终端中连续运行以下 npm 命令来安装这些软件包：

npm install sass
npm install -D tailwindcss postcss autoprefixer

上述代码行将安装 CSS 预处理器SASS 和实用 CSS 框架TailwindCSS。你将利用这些软件包快速为应用程序设计样式。

接下来，你将通过运行以下命令在应用程序中配置TailwindCSS：

npx tailwindcss init

上述代码会在 Nuxt 应用程序的根目录下创建tailwind.config.js文件。

该tailwind.config.js文件是在 Nuxt.js 中集成 Tailwind CSS 的中心配置点。它允许您自定义 Tailwind CSS 的各个方面，以满足您的特定项目需求。

在首选文本编辑器（VSCode、Eclipse、Sublime Text）中打开应用程序。导航至tailwind.config.js文件，并将其结构设置为如下代码块所示：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

上述代码块中的内容数组包含了 Tailwind CSS 为生成实用类而监控的文件路径。

接下来，在应用程序根目录下创建 assets 文件夹。在该文件夹中创建一个main.scss文件，为应用程序添加样式。在main.scss文件中粘贴以下代码：

/* main.scss */
@import url("<https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap>");
@import url("<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>");

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-color: #f2f2f2;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
}

.roboto {
  font-family: "Roboto", sans-serif;
}

上面的代码块导入了两种不同的 Google Fonts，集成了用于元素样式设计的 Tailwind CSS，为网络应用程序设置了浅灰色背景色，并定义了自定义类以有效应用导入的字体。

该main.scss文件为构建网络应用程序的视觉风格奠定了坚实的基础。

在nuxt.config.ts文件（其中包含 Nuxt 应用程序的配置）中，粘贴以下代码：

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  css: ["~/assets/main.scss"],
  ssr: false,
});

在 Nuxt 配置文件中，您将main.scss文件定义为 Nuxt 应用程序将使用的唯一 CSS 文件。您还禁用了 Nuxt 应用程序的服务器端渲染。

由于 Nuxt 会通过基于文件的路由系统自动处理路由，而且我们已经完成了应用程序的配置，因此可以开始创建不同的网页。

为了为该应用程序创建用户界面，我们将在项目根目录下的页面文件夹中创建三个页面。这些页面将是

• index.vue：这是首页，介绍应用程序的目的。
• contactForm.vue：该页面允许用户创建新联系人并将其保存到数据库中。
• contactsList.vue：该页面列出数据库中存储的所有联系人。

现在，在index.vue文件中粘贴以下代码：

// index.vue
<template>
  <div class="welcome montserrat flex flex-col gap-8 items-center mt-10">
    <h1 class="text-4xl">Welcome to {{ appName }}!</h1>
    <p class="text-[#888888] font-md text-md w-1/2">
      This application helps you manage your contacts. You can view existing
      contacts, add new ones, and keep your contact information organized.
    </p>
    <NuxtLink to="/contactForm">
      <button
        class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
      >
        Add Contact
      </button>
    </NuxtLink>
  </div>
</template>

<script setup>
const appName = "Contact Book";
</script>

<style scoped>
.welcome {
  text-align: center;
  padding: 2rem;
}
</style>

此代码块将为您的联系人管理应用程序创建欢迎页面。

它显示标题、应用程序的用途说明以及一个导航到联系表单页面的按钮。该代码块还定义了 TailWind 类来设计应用程序的样式。

另外，在contactForm.vue文件中粘贴以下代码：

<template>
  <div>
    <p class="montserrat text-2xl font-medium text-center">
      Fill the form below to create a contact
    </p>
    <form
      @submit.prevent="createContact"
      class="flex flex-col gap-8 items-center mt-10"
    >
      <input
        v-model="contact.name"
        type="text"
        placeholder="Name"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.email"
        type="email"
        placeholder="Email"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.phone"
        type="tel"
        placeholder="Phone"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.address"
        type="text"
        placeholder="Address"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.company"
        type="text"
        placeholder="Company"
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <div>
        <button
          class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
          type="submit"
        >
          Submit
        </button>
      </div>
      <p v-if="message" :class="{ error: isError }">{{ message }}</p>
    </form>
  </div>
</template>

<script setup>
import { ref } from "vue";

const contact = ref({
  name: "",
  email: "",
  phone: "",
  address: "",
  company: "",
});
const message = ref("");
const isError = ref(false);

</script>

<style>
.error {
  color: red;
}
</style>

上面的代码块定义了一个表单的结构，应用程序用户可以使用该表单创建和存储联系人。以下是要点：

表单元素通过各种输入字段获取联系人详细信息（姓名、电子邮件、电话、地址、公司）。

每个输入字段都与联系人对象（v 模型）中的一个属性相关联，并使用适当的输入类型进行验证。

提交按钮将触发创建联系人功能，我们将在下一节中实现该功能。消息区还将根据消息和isError变量显示反馈（成功或错误）。

代码块使用 Vue 的ref创建了 3 个反应式变量：

• 联系人：存储输入的联系人信息。
• 信息：为用户保存反馈信息。
• isError：表示信息是否代表错误。

使用代码块中的.error类，一个简单的样式规则就能定义错误信息的外观。

另外，在contactsList.vue文件中粘贴以下代码：

<template>
  <div class="px-8">
    <p class="montserrat text-3xl font-medium mb-10">Your Contacts</p>
    <div class="grid grid-cols-3 gap-5 items-center justify-center">
      <div
        v-for="contact in contacts"
        :key="contact.objectId"
        class="contact montserrat bg-[#FFFFFF] hover:shadow-lg mb-4 rounded-lg 
				        flex flex-col gap-3 p-3 w-11/12 items-center"
      >
        <p class="text-lg">Name: {{ contact.name }}</p>
        <p class="text-lg">Email: {{ contact.email }}</p>
        <p class="text-lg">Phone: {{ contact.phone }}</p>
        <p class="text-lg">Address: {{ contact.address }}</p>
        <p class="text-lg">Company: {{ contact.company }}</p>
        <div class="mt-5">
          <button
            @click="deleteContact(contact.objectId)"
            class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
          >
            Delete
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const contacts = ref([]);
</script>

上面的代码块将显示应用程序中的联系人列表。以下是要点：

该代码块创建了一个名为 “您的联系人 “的部分，并使用响应式网格布局（3 列）来显示联系人。

它使用v-for在联系人数组中循环，并显示每个联系人的信息（姓名、电子邮件、电话、地址、公司）。

每个联系人条目都有一个 “删除 “按钮，它会触发deleteContact函数，我们稍后将实现该函数。

代码块利用反应数组（联系人）来存储联系人列表。这将确保用户界面随着数据的变化而动态更新。联系人数组将存储从 Back4app 数据库获取的数据

将下面的代码粘贴到根目录下的app.vue文件中，以便包含指向所有这些页面的路由。

<template>
  <div>
    <NuxtLayout>
      <header class="flex justify-between p-8 roboto font-light">
        <NuxtLink to="/">
          <p class="text-2xl">Contact Book</p>
        </NuxtLink>

        <nav class="flex gap-5 text-md">
          <NuxtLink to="/contactsList" class="hover:text-[#888888]"
            >Contacts</NuxtLink
          >
          <NuxtLink to="/contactForm" class="hover:text-[#888888]"
            >Add Contact</NuxtLink
          >
        </nav>
      </header>
      <main>
        <NuxtPage />
      </main>
    </NuxtLayout>
  </div>
</template>

该代码块定义了 Nuxt 应用程序与 组件。

代码块中有一个水平导航菜单，可链接到 contactsList.vue 和 contactForm.vue 页面。

代码块还包括 组件，这是 Nuxt.js 中的一个关键组件，可动态呈现当前页面的内容。

这可确保您的应用程序根据用户在应用程序中的导航显示适当的内容。

连接应用程序的前端和后端组件

要将 Nuxt 联系人应用程序连接到 Back4app 数据库和后端实例，您需要安装Parse SDK。

Parse SDK 是前端应用程序（用户界面）和 Back4App 后端之间的桥梁，允许您与 Back4App 数据库和云功能进行交互。

要安装 Parse SDK，请在根目录下的终端运行以下命令：

npm install parse

安装完成后，需要通过获取以下信息来初始化 Parse：

• 应用 ID
• JavaScript 密钥
• Back4app 服务器 URL

您可以在 Back4app 应用程序的控制面板上导航至安全与密钥来获取此信息。将您的应用程序 ID 和 JavaScript 密钥安全地保存在您的应用程序中。

现在，修改app.vue文件，在应用程序中初始化 Parse：

<template>
<!--   Previous Content -->
</template>

<script setup>
import Parse from 'parse';

// Initialize Parse SDK
Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = '<https://parseapi.back4app.com>';
</script>

此外，修改 contactForm.vue 和 contactsList.vue 文件，以便将云代码功能连接到应用程序的前端。

在contactForm.vue页面中，粘贴以下代码：

<template>
<!--   Previous Content -->
</template>

<script setup>
import { ref } from 'vue';
import Parse from 'parse';

const contact = ref({
  name: '',
  email: '',
  phone: '',
  address: '',
  company: '',
});
const message = ref('');
const isError = ref(false);

const createContact = async () => {
  try {
    await Parse.Cloud.run('createContact', { ...contact.value });
    message.value = 'Contact created successfully!';
    isError.value = false;
    
    contact.value = { name: '', email: '', phone: '', address: '', company: '' };
  } catch (error) {
    message.value = `Error: ${error.message}`;
    isError.value = true;
  }
};
</script>

<style>
.error {
  color: red;
}
</style>

上面的代码块将用于创建新联系人逻辑的云代码功能与 Nuxt 应用程序连接起来。

它与后台交互以存储联系人信息，并根据操作的成败向用户提供反馈。

代码块尝试（使用 try-catch 块）使用 Parse SDK 在 Back4App 服务器上执行名为createContact的函数（await Parse.Cloud.run('createContact',{...contact.value}）。这将把联系人信息（contact.value）发送到 Back4App 服务器进行存储。

存储成功后，会出现 “联系人创建成功！”的信息，表单也会清除，重置联系人对象并允许输入新内容。

但是，如果出现错误，则会显示内容丰富的错误信息，包括来自服务器的详细信息和模板字面意义（${error.message}）。

在contactsList.vue文件中粘贴以下代码：

<template>
  <!--   Previous Content -->
</template>

<script setup>
import { ref, onMounted } from "vue";
import Parse from "parse";

const contacts = ref([]);

const fetchContacts = async () => {
  try {
    contacts.value = await Parse.Cloud.run("getContacts");
  } catch (error) {
    console.error("Failed to fetch contacts", error);
  }
};

const deleteContact = async (objectId) => {
  try {
    await Parse.Cloud.run("deleteContact", { objectId });
    contacts.value = contacts.value.filter(
      (contact) => contact.objectId !== objectId,
    );
  } catch (error) {
    console.error("Failed to delete contact", error);
  }
};

onMounted(fetchContacts);
</script>

上述代码为您的应用程序管理联系人的获取和删除。它与 Back4App 后端交互，处理数据存储和检索。

代码块定义了两个基本功能：

• fetchContacts：此异步函数从后台检索联系人列表。它使用Parse.Cloud.run('getContacts')，调用 Back4App 服务器上的云代码函数 “getContacts”。检索到的联系人存储在名为contacts 的反应数组中。

• 删除联系人：此异步函数用于删除特定联系人。它使用objectId作为参数，这是后台数据库中联系人的唯一标识符。该函数使用Parse.Cloud.run('deleteContact', { objectId })调用名为 “deleteContact “的云代码函数，并传递要删除的对象 ID。成功后，代码会过滤本地联系人数组，删除已删除的联系人。

现在，您已经完成了应用程序前端和后端的连接，可以运行下面的 npm 命令来预览应用程序。

npm run dev

您会发现 Nuxt Nitro 服务器正在加载。加载完成后，应用程序应在 URLhttp://localhost:3000/ 上可用。导航到该 URL 时，您会看到与下图类似的屏幕。

导航至联系人页面，您会看到一系列联系人。这些联系人是 Back4app AI 代理在创建 Back4app 后台时为您创建的虚拟数据。

单击 “添加联系人 “链接后，您会看到一个用于输入新联系人详细信息的表单。例如

点击 “提交 “按钮后，您就会清楚地注意到这些字段。进入联系人页面，您将看到新创建的联系人。

部署完全构建的网络应用程序

以下是部署 Nuxt 应用程序的步骤。在完成应用程序的构建和测试后，您就可以使用 Back4app 容器部署 Nuxt 应用程序，将应用程序公之于众。

为加快部署进程，请向 Back4app AI 代理发出以下指令：

Give me simplified steps to deploy my Nuxt application with Back4app containers

您应该会看到与下面概述的类似步骤。

Containerize Your Application (Create a Dockerfile)
Build and Push Docker Image
Configure Deployment
Deploy Your Container

要对应用程序进行 docker 化，请在根目录下创建一个Dockerfile和一个.dockerignore文件，然后粘贴下面的脚本。

在Dockerfile 中

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
RUN npm run build
CMD [ "npm", "run", "start" ]

另外，在.dockerignore文件中：

node_modules
.nuxt

Dockerfile包含构建 Docker 映像的说明。Dockerfile 包括必要应用程序依赖项的安装步骤。

.dockerignore文件是一个简单的文本文件，其中列出了指示 Docker在构建镜像时排除哪些文件和文件夹的模式。

现在，要构建应用程序的 docker 镜像，请在终端中运行以下 docker 命令：

docker build -t b4a_contacts_app .

在尝试在 Back4app 上部署应用程序之前，请确保将应用程序推送到 GitHub 账户。推送应用程序后，将 GitHub 账户与 Back4app 整合。

您可以使用Back4app Github 应用程序实现这一功能。将 GitHub 与 Back4app 集成后，就可以部署应用程序了。

从 Back4app 面板导航到容器页面。

然后，点击屏幕上的 “创建新应用程序 “按钮。然后选择要部署的版本库，将其命名为 b4a_contacts_app，并创建应用程序。完成部署需要一些时间。

部署完成后，您的实时应用程序应在https://b4acontactsapp1-5990olnw.b4a.run/ 这个 URL 上可用。

结论

在本文中，您将学习如何在 Back4app 生态系统中构建和部署带有 PostgreSQL 数据库的 Nuxt.js 应用程序。

您还了解了使用 Nuxt.js 构建网络应用的优缺点。

从使用 Back4App 的人工智能代理构建云代码功能和设计数据库，到了解 Back4App 后端的低代码、用户友好界面。

您还使用 Back4App 容器部署了 Nuxt 应用程序，并熟悉了 Back4App 为简化应用程序开发而提供的一系列工具。

有了这些工具的组合，您就可以快速构建和部署网络应用程序了。

您可以进一步了解AI Agent 的工作原理，熟悉如何简化应用程序开发。