快速开始

你可以选择从模版开始，或者将 Guii.AI DevTools 安装到现有的项目中。

从模版开始

我们提供了一个 Vue + Vite 模版：🐌 guiiai/starter-vue

通过它。你可以快速在一个新项目中试试 Guii.AI DevTools。

安装到现有的项目中

通过运行以下命令将 @guiiai/core 安装到您的项目依赖项中：

@antfu/ni

ni @guiiai/core -D

pnpm

pnpm add @guiiai/core -D

npm

npm install @guiiai/core -D

yarn

yarn add @guiiai/core -D

使用 Vite

Vite 是现代基于 JavaScript 的开发工具，为了提升网页应用的开发体验而设计。为了使用 Guii.AI Vite 插件，请阅读 Vite 文档 熟悉更多细节.

用法

配置 Vite 插件

确保已创建 vite.config.ts

如果您已经了解 vite.config.ts 是什么并且已经创建了它，您可以跳过此准备步骤，直接跳转到下一步在 vite.config.ts 中配置插件。

首次接触 vite.config.ts？

首先，vite.config.ts 是一个为 Vite 构建工具的配置文件。它允许开发人员构建和转换项目中的资产、内容和数据。

我们的插件依赖于 Vite，Webpack，以及 Rspack 这样的带有开发服务器的工具，因此我们需要在 Vite 的配置文件中配置插件。

因此，请在您的项目的根目录中创建一个单独的 vite.config.ts 文件：

在 vite.config.ts 中配置插件

在位于项目根目录的独立的 Vite 配置文件（也就是 vite.config.ts 中），我们需要导入 GuiiAIDevToolsVitePlugin 插件并进行正确配置：

如果你未曾见过这种红色绿色的标记

这是一种用于在用户界面（UI）上展示差异对比的标记规则。

红色的部分是你需要删除的，通常也以「减号 -」来表示，或者你可以理解为：这行文本原本的模样；

绿色的部分是你需要添加的，通常也以「加号 +」来表示，或者你可以理解为：这行文本将会被修改为的模样。

如果你想要了解更多有关「差异对比」的知识，你可以查看这篇有关 diffutils 历史的英文回答和 Git 的文档

是 TypeScript 用户吗？

至少需要配置下面的几个选项：

{
  "compilerOptions": {
    "module": "ESNext", 
    "moduleResolution": "Bundler", 
  },
  "include": [
    "**/.vitepress/**/*.ts",
    "**/.vitepress/**/*.mts",
    "**/.vitepress/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}

其中的

• module 选项指定了 JavaScript/TypeScript 的模块格式，Nolebase Integrations 默认使用与 ESNext 相兼容的模块格式。
• moduleResolution 选项指定了模块解析策略，因为所有的 Nolebase Integrations 插件都遵循最新的 ECMAScript 规范与导出声明，如果你遇到了 Cannot find module ... or its corresponding type declarations 的错误，你可能需要将 moduleResolution 设置为 Bundler。

如果你想要更多的配置，可以参考下面的示例：

{
  "compilerOptions": {
    "jsx": "preserve",
    "lib": [
      "DOM",
      "ESNext"
    ],
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "strict": true,
    "strictNullChecks": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noEmit": true,
    "removeComments": false,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "verbatimModuleSyntax": true,
    "skipLibCheck": true
  },
  "include": [
    "**/.vitepress/**/*.ts",
    "**/.vitepress/**/*.mts",
    "**/.vitepress/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}

import {  } from 'node:path'
import {  } from 'vite'
import {  } from '@guiiai/core'

export default (() => {
  return {
    : [ 
      (), 
    ]
    // other vite configurations...
  }
})

环境推荐

我们推荐使用 StarterVue 来开始您的第一个项目，它集成了 guii.ai 以及所需要的所有环境。

常见问题

为什么会提示我需要订阅？

请在 Devtools 的设置面板中填写自己的 API key 以及 BaseURL，并选择正确的模型，这样就可以正常使用了。

支持本地模型吗？

暂时不支持使用本地的 LLM 模型，因为 Guii Agent 部署在远程服务器上，需要先对提示词进行处理。

为什么我提交的修改没有生效？

我们插件生成的代码使用了以下几个包，请安装以后再尝试刷新页面生效：

• vue
• radix-vue
• unocss
• @vueuse/core
• @vueuse/shared

未来我们会提供更多的选择，敬请期待。

React 能用吗？

未来会支持，敬请期待。

支持哪些组件库？

目前我们支持的组件库为 radix-vue 和 shadcn/vue，更多组件库支持敬请期待。

还有更多问题？

由于目前处于测试版本，请加入我们的 Discord 服务器与我们联系，我们会在 24 小时之内回复您。

贡献者

RainbowBird

页面历史

最后编辑于 2 分钟前

查看完整历史

4cdd3d6-feat: environment detection tags (#76)