加载项的快速开发 Vue 3 调试

chayuan-wps 加载项基于 Vue 3 Vite 开发。这一篇讲快速开发流程。技术栈Vue 3。组件框架。Vite。构建工具。开发体验快。TypeScript。类型安全。Tailwind CSS。样式。PiniaJS。状态管理。WPS Office Add-in API。WPS 集成。项目结构chayuan-wps/ package.json vite.config.ts src/ main.ts # 入口 components/ # Vue 组件 AIAssistantDialog.vue # 主对话框 KbSelectorDialog.vue # KB 选择 KbSourceStrip.vue # KB 状态条 services/ kb/ # KB 相关服务 llm.js # LLM 调用 wpsAPI.js # WPS API 封装 stores/ # Pinia stores utils/ public/ manifest.xml # WPS 加载项元数据开发模式cdchayuan-wpsnpminstallnpmrun devVite 启动 dev server端口 3000。WPS Office 加载项指向 dev URLhttp://localhost:3000。修改 .vue 文件 → 热重载HMR。WPS 内的加载项秒级刷新。开发循环快。WPS API 调试加载项用 WPS API 操作文档。constdocWpsApplication.ActiveDocument;consttextdoc.Range.Text;WPS API 在 WPS 进程内。Vite dev server 在独立进程。两者通过 WPS 加载项 SDK 桥接。调试技巧技巧一浏览器 DevTools。Chrome / Edge 开 chrome://inspect 或类似。WPS 加载项的 WebView 是 Chromium 内核。能用 DevTools 看 console、断点、性能。技巧二vue-devtools。Vue 官方调试扩展。装在浏览器里。技巧三WPS API mock。开发时不每次都开 WPS。// dev 环境 mockconstWpsApplicationprocess.env.NODE_ENVproduction?window.WpsApplication:mockWpsApi;让 chayuan-wps 在浏览器里独立调试。跟 察元AI智能体 联调chayuan-wps 调 察元AI智能体 后端。开发时。启动 察元AI智能体dev 或 release 都行。chayuan-wps Vite dev 起来。chayuan-wps 的 fetch 调 127.0.0.1:62581 走真后端。完整链路联调。测试单元测试。VitestVite 配套。// test/KbSelectorDialog.spec.tsimport{describe,it,expect}fromvitest;import{mount}fromvue/test-utils;importKbSelectorDialogfrom/components/KbSelectorDialog.vue;describe(KbSelectorDialog,(){it(shows KB list,(){constwrappermount(KbSelectorDialog,{...});expect(wrapper.findAll(.kb-item).length).toBeGreaterThan(0);});});E2E 测试。Playwright。模拟用户操作 WPS 加载项。复杂但全。LintESLint Vue Plugin。npx eslintsrc/**/*.{vue,ts,js}--quietCI 强制。打包npmrun buildVite 生成 dist/。包含 HTML / JS / CSS。打包成 .wpsaddinWPS 加载项格式。chayuan-wps_3.0.0.wpsaddin ├─ manifest.xml ├─ dist/ │ ├─ index.html │ ├─ assets/ │ └─ ...发布到 WPS 商店WPS 加载项市场。提交 .wpsaddin 包 描述 截图。审核通过后用户能在 WPS 商店搜到 chayuan-wps 安装。内部分发某些政企不让走公共商店。chayuan-wps 提供内部分发。WPS 客户端配置内部加载项源。WPS - 加载项 - 高级 - 添加加载项源 URL: http://addins.corp.com/chayuan-wps员工 WPS 从内部源拉。国产化场景WPS 加载项市场是金山自家。提交后通过审核。chayuan-wps 在公共市场可用。某些政企走内部分发。chayuan-wps 配置支持。chayuan-server 的对应chayuan-server 跟 chayuan-wps 通信走 OpenAI 兼容 API。chayuan-wps 的开发流程不变。总结加载项的快速开发是 chayuan-wps 工程上的开发者友好性。免费开源的AI软件 让 加载项开发 跟普通 Vue 应用一样简单。chayuan-wps 的 Vite HMR DevTools mock 让开发体验流畅。