AstroVue电商

tema-despensa — Astro 电商模板

作者 ecomplus

面向食品杂货、食品与饮料品类的 E-Com Plus 电商主题模板,基于 Astro 与 Vue,包含食品限制筛选、保质期与冷链说明等定制区块。

看看你的网站会是什么样

浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局,交互效果请以实际项目为准。

采集于 2026-10-13查看来源

值得关注的模板亮点

从已有项目资料中,快速了解它的特点。

01

基于 Astro 与 Vue 的 E-Com Plus 电商主题,面向食品杂货、食品与饮料品类

02

新增食品品类区块,支持按饮食限制筛选、保质期与冷链保障说明及定期补货入口

03

定制品牌设置、Tailwind 中性色阶与圆角、首页 Hero、商品橱窗与横幅网格

04

联系、换货与条款等附加页面改写为葡萄牙语,条款文本仍为待办

05

仓库为薄壳结构,店面与店铺逻辑位于 @cloudcommerce/* 依赖包中

06

采用 MIT 许可,允许免费使用、修改、商用与分发该版本代码

模板详细介绍

tema-despensa 是 E-Com Plus 平台上的一个电商主题模板,定位为食品杂货、食品与饮料品类的演示店铺。它基于公开的 ecomplus/store 起始模板做了主题化改造,品牌名、Logo 与域名均为占位内容,属于内部原型性质,并非可直接上线的成品店铺。

主题在起始模板基础上调整了品牌设置(名称、描述、域名、Logo/图标、主色与辅色、Pix 折扣、免运费门槛)、Tailwind 中性色阶与圆角、布局内容(Pitch bar、页脚标题、ogImage)、首页内容(双幻灯片 Hero、三个商品橱窗、三横幅网格与食品品类区块),并新增了 NichoAlimenticioSection.astro 区块,用于按饮食限制筛选、展示保质期与冷链保障以及定期补货入口。联系、换货与条款等附加页面改写为葡萄牙语,其中条款仍为待办事项,未编造法律文本。

该仓库是薄壳结构:店面、组件与店铺逻辑位于 @cloudcommerce/* 包中,不在本仓库内。更新平台版本需要升级依赖版本,而不是与起始模板合并。商品目录为远程数据,未配置 E-Com Plus 店铺时商品橱窗为空,但 Hero、横幅与食品品类区块仍可正常渲染。已知待办包括 Logo 与图标为占位 SVG 文字、筛选路由需目录具备对应分类与规格后才可用、图标集默认仅含 heroicons 等、食品品类配色尚未经过验证。

AstroVue电商

适合你的项目吗?

适用场景

  • 为食品杂货、食品或饮料类电商搭建演示店铺或原型
  • 评估 E-Com Plus 平台在食品品类的主题定制方式
  • 作为食品品类店铺的起点,替换品牌、Logo、域名与内容后使用
  • 参考新增食品品类区块的实现方式(Astro 组件 + c: 注册约定)

适合人群

  • 需要食品品类电商主题原型的开发者或团队
  • 使用 E-Com Plus 平台并希望基于模板起步的店铺
  • 希望了解 Astro + Vue 在电商主题中如何组织区块的读者

上手与定制指南

结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。

  1. 1

    运行 npm i 与 npm run dev 启动本地开发,默认地址为 http://localhost:3000

  2. 2

    商品目录为远程数据,需通过 npm run setup 配置 E-Com Plus 店铺,否则商品橱窗为空

  3. 3

    上线前需替换 settings.json 中的名称、域名、Logo、颜色与联系方式等占位内容

  4. 4

    需替换 public/img/uploads/ 中的 Logo、图标与横幅(当前图片来自 Unsplash,署名见 CREDITOS.md)

  5. 5

    robots.txt 当前阻止所有抓取,因为演示站为 noindex;上线前需调整

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供;担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • README 提及 Firebase 集成;启用相关动态功能前需自行配置,并核对 Firebase 的额度与收费。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
  • 商品目录为远程数据,必须配置 E-Com Plus 店铺(npm run setup)才能显示商品橱窗,否则橱窗为空。
  • 筛选路由(如 /s/sem-gluten、/s/mercearia、/assine)只有在目录具备对应分类与规格后才可用。
  • 默认图标集仅含 heroicons 等;改用 lucide 或 tabler 需自行添加 @iconify-json/<set> 依赖。
  • 食品品类配色未经主题调研验证,标记为 TODO: validar,需自行确认。
  • Logo 与图标为占位 SVG 文字,上线前需替换并将文字矢量化,以免依赖设备字体。
  • robots.txt 当前阻止所有抓取(演示站为 noindex),上线前需调整。
  • 需在 config.json 中配置 storeId 与 Firebase 项目(npm run setup)。
  • 当前横幅照片来自 Unsplash,署名见 CREDITOS.md,上线前需替换并核实素材许可。
  • 升级平台依赖后若构建失败,修复属于 cloud-commerce 仓库,而非本主题仓库。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

O catálogo é remoto: sem uma loja E-Com Plus configurada (`npm run setup`), as vitrines de produto vêm vazias

README 原文

As rotas de filtro (`/s/sem-gluten`, `/s/mercearia`, `/assine`…) só respondem depois que o catálogo tiver as categorias e especificações correspondentes.

README 原文

Conjunto de ícones segue o padrão do starter (heroicons). Trocar por lucide ou tabler exige adicionar `@iconify-json/<set>` às dependências

README 原文

A paleta do nicho, diferente da de beleza, não veio de levantamento de temas campeões — está marcada como `TODO: validar` em `brands.ts` e aqui.

README 原文

Logo e ícone são wordmarks SVG placeholder, com o texto em `<text>`. Ao definir a identidade, vetorizar o texto para não depender da fonte do dispositivo.

README 原文

`functions/ssr/public/robots.txt` — hoje bloqueia tudo, porque a demo é `noindex`

README 原文

`functions/*/config.json` — `storeId` e projeto Firebase (`npm run setup`)

README 原文

as fotos atuais vêm do Unsplash; créditos em `CREDITOS.md`

README 原文

Se o build quebrar depois de atualizar, a correção pertence ao [`cloud-commerce`](https://github.com/ecomplus/cloud-commerce), não a este repositório.

README 原文
https://github.com/ecomplus/tema-despensa/blob/main/LICENSEhttps://github.com/ecomplus/tema-despensa/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-13。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 85 / 100
技术栈
Astro · Vue
网站类型
电商
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-08-03
截图检查日期
2026-10-13

已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-13

查看当时使用的来源资料

SHA-256: 8a7caf524c118bd477838a9a70c0ac17d12405789d2545d8112d48cfae71f736

2026-10-13T01:29:54.283Z

来源文件 / 仓库
# Despensa — loja demo do nicho alimentício

Cópia do starter [`ecomplus/store`](https://github.com/ecomplus/store)
tematizada para **alimentos, bebidas e mercearia**. Serve de vitrine navegável
para a hipótese de nicho que hoje só existe como página de venda no site
institucional.

- Marca e copy: `www.e-com.plus/src/config/brands.ts`, objeto `despensa`
  (rota `/demo/despensa`).
- Argumentos do nicho: `www.e-com.plus/src/pages/segmentos/alimenticio.astro`.
- Vitrine do nicho: `www.e-com.plus/src/components/alimenticio/vitrine/`.
- Referência de mercado: [tiasonia.com.br](https://www.tiasonia.com.br) — case
  publicado da plataforma, granola D2C de indústria.

> **Protótipo interno.** Nome, logo e domínio são placeholders. Nenhum número
> de resultado foi inventado: os únicos dados de performance citados no
> material do nicho são os publicados nas páginas de case do site.

## O que foi customizado em relação ao starter

| Arquivo | O que mudou |
|---|---|
| `functions/ssr/content/settings.json` | Nome, descrição, domínio, logo/ícone, `primaryColor` terracota + `secondaryColor` verde erva, desconto de 5% no Pix, frete grátis a partir de R$ 129 |
| `functions/ssr/tailwind.config.js` | Escala neutra quente (creme/areia) no lugar do cinza padrão, raio de borda mais suave |
| `functions/ssr/content/layout.json` | Pitch bar (frete, Pix, assinatura), títulos das listas do rodapé, `ogImage` |
| `functions/ssr/content/pages/home.json` | Hero de 2 slides, 3 vitrines de produto, grade de 3 banners e a seção de nicho |
| `functions/ssr/src/sections/NichoAlimenticioSection.astro` | **Novo.** Filtros por restrição alimentar, garantias de validade/cadeia fria e chamada de reposição programada |
| `functions/ssr/src/sections/_Sections.astro` | Registro da seção customizada `c:nicho-alimenticio` |
| `functions/ssr/content/extra-pages/` | Contato, trocas e termos reescritos em PT-BR (termos ficaram como pendência explícita, sem texto jurídico inventado) |
| `functions/ssr/public/img/uploads/` | Banners do Unsplash; imagens de demo do starter removidas. Créditos em `CREDITOS.md` |

## Por que a seção de nicho é um componente, e não HTML no CMS

O UnoCSS/Tailwind desta stack varre apenas `./src/**` — classe utilitária
escrita dentro de `content/pages/*.json` (seção `custom-html`) não gera CSS. Por
isso a vitrine do nicho é um `.astro` em `src/sections/`, registrado pela
convenção `c:` que o `_Sections.astro` já previa.

## Rodando

```bash
npm i
npm run dev     # http://localhost:3000
npm run build
```

O catálogo é remoto: sem uma loja E-Com Plus configurada (`npm run setup`), as
vitrines de produto vêm vazias — o hero, os banners e a seção de nicho
renderizam normalmente.

## Pendências conhecidas

- Logo e ícone são wordmarks SVG placeholder, com o texto em `<text>`. Ao
  definir a identidade, vetorizar o texto para não depender da fonte do
  dispositivo.
- As rotas de filtro (`/s/sem-gluten`, `/s/mercearia`, `/assine`…) só respondem
  depois que o catálogo tiver as categorias e especificações correspondentes.
- Conjunto de ícones segue o padrão do starter (heroicons). Trocar por lucide
  ou tabler exige adicionar `@iconify-json/<set>` às dependências — hoje só
  heroicons, fa6-brands e logos vêm com `@cloudcommerce/storefront`.
- A paleta do nicho, diferente da de beleza, não veio de levantamento de temas
  campeões — está marcada como `TODO: validar` em `brands.ts` e aqui.

## Como atualizar a base da plataforma

Este repositório é uma **casca fina**. O storefront, os componentes e a lógica
de loja moram nos pacotes `@cloudcommerce/*`, não aqui. Atualizar o tema para
uma versão nova da plataforma **não** é fazer merge com o starter
[`ecomplus/store`](https://github.com/ecomplus/store) — é subir a versão das
dependências, exatamente como as lojas em produção fazem: a
[tiasonia](https://www.tiasonia.com.br) tem mais de 260 commits `Update to v`
no próprio repositório e nenhum merge com o starter.

Todos os pacotes `@cloudcommerce/*` andam na mesma versão, na raiz e em cada
grupo de functions (`ssr`, `many`, `with-apps`):

```bash
# 1. ver a versão mais recente e o changelog
npm view @cloudcommerce/cli version
# https://github.com/ecomplus/cloud-commerce/releases

V=2.61.4   # troque pela versão alvo

# 2. raiz
npm i -D @cloudcommerce/cli@$V @cloudcommerce/eslint@$V

# 3. cada grupo de functions
(cd functions/ssr && npm i \
  @cloudcommerce/api@$V @cloudcommerce/firebase@$V @cloudcommerce/ssr@$V \
  @cloudcommerce/i18n@$V @cloudcommerce/storefront@$V @cloudcommerce/types@$V)
(cd functions/many && npm i \
  @cloudcommerce/feeds@$V @cloudcommerce/firebase@$V @cloudcommerce/passport@$V)
(cd functions/with-apps && npm i \
  @cloudcommerce/events@$V @cloudcommerce/firebase@$V @cloudcommerce/modules@$V)

# 4. validar antes de commitar
npm run build

# 5. commitar no padrão das lojas em produção
git commit -am "Update to v$V"
```

Se o build quebrar depois de atualizar, a correção pertence ao
[`cloud-commerce`](https://github.com/ecomplus/cloud-commerce), não a este
repositório. Aqui só entra o que é **do tema**: `functions/ssr/src/`,
`functions/ssr/content/` e `functions/ssr/public/`.

## Este repositório é um template

Use **"Use this template"** no GitHub para começar uma loja a partir deste tema.
O repositório gerado é independente: não existe upstream para puxar, e a
manutenção segue o fluxo de versão acima.

Antes de ir ao ar, troque o que é placeholder:

- `functions/ssr/content/settings.json` — nome, domínio, logo, cores, contato
- `functions/ssr/public/img/uploads/` — logo, ícone e banners (as fotos atuais
  vêm do Unsplash; créditos em `CREDITOS.md`)
- `functions/ssr/content/extra-pages/` — contato, trocas e termos
- `functions/ssr/public/robots.txt` — hoje bloqueia tudo, porque a demo é
  `noindex`
- `functions/*/config.json` — `storeId` e projeto Firebase (`npm run setup`)

> **Demo publicada:** [tema-despensa.web.app](https://tema-despensa.web.app) — `noindex`, com
> catálogo compartilhado de demonstração.

---

Documentação do starter: [SETUP.pt-BR.md](./SETUP.pt-BR.md) ·
[Cloud Commerce](https://github.com/ecomplus/cloud-commerce)
反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。