NuxtVue电商

nuxthub-ecommerce — Nuxt 电商模板

作者 ratracegrad

基于 NuxtHub 的电商起步模板，使用 NuxtUI Pro 构建界面，并通过 Cloudflare 数据库提供后端数据支持。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

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

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

全部页面与视图 3

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

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

值得关注的模板亮点

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

01

使用 NuxtHub 数据库，README 中写作 Cloudflare R1

02

界面基于 NuxtUI Pro

03

支持明暗模式

04

使用 TypeScript 与 Eslint

05

技术栈为 Nuxt v4、NuxtHub 和 NuxtUI Pro

06

提供 server/tasks 中的 db:seed 种子脚本

模板详细介绍

这是一个 NuxtHub 起步模板，用于演示带后端数据库的电商商店功能。README 说明其功能包括使用 Cloudflare R1 的 NuxtHub 数据库、NuxtUI Pro 界面、明暗模式、TypeScript 和 Eslint；技术栈为 Nuxt v4、NuxtHub 和 NuxtUI Pro。

使用前需要克隆仓库、安装依赖并运行开发命令，同时把 .env.example 复制为 .env，填入 NUXT_HUB_PROJECT_KEY 和 NUXT_UI_PRO_LICENSE。数据库需要通过 Nuxt DevTools 中的 db:seed 任务填充示例商品数据。部署方面，README 提供 npx nuxthub deploy 命令，并说明可参考 Cloudflare Pages CI 的部署方式。

README 未提供商品管理、购物车、结算、支付、订单或用户认证等具体功能的说明，也未说明模板的生产就绪程度。

Nuxt电商

适合你的项目吗？

适用场景

  • 作为学习 NuxtHub 数据库与电商后端结合的起步项目
  • 在本地搭建带示例商品数据的电商演示环境
  • 通过 NuxtHub 部署到 Cloudflare 账户
  • 作为基于 NuxtUI Pro 构建商店界面的起点

适合人群

  • 希望了解 NuxtHub 电商模板结构的开发者
  • 使用 Nuxt v4 与 NuxtUI Pro 的前端开发者
  • 需要带数据库种子脚本的电商演示项目的人员

上手与定制指南

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

  1. 1

    克隆仓库后使用 pnpm install 或同类包管理器安装依赖

  2. 2

    将 .env.example 复制为 .env，并填写 NUXT_HUB_PROJECT_KEY 与 NUXT_UI_PRO_LICENSE

  3. 3

    运行 pnpm dev 启动开发服务器

  4. 4

    在 Nuxt DevTools 的 Tasks 中运行 db:seed 任务以填充示例商品数据

  5. 5

    可使用 npx nuxthub deploy 部署，或参考 NuxtHub 文档了解 Cloudflare Pages CI 部署方式

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
  • 界面使用 NuxtUI Pro，需自行获取 NuxtUI Pro 授权；免费代码不包含该付费 UI 库的授权。
  • 技术栈依赖 NuxtUI Pro，属于付费组件库，使用前需单独购买授权。
  • 运行需配置 NUXT_HUB_PROJECT_KEY，即需要 NuxtHub 项目密钥。
  • 运行需配置 NUXT_UI_PRO_LICENSE，即需要 NuxtUI Pro 许可证密钥。
  • 部署到 Cloudflare 账户需使用 NuxtHub 服务，可能涉及该托管服务的账户与费用。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

- NuxtUI Pro for the UI

README 原文

- NuxtUI Pro

README 原文

NUXT_HUB_PROJECT_KEY=<YOUR_KEY_HERE>

README 原文

NUXT_UI_PRO_LICENSE=<YOUR_KEY_HERE>

README 原文

You can deploy this project on your Cloudflare account for free and with zero configuration using [NuxtHub](https://hub.nuxt.com).

README 原文
https://github.com/ratracegrad/nuxthub-ecommerce/blob/main/LICENSEhttps://github.com/ratracegrad/nuxthub-ecommerce/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

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

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

这个项目需要核对什么

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

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

审核声明: codex-user-requested-batch-review-20261017 · 2026-10-16

查看当时使用的来源资料

SHA-256: 4f6b78f55446d9df88728cfffd9aca10e1b1c6538ab2298d7d50ae16dd599cce

2026-10-13T08:50:34.379Z

来源文件 / 仓库
# NuxtHub eCommerce Starter Template

This starter template is a NuxtHub template that demonstrates the functionality of an eCommerce store with a backend database.

## Demo Video

Watch the demo video here: (be sure to turn on volume)

https://github.com/user-attachments/assets/4992d551-1ac3-413e-9ddc-ddba5d8c66e6

## Features

- NuxtHub Database using Cloudflare R1
- NuxtUI Pro for the UI
- Light and Dark mode
- Typescript
- Eslint

## Stack

- Nuxt v4
- NuxtHub
- NuxtUI Pro

## Setup

1. Clone this repository to your local machine.
2. Install dependencies using the command `pnpm install` or your favorite package manager.
3. Run the application with the command `pnpm dev` or your favorite package manager.

> If you don't have pnpm installed, run: `corepack enable pnpm`

## Environment Variables

Copy the `.env.example` file to `.env` and fill in the values.

NUXT_HUB_PROJECT_KEY=<YOUR_KEY_HERE>

NUXT_UI_PRO_LICENSE=<YOUR_KEY_HERE>

## Development

```bash
pnpm dev
```

## Seeding the database

To get your store up and running, you need to seed the database with some products.

I have included a seed script in the `server/tasks` folder.

To run the seed task, start your dev server and open the Nuxt DevTools. Go to Tasks and you will see the `db:seed` task ready to run. This will add the seed data to your database and give you products to work with.

## Deploy

You can deploy this project on your Cloudflare account for free and with zero configuration using [NuxtHub](https://hub.nuxt.com).

```bash
npx nuxthub deploy
```

It's also possible to leverage Cloudflare Pages CI for deploying, learn more about the different options on https://hub.nuxt.com/docs/getting-started/deploy

Learn more about remote storage on https://hub.nuxt.com/docs/getting-started/remote-storage

## Contribution

Contributions are welcome! Feel free to open an issue to report a bug or submit a feature request via a pull request.
反馈内容错误

看看同类模板

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

nitrogen

nitrogen

⚡️ A Nuxt 4 Shopify template based on Hydrogen

Nuxt · 电商

nuxt-starter-prismic-farbe

nuxt-starter-prismic-farbe

A 3D eCommerce website template powered by Nuxt and Prismic

Nuxt · 电商

thunder

thunder

Thunder 是一个基于 Nuxt 3 构建的电商前端应用模板，目前处于积极开发阶段，适合作为在线商店的起点。

Nuxt · 电商

payment-gateway-starter-web

payment-gateway-starter-web

Nuxt 4 + Nuxt UI storefront and admin dashboard for payment-gateway-starter (Xendit / Midtrans, QRIS, VA, e-wa…

Nuxt · 后台

ecommerce-template

ecommerce-template

E-commerce store template (Nuxt): coffee roaster shop with product options, subscriptions, cart drawer and dem…

Nuxt · 电商

tema-alinhavo

tema-alinhavo

Tema Cloud Commerce para moda feminina

Astro · 电商