使用 Svelte 和 Medusa 构建现代电子商务平台

介绍

Medusa是一款专为开发者打造的开源无头电商引擎。它提供创建卓越数字商务体验所需的基本组件。定制化和灵活性是其核心优势，并通过开源基础架构和独特的插件架构得以实现。此外，Medusa 还解决了大多数单体电商解决方案的常见痛点，例如多区域支持、技术栈的灵活性、自动化交易处理等等。

Medusa 的无头架构也赋予了您极大的灵活性，让您可以在 Medusa 之上构建或添加任何您喜欢的前端应用程序或渠道。在本教程中，我们将使用我们新构建的 Svelte starter 来搭建一个基于 Medusa 的、带有 Svelte 前端的商店。

Svelte是一个类似于React和VueJS 的前端框架，近年来人气飙升。其受欢迎程度的主要原因在于 Svelte 能够通过将 Web 组件（HTML、CSS 和 Javascript）编译成在构建时运行的小型独立 Javascript 模块来提升前端性能。

本教程将重点介绍 Svelte 入门模板。如果您想将 Medusa 与其它框架结合使用，可以查看我们的Next.js和Gatsby入门模板。

先决条件

本教程要求您的本地计算机上已运行 Medusa 商店引擎。使用我们的 CLI 即可快速入门：

# Install our CLI
npm install -g @medusajs/medusa-cli

# Create a new project
medusa new my-medusa-store

# Navigate to your project and start your server locally
cd my-medusa-store
medusa develop

确保 Medusa 运行在端口上，9000以避免在连接 Svelte 应用程序时出现潜在的 CORS 问题。

安装和使用

要开始使用 Svelte 入门套件，请在您的计算机上打开一个新的终端标签页，并执行以下命令：

npx degit vickywane/svelte-starter-medusa my-storefront

这些命令将为你搭建一个名为 my-storefront 的 Svelte 应用程序。

接下来，导航到您的 Svelte 项目，安装依赖项并启动您的项目：

# Navigate to your project
cd my-storefront

# Install all dependencies
npm install

# Start up your Svelte applcation
npm run dev

请确保您的 Svelte 应用程序运行在 8000 端口上。这样做是为了防止出现 CORS 问题。

前往http://localhost:8000并查看您新建的店铺页面。要体验此入门模板，您需要向 Medusa 商店添加一些初始数据。如果您尚未添加，请导航至您的 Medusa 项目并运行：

# Will seed your database with some predefined dummy data
npm run seed

# start the server with new data
npm start

现在，如果您刷新 Svelte 应用，应该会在首页看到一个产品。该入门模板自带的功能允许您将产品添加到购物车并完成结账流程。

‍

接下来是什么？

通过本教程，您将掌握使用 Svelte 框架构建卓越数字商务体验的基础。浏览 Medusa 官方文档，了解更多关于使用自定义功能和插件扩展您的商店引擎的信息。

如果您遇到问题或有任何疑问，欢迎加入我们的 Discord 并与 Medusa 工程团队联系。