### [瓜奇如何创建自定义组件（新手教程）](https://guaqi.com/article/76143) **Published:** 2026-05-19T00:59:11 **Author:** 香蕉 **Excerpt:** 瓜奇新手教程，手把手教你创建自定义组件，从环境搭建到编译部署，小白也能轻松上手。 ### 此教程为小白教程，我也是小白一步一步摸索来的，按步骤来应该是没问题的~ ### 更好的教程可以等春哥出~ ### 源码以及插件请在上方下载~（包括前端client源码，wp插件guaqi-postlist） ### 请勿搬运，尊重一下劳动成果 ### 第一步 新建guaqi文件夹，把前端源码和插件解压到guaqi文件夹（client文件夹和guaqi-postlist文件夹） ![瓜奇如何创建自定义组件（新手教程）](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg) ### 第二步 使用AI（我用的vscode）下载地址：[https://code.visualstudio.com/](https://code.visualstudio.com/) vscode下载安装好后记得安装一个中文扩展-重启 ![瓜奇如何创建自定义组件（新手教程）](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg) 左上角—文件—打开文件夹—选择guaqi文件夹 ![瓜奇如何创建自定义组件（新手教程）](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg) 自己用的什么ai再去扩展里面搜索对应的ai扩展，我用的codex和claude code所以都装了（api用的中转站的） ![瓜奇如何创建自定义组件（新手教程）](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg) 安装好之后右侧会出来对应的聊天界面 ![瓜奇如何创建自定义组件（新手教程）](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg) ### 第三步 > 让ai分析guaqi\\guaqi-postlist\\docs下面的CUSTOM-COMPONENT-GUIDE.md文件 ![瓜奇如何创建自定义组件（新手教程）](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg) ![瓜奇如何创建自定义组件（新手教程）](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg) 分析完成后直接要ai开发一个自定义组件，可以让ai先简单开发一个小组件尝试一下 开发好的组件会在guaqi\\client\\layers\\custom\\app\\components\\custom文件夹下面 ### 第四步（最重要的） 本地如何搭建 nuxt 环境 先装运行环境 Windows 上至少要有： - Node.js 20 LTS - pnpm node.js下载：[https://nodejs.org/zh-cn/download/](https://nodejs.org/zh-cn/download/) ![瓜奇如何创建自定义组件（新手教程）](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg) 安装nodejs完成后在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口。 输入node –version显示node.js的版本，说明已经安装成功了。 输入npm -v显示npm的版本，说明自带的npm就安装成功了。 ![瓜奇如何创建自定义组件（新手教程）](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg) **配置环境变量：请安装教程来（重要）** [https://cloud.tencent.com/developer/article/1620332?policyId=1004](https://cloud.tencent.com/developer/article/1620332?policyId=1004) 环境配置好后 打开guaqi\\client文件夹下面的.env文件修改配置 ```dotenv API_BASE=http/s://你的后端域名/graphql API_SECRET=你后端瓜奇插件里面的密钥 ``` 端口如果没有变动就不用改，其他的都不用变动 修改完保存 然后打开Windows powershell，以管理员身份运行 ![瓜奇如何创建自定义组件（新手教程）](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg) 输入 第一步：切换到指定目录：cd C:\\Users\\xxxx\\Desktop\\guaqi\\client（cd 后面换成你的client文件夹目录） 第一步执行安装（有环境可以忽略）：pnpm.cmd install 第二步执行编译：pnpm.cmd build 编译时间可能比较长，请耐心等待 ![瓜奇如何创建自定义组件（新手教程）](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg) 这样就是编译好了，完成的文件在guaqi\\client\\.output文件夹下面 ![瓜奇如何创建自定义组件（新手教程）](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg) ![瓜奇如何创建自定义组件（新手教程）](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg) 把编译好的3个文件压缩.[output.zip](http://output.zip)，以及插件也压缩好[guaqi-postlist.zip](http://guaqi-postlist.zip) 1、把插件上传到/wp-content/plugins目录下面然后解压 ![瓜奇如何创建自定义组件（新手教程）](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg) 2、把编译好的压缩文件上传到node项目里面已经搭建好的瓜奇前端文件夹然后解压覆盖 ![瓜奇如何创建自定义组件（新手教程）](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg) 3、重启Node项目，进入wp后台启用插件（插件名称是**Guaqi Post List**） ### 第五步 去瓜奇官网进入构建器，选择自定义组件拖到想要展示的地方 ![瓜奇如何创建自定义组件（新手教程）](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg) 然后填写好组件名称以及模块数据（这些ai都会给你）设置完成后点击发布就完成了~ ### 弄了自定义组件怎么更新？ 首先还是先找春哥要最新版本的前端源码， 1、先备份好自己的\\guaqi\\client\\layers\\custom目录直接压缩，备份好后把原来的client删除 2、再把最新版本的解压缩到client文件夹 3、覆盖\\guaqi\\client\\layers\\custom目录 然后再重新编译上传就完成更新了~ ## 请勿搬运，尊重一下劳动成果 **Tags:** Node.js, 教程, 瓜奇更新 **Categories:** 瓜奇 **Comments:** **香蕉:** 看不到教程的自己退出登录，不要自己瞎玩，不懂的来微信群里问😰 **M.z:** 成功的 500 报错了😂 **Jack:** 这个教程怎么使用 **以梦为马:** 感谢分享 手动点赞 **441022876:** 自定义模块确实好用，配合这个教程完美。 **halal:** 已经成功做出第一个组件了，感谢分享！ **二狗啊:** 教程很详细，但环境变量那一步能不能再具体点？ **UI设计 定制软件 网站搭建:** AI写组件这个思路太棒了，省了好多事。 **q2148181340:** 终于有小白教程了，之前看官方文档一脸懵，这个步骤很清晰，明天试试。 ---