WooNuxt 项目教程

1. 项目介绍

WooNuxt 是一个基于 Nuxt 3 和 WooCommerce 的静态电子商务前端解决方案。它的目标是提供一个现代化、快速且对 SEO 友好的 WooCommerce 前端。WooNuxt 使用 WPGraphQL API 来获取所有必要的数据，并且是完全可定制的，可以通过自定义组件和模块进行扩展。

主要特点

• 现代化的前端：基于 Nuxt 3，提供高性能的前端体验。
• SEO 友好：优化搜索引擎排名。
• 完全可定制：支持自定义组件和模块。
• WPGraphQL API：使用 WPGraphQL API 获取数据。

2. 项目快速启动

2.1 安装依赖

首先，确保你已经安装了 Node.js 和 npm。然后，克隆项目并安装依赖：

git clone https://github.com/scottyzen/woonuxt.git
cd woonuxt
npm install

2.2 配置环境变量

在项目根目录下创建一个 .env 文件，并添加以下内容：

GQL_HOST=https://your-wordpress-site.com/graphql

2.3 启动开发服务器

运行以下命令启动开发服务器：

npm run dev

2.4 部署

你可以将 WooNuxt 部署到任何支持 Node.js 的托管服务上。以下是一个简单的部署示例：

npm run build
npm run start

3. 应用案例和最佳实践

3.1 自定义页面

WooNuxt 使用 Nuxt 的层（layers）功能，使得自定义页面变得非常简单。例如，你可以在 pages 目录下创建一个 contact.vue 文件，来覆盖默认的联系页面。

<!-- pages/contact.vue -->
<template>
  <div>
    <h1>联系我们</h1>
    <p>这是自定义的联系页面。</p>
  </div>
</template>

3.2 扩展功能

你可以通过添加自定义模块来扩展 WooNuxt 的功能。例如，创建一个新的模块来处理用户认证：

// modules/auth.ts
export default defineNuxtModule({
  setup(options, nuxt) {
    nuxt.hook('ready', () => {
      console.log('Auth module is ready');
    });
  },
});

然后在 nuxt.config.ts 中注册这个模块：

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['~/modules/auth'],
});

4. 典型生态项目

4.1 WPGraphQL

WPGraphQL 是一个免费的 WordPress 插件，它为 WordPress 提供了一个 GraphQL API。WooNuxt 使用 WPGraphQL 来获取所有必要的数据。

4.2 WooGraphQL

WooGraphQL 是一个为 WooCommerce 提供 GraphQL API 的插件。它与 WPGraphQL 结合使用，使得 WooNuxt 能够无缝集成 WooCommerce 的功能。

4.3 WPGraphQL CORS

WPGraphQL CORS 插件允许你为 WPGraphQL 启用 CORS，这对于开发和测试非常有用。

通过这些生态项目的支持，WooNuxt 能够提供一个强大且灵活的电子商务前端解决方案。