使用你的编程智能体进行设置

Claude Code

终端

claude plugin marketplace add reactive/data-client --scope project \
  --sparse .claude-plugin .agents/skills
claude plugin install data-client@data-client --scope project

在终端中运行

复制给 Claude Code 的提示词

Cursor

复制给 Cursor 的提示词

然后，在新的聊天中：

复制给 Cursor 的提示词

Codex

终端

codex plugin marketplace add reactive/data-client \
  --sparse .claude-plugin --sparse .agents/skills
codex plugin add data-client@data-client

在终端中运行

复制给 Codex 的提示词

Other agents

复制给编程代理的提示词

无论你使用哪一种，你的智能体都会运行 Data Client 的设置 skill，它会安装这些包、接好 provider，并链接这些包附带的 skill，让你的智能体了解最新的 API，例如实时 manager 和测试 fixture。这就是全部设置，你可以直接前往定义数据。

手动设置

这些步骤是不借助智能体的相同设置。如果你的智能体已运行了设置，请跳过它们：它已经完成了每一步。

安装插件

在创建应用时安装 Vue 插件。

npm install --save @data-client/vue @data-client/rest

在终端中运行

main.ts

import { createApp } from 'vue';
import { DataClientPlugin } from '@data-client/vue';
import App from './App.vue';

const app = createApp(App);
app.use(DataClientPlugin);
app.mount('#app');

app.use(DataClientPlugin, options) 可以选择性地覆盖 managers、initialState、Controller 和 gcPolicy。全部选项请参阅 DataClientPlugin。

链接智能体的 skill

这些包为你的编程智能体附带了 skill，与你安装的版本相匹配。链接它们，让 Claude Code、 Cursor 和 Codex 加载它们，并提交这些链接：

npx --no data-client-skills

在终端中运行

在添加、移除或升级 @data-client 包后再次运行它。详情请参阅 Agent Skills。

下一步：定义数据 »

示例

探索 vue-todo-app 示例

在 StackBlitz 中打开查看源码

正在加载演示…

更多演示

支持的工具

TypeScript 4.0+

TypeScript 是可选的，但要获得完整的类型约束，至少需要 4.0 版本并开启 strictNullChecks。

@data-client/vue 需要 TypeScript 4.5 或更高版本，因为 Vue 自身的类型也有此要求。

旧版浏览器支持

如果你的应用面向较旧的浏览器（几年甚至更久之前的），请务必加载 polyfill。通常的做法是使用 @babel/preset-env useBuiltIns: 'entry'，并在应用入口处导入 core-js。

这样可以确保应用的打包产物中只包含目标浏览器所需的 polyfill。

例如 TypeError: Object.hasOwn is not a function

Internet Explorer 支持

如果你看到 Uncaught TypeError: Class constructor Resource cannot be invoked without 'new'，请按照说明为包添加旧版浏览器支持

Vue 3

@data-client/vue 支持 Vue 3，并基于组合式 API 构建。