WordExpress快速上手：5个节点跑通React版WordPress全流程

WordExpress快速上手：5个节点跑通React版WordPress全流程

【免费下载链接】WordExpressWordPress using Node, React, GraphQL, and Apollo项目地址: https://gitcode.com/gh_mirrors/wo/WordExpress

想让 WordPress 长出一套现代前端的骨架？WordExpress 就是干这个的——它把 Node、Express、React、GraphQL、Apollo 这几样东西组合在一起，让你能用 GraphQL 优雅地查询 WordPress 数据库，再用 React 组件把页面渲染出来。这份 WordExpress 入门路线图会带你走完从环境准备到网页亮起的全部 5 个节点，全程只需要一台装了 Node.js 的电脑。

🧰 节点零：出发前先清点装备

正式动手前，先确认三样工具已经就位：

• Node.js（建议 v14 及以上）
• npm或yarn包管理器
• Git版本控制工具

快速自检一下环境，两条命令分别验证 Node 和 npm 是否可用：

node -v npm -v

能看到版本号，说明装备齐了。要是提示"command not found"，先去对应官网装好再回来，后面都是水到渠成的事。

🗺️ 先看全程地图：这趟旅程要经过哪些地方

在动手前先花 30 秒看清项目结构，后面遇到问题你会感谢自己。

• app/：前端 React 应用，组件、路由、样式都在这
• schema/：GraphQL schema 的定义与组装
• settings/：环境配置文件，dev.json管开发环境
• scripts/：一些辅助脚本
• dev.js：开发服务器入口，兼顾 Webpack 热更新和 GraphQL 服务

整个流程一句话概括：克隆代码 → 装依赖 → 连上 WordPress 数据库 → 启动开发服务器 → 浏览器打开页面。下面逐个节点展开。

📦 节点一：把项目拉回本地

打开终端，执行克隆命令，把项目源码搬到你的工作目录：

git clone https://gitcode.com/gh_mirrors/wo/WordExpress cd WordExpress

接着安装全部依赖，这一步会拉取 React、Apollo、GraphQL 等所有核心库，耐心等它跑完：

npm install

依赖清单定义在根目录的package.json里，想确认装了什么可以打开瞄一眼。

🔑 节点二：给应用接上 WordPress 的数据库

这是全程最关键的一步。WordExpress 本身不建站，它像一个"翻译官"，把你的 WordPress 数据库翻译成 GraphQL 接口。所以你需要准备一份 WordPress 数据，并且告诉它数据库地址和账号密码。

开发环境的数据库配置放在settings/dev.json里，默认长这样：

配置文件路径：settings/dev.json

{ "private": { "wp_prefix": "wp_", "database": { "name": "wpexpress_dev", "username": "root", "password": "", "host": "127.0.0.1" } } }

你需要把自己的数据库名、用户名、密码填进对应字段。留意wp_prefix，如果你的 WordPress 表前缀不是wp_，记得一并改掉，否则查询会对不上表名。设置加载逻辑在settings/settings.js，它根据NODE_ENV自动选择dev.json或prod.json，开发阶段我们只动dev.json即可。

🚀 节点三：点火，启动开发服务器

数据库就位后，执行下面的命令把开发服务器拉起来：

npm run startdev

它会用 babel-node 启动dev.js，同时带上 Webpack 的热重载。看到控制台输出这一行，就说明成功点亮了：

App is now running on http://localhost:3000

接着在浏览器里访问http://localhost:3000，WordExpress 的前端界面就会出现在眼前。开发时改动 React 组件，页面会自动刷新，不用手动重启。

🕳️ 节点四：踩坑预警与常见问题

这一程最容易出问题的地方，提前给你排掉：

• 端口被占：3000 端口被别的程序占用时，改dev.js顶部的APP_PORT常量换个端口，或者先释放占用进程。
• 数据库连不上：确认 MySQL 服务在跑、账号密码正确、目标数据库真实存在。WordExpress 只负责查询，不会替你创建数据库。
• 表前缀对不上：如果你站点的表前缀不是wp_，查询会静默失败，优先检查dev.json里的wp_prefix。
• npm install 太慢：可以换成国内镜像源，把下载速度拉起来，例如将 registry 指向淘宝镜像。
• Node 版本过旧：项目依赖较老，v14 以上一般都能顺利跑通，太新的版本如果报编译错误，考虑切回 LTS 版本。

✅ 节点五：验收清单与常用命令速查

页面亮起后，按下面这份清单验收一遍，确认旅程真正走通：

• http://localhost:3000能正常打开页面
• 页面里的文章、页面内容来自你的 WordPress 数据库
• 打开http://localhost:3000/graphiql能进入可视化查询界面
• 改一个组件文件，页面无需手动刷新自动更新

graphiql 界面是内置的福利，你可以直接在浏览器里写 GraphQL 查询，实时验证数据返回，这也是新手理解"GraphQL 查 WordPress"的最佳窗口。

日常开发还会用到这些命令，整理成速查表：

🧭 接下来往哪走

恭喜，你已经把 WordExpress 完整跑起来了。下一步可以从两个方向深入：一是去app/components/里看按钮、头部、文章列表这些现成组件，尝试改改样式；二是打开app/routes.js学着加自己的路由，把自定义的 React 页面挂上去。

动起手来比看十遍教程都管用。去把第一行自己的代码敲进去吧，祝你和 WordExpress 玩得愉快！

【免费下载链接】WordExpressWordPress using Node, React, GraphQL, and Apollo项目地址: https://gitcode.com/gh_mirrors/wo/WordExpress