Home Blogs NuxtShop:一个Nuxt和Shopify电子商务入门套件
Applications

NuxtShop:一个Nuxt和Shopify电子商务入门套件

About The Author

Outline

NuxtShop是一个高度可定制的开源入门套件,用于使用Nuxt 3构建 无头Shopify商店 。 它开箱即用,具有出色的开发人员体验和内置性能实践,是生产质量电子商务网站的基础。

一键部署

NuxtShop诞生的原因

NuxtShop诞生于-19流行病对电子商务的影响所预示的必要性。 Forrester和BloomReach发现,2019年电子商务的销售额和品牌收入大幅增长,83%的企业实现了数字收入的两位数增长,而数字收入仅为9%。

在此期间,全球规模最具包容性的时尚品牌Universal Standard关闭了所有零售空间。 Universal Standard成功迁移到了由NuxtJS和Shopify构建的无头架构,尽管开发团队规模相对较小且预算有限,但其100%的收入来自在线销售。

这家服装公司的移动转化率提高了200%,迁移带来了前所未有的最高收入,同时团队速度也有所提高。

迁移成功后,Universal Standard技术主管Justin Metros着手创建NuxtShop,这是他希望在Universal Standard迁移时拥有的入门套件。 NuxtShop是对Universal Standard如何构建迁移并解决无头商务中的主要挑战的精练,其中包括:

  • 用于购物车管理的跨域通信
  • 核心Web生命体征的优化
  • Apollo客户端和GraphQL API缓存(即将推出)
  • 实时CDN数据同步
  • 开发人员工作效率
  • 性能优化

开放源代码项目为服务器端呈现(SSR),缓存,性能优化和部署提供了无缝迁移和经验证的技术,重点是开发人员体验。

什么是NuxtShop以及什么不是NuxtShop

NuxtShop是一个开源入门套件,用于在Shopify上使用Vue 3,Nuxt 3,Apollo,Tailwind 3和Pinia开发无头电子商务。 它允许您使用最新的技术,如Nuxt3和Tailwind 3,对高性能电子商务网站的依赖性更少。 如果你写了任何Nuxt在所有,你会在家里与NuxtShop。

NuxtShop是:

  • 轻量级起点
  • 配置为帮助您快速提高生产效率
  • 风格简约,基本功能随时可扩展
  • 确信,但不是规定性的
  • Nuxt + Shopify电子商务与Layer0边缘的起点
  • 一个基本电子商务功能的项目,其结构鼓励良好的开发实践
  • 专为使用Nuxt开发无头Shopify电子商务的开发人员打造

NuxtShop不是:

  • Shopify主题
  • 功能齐全的即插即用解决方案/生产就绪型商店
  • 设计系统
  • 与任何一种工具紧密结合-交换您想要的,添加您需要的

NuxtShop是基于什么技术构建的?

NuxtShop的核心是简约和简单。 它建立在运行所需的技术之上,而不会牺牲或降低质量。 它也是面向未来的,因为它采用了创新前沿的最新技术。

Nuxt 3作为Vue Framework

Nuxt 3采用更小的内核进行了重新设计,并针对更快的性能和更好的开发人员体验进行了优化。 NuxtShop是在Nuxt的未来基础上构建的,它具有Nuxt 3 (目前正在测试中)。

与Pinia一起进行状态管理

NuxtShop使用Pinia管理状态 。 它直观,类型安全,可扩展,极其轻便,采用模块化设计, 并具有devtools支持。

使用Tailwind CSS的CSS样式

Tailwind CSS是 一个高度可自定义的实用程序优先CSS框架,它允许在标记中直接进行样式合成,而无需处理语义类名称。

Apollo for GraphQL

NuxtShop利用Apollo通过GraphQL管理API。 使用Apollo [Studio],您不仅可以管理GraphQL API的生命周期,还可以开发,交付和观察其活动。

通过Layer0托管

默认情况下,NuxtShop将Layer0作为托管平台,因为它提供了支持通用标准的许多功能。 核心Web虚拟数据和真实用户监控,GraphQL缓存,安全性(DDoS防护,WAF和爬虫程序管理)等功能

Shopify for Headless Ecommerce和作为结帐系统。

NuxtShop由一个由API互连的分散式无头架构提供支持。 它提供了一个 StoreFront API,其中包含 原语和功能,如购物车,结账等,让您轻松上手。 借助无头方法,您可以交换您需要的内容,而无需或轻松地将新服务引入到您的堆栈中,如支付网关,无头CMS或结帐系统。

支持打字

NuxtShop附带了 用于静态类型检查的typescript

功能

易于设置/开始

使用Shopify和App安装并运行NuxtShop是非常简单的,也可以 通过一键部署将项目克隆到您的GitHub帐户,将其部署到Layer0。

最小的外部封装占用空间

NuxtShop只使用运行所需的软件包服务,让您在控制的轮子后面。

最小初始样式

NuxtShop不仅是为了成为最低的公分母而设计的,而且它还附带了最小的样式,让您可以像处理一个新的Nuxt项目一样控制您的设计。

无外设体系结构

NuxtShop是为API驱动而构建的。 开始使用精简的API空间,并根据您的需要交换和替换服务。

通过Layer0托管

NuxtShop工厂内置了一键部署到Layer0,这是一个边缘平台,它将边缘逻辑集成到应用程序代码中,并将边缘扩展到浏览器。 它可以帮助您更快地构建,部署和交付,提供从核心Web虚拟数据和真实用户监控,GraphQL缓存,边缘实验到安全性等各种功能。

入门

请访问下面的链接以开始。

捐款

您是否希望为NuxtShop做出贡献?

  1. Fork NuxtShop到您的GitHub帐户并将其克隆到您的本地设备。
  2. 创建新分支`git checkout -b <branch-name>`
  3. 设置 Shopify商店
  4. 在本地克隆中,将`.env.sample`重命名为`.env`
  5. 将Shopify访问令牌和*.myshopify URL添加到.env变量中
  6. 运行`yarn`以安装依赖项
  7. 运行`yarn dev`在本地开发服务器上启动应用程序

打开拉取请求

拉取请求应向`ñ o main`ñ o分支提出。

问题

是否发现NuxtShop有任何问题? 创建新问题

Tags

Just For You