Shopify Hydrogen-v1 入门教程：构建你的第一个电商前端应用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00540/article/details/148552820

Shopify Hydrogen-v1 入门教程：构建你的第一个电商前端应用

hydrogen-v1 React-based framework for building dynamic, Shopify-powered custom storefronts. 项目地址: https://gitcode.com/gh_mirrors/hy/hydrogen-v1

前言

Shopify Hydrogen 是一个专为电商定制的前端开发框架，它基于 React 构建，并针对 Shopify 平台进行了深度优化。本教程将带你从零开始，创建一个基础的 Hydrogen 商店前端应用。

环境准备

在开始之前，请确保你的开发环境满足以下要求：

Node.js 版本 16.14.0 或更高
包管理工具（Yarn 1.x 或 npm）
对 React、Vite 和 Tailwind CSS 有基本了解

项目创建

第一步：初始化项目

使用你喜欢的包管理工具创建新的 Hydrogen 项目：

# 使用 npm
npx @shopify/create-hydrogen@latest

# 或使用 yarn
yarn create @shopify/hydrogen

执行命令后，系统会提示你输入项目名称。创建完成后，进入项目目录：

cd your-project-name

第二步：启动开发服务器

启动开发服务器非常简单：

# 使用 npm
npm run dev

# 或使用 yarn
yarn dev

启动后，你可以在浏览器中访问 http://localhost:3000/ 查看默认的"Hello World"模板。

项目结构解析

让我们来看看 Hydrogen 项目的标准结构：

├── public/          # 静态资源目录
├── src/
│   ├── assets/      # 应用资产（如图标）
│   ├── routes/      # 页面路由组件
│   ├── App.server.jsx  # 应用根组件
│   └── index.css    # 全局样式
├── hydrogen.config.js  # Hydrogen 配置
├── index.html       # HTML 模板
├── jsconfig.json    # JavaScript 配置
├── package.json     # 项目依赖和脚本
├── README.md        # 项目说明
└── vite.config.js   # Vite 配置

定制你的应用

修改首页内容

打开 src/routes/index.server.jsx 文件，修改 Home 组件：

export default function Home() {
  return (
    <div>
      <h1>欢迎来到我的商店！</h1>
      <p>这是一个基于 Hydrogen 构建的电商前端</p>
      <p>
        Hydrogen 是 Shopify 推出的前端框架，
        专为构建高性能电商体验而设计。
      </p>
    </div>
  );
}

保存后，页面会自动刷新显示新内容。

添加样式

Hydrogen 默认支持 Tailwind CSS，让我们为页面添加一些样式：

首先安装 Tailwind 及其依赖：

# 使用 npm
npm install -D tailwindcss @tailwindcss/typography postcss autoprefixer
npx tailwindcss init -p

# 或使用 yarn
yarn add tailwindcss @tailwindcss/typography postcss autoprefixer
yarn tailwindcss init -p

配置 tailwind.config.js：

module.exports = {
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')],
}

在 src/index.css 中添加 Tailwind 指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

应用样式到组件：

export default function Home() {
  return (
    <section className="p-6 md:p-8 lg:p-12 max-w-3xl mx-auto">
      <h1 className="font-bold mb-4 text-4xl md:text-5xl text-indigo-600">
        欢迎来到我的商店！
      </h1>
      <p className="text-lg mb-6 text-gray-700">
        这是一个基于 Hydrogen 构建的电商前端
      </p>
      <div className="bg-gray-50 p-4 rounded-lg">
        <p className="text-gray-600">
          Hydrogen 是 Shopify 推出的前端框架，
          专为构建高性能电商体验而设计。
        </p>
      </div>
    </section>
  );
}