跳到主要内容
备注

这篇翻译之后英文原文有更新，内容可能已过时。

使用你的编程智能体​

首先为你的编程智能体安装 Data Client 的 skill。没有它们，智能体能把基础部分做对，但会遗漏其余部分，例如实时 manager 和测试 fixture。

终端
claude plugin marketplace add reactive/data-client
claude plugin install data-client@data-client
在终端中运行

然后告诉你的智能体：

复制给编程代理的提示词

安装插件​

在创建应用时安装 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。

你的编程智能体也可以通过 TanStack Intent 加载这些包附带的 skill，并与你安装的版本相匹配：

npm install -D @tanstack/intent
npx intent install
在终端中运行
下一步：定义数据 »

示例​

探索 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 构建。

编辑此页
最后由 Nathaniel Tucker 于 更新