DEV Community
·
为Medusa 2设置Nuxt 3商店前端的开发环境
内容提要
本文介绍了如何安装和配置Medusa与Nuxt应用。首先，确保安装Node.js、Pnpm、Git和PostgreSQL。创建Medusa应用后，设置CORS并添加管理员用户。然后，安装并配置Nuxt v3，确保与v4兼容，添加ESLint和Nuxt UI。最后，连接Nuxt与Medusa，更新环境变量，完成配置，准备进一步开发。
关键要点
-
确保安装Node.js、Pnpm、Git和PostgreSQL等工具。
-
使用命令创建Medusa应用，并选择不创建Next.js商店。
-
在Admin界面注册第一个管理员用户。
-
更新Medusa应用的CORS配置，允许来自Nuxt应用的API请求。
-
在Admin界面创建新的区域和产品集合。
-
安装Nuxt v3并确保与v4兼容，创建Nuxt应用。
-
更新nuxt.config.ts文件以添加与v4的兼容性。
-
添加ESLint和Nuxt UI v3以优化代码和界面。
-
配置Nuxt应用的样式和组件。
-
连接Nuxt与Medusa，更新CORS配置和环境变量。
-
成功安装和配置Medusa与Nuxt，为进一步开发做好准备。
延伸问答
如何安装Medusa和Nuxt的开发环境？
首先确保安装Node.js、Pnpm、Git和PostgreSQL。然后使用命令创建Medusa应用，并安装Nuxt v3，确保与v4兼容。
如何创建Medusa应用并设置管理员用户？
运行命令npx create-medusa-app@latest my-medusa-store，选择不创建Next.js商店。然后在Admin界面注册第一个管理员用户。
如何配置Medusa的CORS设置？
打开Medusa应用文件夹中的.env文件，更新STORE_CORS键以包含Nuxt应用的默认URL，即http://localhost:3000。
如何将Nuxt与Medusa连接？
在Nuxt项目中创建.env文件，添加NUXT_PUBLIC_MEDUSA_BACKEND_URL和NUXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY，并更新nuxt.config.ts文件中的runtimeConfig。
如何为Nuxt应用添加ESLint和Nuxt UI？
在nuxt.config.ts文件中添加ESLint配置，并安装Nuxt UI v3以优化代码和界面。
完成配置后，如何启动Nuxt应用？
使用命令pnpm run dev启动Nuxt应用，确保应用运行正常并显示配置的主题。
