瓜奇如何创建自定义组件（新手教程）

此教程为小白教程，我也是小白一步一步摸索来的，按步骤来应该是没问题的。更好的教程可以等春哥出。源码以及插件请在上方下载~（包括前端client源码，wp插件guaqi-postlist）

请勿搬运，尊重一下劳动成果

第一步

新建guaqi文件夹，把前端源码和插件解压到guaqi文件夹（client文件夹和guaqi-postlist文件夹）

第二步

使用AI（我用的vscode）下载地址：https://code.visualstudio.com/

vscode下载安装好后记得安装一个中文扩展-重启

左上角—文件—打开文件夹—选择guaqi文件夹

自己用的什么ai再去扩展里面搜索对应的ai扩展，我用的codex和claude code所以都装了（api用的中转站的）

安装好之后右侧会出来对应的聊天界面

第三步

让ai分析guaqi\guaqi-postlist\docs下面的CUSTOM-COMPONENT-GUIDE.md文件

分析完成后直接要ai开发一个自定义组件，可以让ai先简单开发一个小组件尝试一下

开发好的组件会在guaqi\client\layers\custom\app\components\custom文件夹下面

第四步（最重要的）

本地如何搭建 nuxt 环境

先装运行环境
Windows 上至少要有：

• Node.js 20 LTS

• pnpm

  node.js下载：https://nodejs.org/zh-cn/download/

  

安装nodejs完成后在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口。

输入node –version显示node.js的版本，说明已经安装成功了。
输入npm -v显示npm的版本，说明自带的npm就安装成功了。

配置环境变量：请安装教程来（重要）
https://cloud.tencent.com/developer/article/1620332?policyId=1004

环境配置好后

打开guaqi\client文件夹下面的.env文件修改配置

API_BASE=http/s://你的后端域名/graphql
API_SECRET=你后端瓜奇插件里面的密钥

端口如果没有变动就不用改，其他的都不用变动

修改完保存

然后打开Windows powershell，以管理员身份运行

输入

第一步：切换到指定目录：cd C:\Users\xxxx\Desktop\guaqi\client（cd 后面换成你的client文件夹目录）

第一步执行安装（有环境可以忽略）：pnpm.cmd install

第二步执行编译：pnpm.cmd build

编译时间可能比较长，请耐心等待

这样就是编译好了，完成的文件在guaqi\client\.output文件夹下面

把编译好的3个文件压缩.output.zip，以及插件也压缩好guaqi-postlist.zip

1、把插件上传到/wp-content/plugins目录下面然后解压

2、把编译好的压缩文件上传到node项目里面已经搭建好的瓜奇前端文件夹然后解压覆盖

3、重启Node项目，进入wp后台启用插件（插件名称是Guaqi Post List）

第五步

去瓜奇官网进入构建器，选择自定义组件拖到想要展示的地方

然后填写好组件名称以及模块数据（这些ai都会给你）设置完成后点击发布就完成了~

弄了自定义组件怎么更新？

首先还是先找春哥要最新版本的前端源码，

1、先备份好自己的\guaqi\client\layers\custom目录直接压缩，备份好后把原来的client删除

2、再把最新版本的解压缩到client文件夹

3、覆盖\guaqi\client\layers\custom目录

然后再重新编译上传就完成更新了~

请勿搬运，尊重一下劳动成果，我看还是有很多人不会弄，等后续有空了录制一个视频教程~