SuperAPI AI 工具集

framer-install-auth

编程与开发

查看项目

更新于 10-15 23:26

技能介绍

用途:帮助开发者完成 Framer 的安装与认证配置,覆盖两条开发路径——运行在 Framer 编辑器内的插件(Plugin),以及通过 WebSocket 从任意 Node.js 服务器访问的 Server API。

主要能力:区分集成类型(Plugin 使用 framer-plugin 包,Server API 使用 framer-api 包,另有 Code Components 与 Code Overrides);搭建插件项目脚手架;建立 Server API 连接并读取 CMS 集合;配置环境变量;验证插件与 API 连接。

使用方式:前置条件为 Node.js 18+、Framer 账号,Server API 还需站点设置中的 API 密钥。插件初始化命令:npx create-framer-plugin@latest my-plugin,随后 cd my-plugin、npm install、npm run dev,生成预配置 framer-plugin 的 Vite + React 项目。Server API 安装:npm install framer-api,在服务端通过 framer.connect 传入 apiKey 与 siteId 建立连接,可调用 getCollections 等方法。环境变量写入 .env(FRAMER_API_KEY、FRAMER_SITE_ID),并将 .env、.env.local 加入 .gitignore。插件验证:在 Framer 中打开项目,点击 Plugins > Development 选择本地插件,开发服务器会热重载到编辑器。

适用场景:构建编辑器插件、无头 CMS 同步、CI/CD 发布、画布自定义组件与行为覆盖。

限制与错误处理:插件不显示通常是开发服务器未运行,需执行 npm run dev 并重载 Framer;API 密钥无效需在站点设置重新生成;WebSocket 连接失败需允许出站 WSS;提示 framer-plugin not found 需运行 npm install framer-plugin。资料未提供具体收费、价格与平台支持范围。