Logo

菜单

发布于 2026-01-06 7 阅读
0

Nuxt、Medusa、TailwindCSS 速成课程

Nuxt、Medusa、TailwindCSS 速成课程

我非常喜欢用 Nuxt 构建应用程序。它目前是我最喜欢的 Web 框架，拥有大量的模块、插件和配置选项。

在本文中，我将向您展示如何使用 Nuxt、 Tailwind和Medusa构建一个简单的产品展示网站（以及将来功能强大的无头电商网站）。

本文还将展示我最近创建的一个 Nuxt 模块 -> https://github.com/baroshem/nuxt-medusa。请务必在 GitHub 上给它点个星，这会激励我把模块做得更好！

接下来的几周，我还会在我的 YouTube 频道上录制一个关于同一主题的视频教程。

本教程中的所有代码都可以在以下 GitHub 仓库中找到：

https://github.com/Baroshem/nuxt-tailwind-medusa

技术栈

在深入实际代码之前，让我们先简要地谈谈我们的技术栈。

为了连接到 Medusa，我们将使用我最近创建的一个模块，名为nuxt-medusa：

纳克斯特美杜莎

在样式方面，我还会使用官方的 Nuxt Tailwind 模块：

Nuxt Tailwind

此外，官方的 Nuxt 模块也适用于图像优化：

Nuxt Image

现在让我们来看代码，看看如何使用前面提到的技术来构建我们的应用程序：

代码

我使用以下命令创建了一个简单的 Nuxt 项目：

npx nuxi init <project-name>
Enter fullscreen mode Exit fullscreen mode

然后，我在IDE中打开了项目，并使用以下命令安装了所有依赖项：

yarn install
Enter fullscreen mode Exit fullscreen mode

为了检验它是否正常工作，我们只需使用以下命令运行该应用程序：

yarn dev
Enter fullscreen mode Exit fullscreen mode

如果安装和构建成功，我们访问时应该会看到一个漂亮的 Nuxt Hello World 页面http://localhost:3000。

现在，让我们安装所有必需的模块（Medusa、Tailwind、Image）：

yarn add --dev @nuxt/image-edge @nuxtjs/tailwindcss nuxt-medusa
Enter fullscreen mode Exit fullscreen mode

接下来，让我们将它们添加到文件modules中的相应部分nuxt.config.ts：

export default defineNuxtConfig({
    modules: ['nuxt-medusa', '@nuxtjs/tailwindcss', '@nuxt/image-edge'],
})
Enter fullscreen mode Exit fullscreen mode

为了获得优化的图像，您应该按照此处的说明添加以下图像配置对象：

export default defineNuxtConfig({
    ...
    image: {
        domains: ['medusa-public-images.s3.eu-west-1.amazonaws.com']
    }
})
Enter fullscreen mode Exit fullscreen mode

如果您还没有 Medusajs 项目，可以通过运行以下命令生成一个：

npx create-medusa-app
Enter fullscreen mode Exit fullscreen mode

Medusa 默认会有一个用于店面的 CORS 设置，http://localhost:8000因此medusa-config.js让我们将其更改为http://localhost:3000（默认 nuxt 应用程序端口）。

// CORS to avoid issues when consuming Medusa from a client
const STORE_CORS = process.env.STORE_CORS || "http://localhost:3000";
Enter fullscreen mode Exit fullscreen mode

另外，别忘了.env美杜莎（Medusa）的文件（它默认运行在 9000 端口）：

MEDUSA_URL=http://localhost:9000
Enter fullscreen mode Exit fullscreen mode

现在，让我们将以下代码添加到app.vue全局组件中（我将在下面解释每个部分）：

<script lang="ts" setup>
const client = useMedusaClient();
const { products } = await client.products.list();
</script>

<template>
  <div class="flex">
    <div v-for="product in products" class="mx-2">
      <div class="relative rounded-lg shadow-lg">
        <NuxtImg
          :src="product.thumbnail"
          class="shadow-lg rounded-lg opacity-1 hover:opacity-75 transition duration-300 ease-in-out w-full"
          format="webp"
        />
        <div class="p-6">
          <h5 class="font-bold text-lg mb-3">{{ product.title }}</h5>
          <pre class="text-gray-500 mb-4">{{
            product.variants[0].prices[0].amount
          }}</pre>
          <p>{{ product.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode
  1. 在本script部分中，我们调用一个useMedusaClient可组合对象来访问 Medusa 客户端。
  2. 我们使用此客户端获取产品列表并products从中解构数据。
  3. 在本template部分，我们利用这些组件products生成多个产品卡片v-if。我们还应用了一些 Tailwind 类，使元素看起来更加美观。此外，我们还使用了NuxtImg带有属性format设置的组件webp。这确保我们的图片webp格式更轻量，加载速度更快。

如果我们操作正确，访问以下页面后应该会看到以下结果http://localhost:3000：

Nuxt、Medusa、Tailwind

概括

就这样！你已经用 Nuxt、Tailwind 和 Medusa 构建了一个简单的产品展示网站！别忘了在 GitHub 上给这个项目点个星标哦：https://github.com/baroshem/nuxt-medusa :)

文章来源：https://dev.to/jacobandrewsky/nuxt-medusa-tailwindcss-crash-course-46jf
JavaScript 中的对象字面...
使用 Julep 构建你的第一个 ...