本项目是我在开发cc-debuger-2.x时，产生的中间产品，它能极大的提高插件开发效率。
本来打算过段时间再放出来的，但是在4.x许愿贴中看到有坛友讨论插件开发，我觉得我这个方案应该是有一定价值的，有幸的话，希望cocos creator 4.x能考虑采纳。同时我的另一插件cc-debuger，如有需要我也愿意无偿贡献给cocos
以下是正文：
项目定位
本项目是一套 Cocos Creator 插件开发模板，支持热重载、断点调试、vue项目开发体验，我愿称之为最强
核心理念 | 真传一句话
Cocos Creator 基于 Electron 内核，支持通过 Electron 弹窗加载网页。因此，我们只需专注开发 Vue 网页项目，为其补充 Node.js 能力与编辑器功能支持，即可快速实现完整插件功能！
选择本插件模板的理由
• 极致开发体验：纯 Vue + Vite 开发，享受现代前端工程化红利（HMR 热重载、断点调试）。
• 丰富的 UI 生态：直接调用 Vue 生态海量 UI 组件库（Element Plus、Naive UI 等），告别原生 UI 组件的局限性
• 高效迭代：代码修改秒级生效（热重载），开发效率提升 10086%
• 一套代码，通用cocos v3.x和cocos v2.x
唯一限制是无法直接使用 Cocos 编辑器原生 UI 组件
开源
模板代码已开源，欢迎star，欢迎pr： Github
您也可以选择在此购买插件，请作者吃碗猪脚饭： Cocos Store
功能演示
-
热重载示例
-
断点调试
跟chrome一样的使用方式，点击F12即打开DevTools，支持在.vue和.ts中进行断点调试
-
编辑器接口能力示例
其中，调用编辑器接口实例如下，本质是再插件上下文中eval相关代码指令：
export async function queryAssetInfoByUrl(url:string){
let cmdStr = ""
if(await isV2()){
const url = "db://internal/image/default_sprite.png"
cmdStr = `return Editor.assetdb.assetInfo('${url}');`
}else if(await isV3()){
const url = "db://internal/default_ui/default_sprite.png"
cmdStr = `return await Editor.Message.request('asset-db', 'query-asset-info', "${url}")`
}else{
return null
}
const ret = await _editotBridge.reqEval(cmdStr,true)
return ret
}
如何预览插件
面板/打开vue面板
注意，这种默认打开的本地html，而不是url网页地址，所以不享受热重载，热重载相关请继续阅读。
双版本目录结构（v3.x & v2.x）
两版本核心逻辑高度一致，均采用 Electron + WebSocket + Preload + Vite-Vue 技术栈，插件源码集中于 vite-vue-proj 目录。
v3.x 目录结构
cocos-v3-plugin-template-best/
├── @types/ # TypeScript 类型声明
├── i18n/ # 多语言资源（国际化支持）
├── src/ # Electron 主进程核心代码
│ ├── editor_ws_server.ts # WebSocket 服务（连接 Vue 网页与 Cocos 编辑器）
│ ├── electron_win.ts # Electron 窗口管理（创建/控制弹窗）
│ ├── main.ts # 主进程入口（初始化 Electron 窗口）
│ └── preload.js # 预加载脚本（桥接 Node.js 能力与 Vue 网页）
├── node_modules/ # 项目依赖
├── vite-vue-proj/ # 插件核心源码（Vue3 + Vite 开发目录）
├── web/ # 构建输出目录（发布后 Electron 加载此目录的静态网页）
├── package.json # 依赖管理与脚本配置（重点关注编辑器菜单入口）
├── tsconfig.json # TypeScript 配置
v2.x 目录结构
cocos-v2-plugin-template-best/
├── editor_ws_server.js # WebSocket 服务（v2 版本实现）
├── electron_win.js # Electron 窗口管理（v2 版本实现）
├── main.js # 主进程入口（v2 版本实现）
├── preload.js # 预加载脚本（v2 版本实现）
├── node_modules/ # 项目依赖
├── vite-vue-proj/ # 插件核心源码（Vue3 + Vite 开发目录）
├── web/ # 构建输出目录（发布后 Electron 加载此目录的静态网页）
└── package.json # 依赖管理与脚本配置（v2 版本）
开发快速上手指南
- 环境准备
确保已安装：
• Node.js
• Cocos Creator（v3.x 或 v2.x，根据目标版本选择）
- 安装依赖
下载模板后，进入 vite-vue-proj 目录（插件核心源码目录）：
cd vite-vue-proj
npm install # 安装 Vue 项目依赖
- 开发模式（热重载）
启动 Vue 项目开发服务器，享受实时预览：
cd vite-vue-proj
npm run dev # 启动 HMR 热重载
- 发布准备
构建生产环境代码（生成压缩后的静态网页）：
cd vite-vue-proj
npm run build # 输出至 ../web 目录（发布时需打包此目录）
- 关键配置（必看！）
发布前需修改 Electron 窗口加载代码，切换「开发模式」与「发布模式」的加载方式：
在 electron_win.ts（v3）或 electron_win.js（v2）中：
// 开发阶段，建议置为true,以享受热重载
const isDev = false;
if (isDev ) {
//开发模式：加载 Vue 本地服务（热重载）
_win.loadURL('http://localhost:5173/');
} else {
// 发布模式：加载本地构建的静态网页（打包后）
const filePath = path.join(pluginPath, "web/index.html");
_win.loadFile(filePath);
}
其他强烈推荐
用更高效的方式，开发更强大的 Cocos 插件！
联系作者
- QQ：1451784145
- QQ群：581563429