# 快速开始

`timi-tdesign-mobile` 是面向移动端的 Vue 3 业务组件库，底层复用 `timi-web` 的编辑器与内容渲染能力，UI 基于 TDesign Mobile。

## 安装

```sh
pnpm add timi-tdesign-mobile tdesign-mobile-vue
```

## 按需引入

组件在 `<script setup>` 中导入后即可在模板里使用，这是推荐方式：

```vue
<script lang="ts" setup>
import { ref } from "vue";
import { CodeEditor } from "timi-tdesign-mobile";

const code = ref("const answer = 42;");
</script>

<template>
	<code-editor v-model="code" language="typescript" />
</template>
```

## 全局注册

每个组件都带有 `install` 方法，可以单独注册为全局组件：

```ts
import { createApp } from "vue";
import { CodeEditor, TiptapEditor } from "timi-tdesign-mobile";

const app = createApp(App);
app.use(CodeEditor);
app.use(TiptapEditor);
```

## 必须注册 v-popup 指令

富文本工具栏等组件内部使用了 `timi-web` 的 `v-popup` 指令，且用在组件模板里，宿主的应用入口需要注册一次：

```ts
import TimiWebUI, { VPopup } from "timi-web";

app.use(TimiWebUI);
app.directive("popup", VPopup);
```

漏掉这一步不会报错，但工具栏的悬停提示会静默失效。

## 引入样式

```ts
import "timi-tdesign-mobile/style.css";
```

该样式入口已包含 TDesign 定制与编辑器正文样式，`timi-web` 的样式也会一并带入。

**另外还需要引入 TDesign Mobile 自己的样式**，注意要引完整包而不是 `es/style/index.css`——后者只含全局 token，不含任何组件类：

```ts
import "tdesign-mobile-vue/dist/tdesign.css";
```

## 数据与回调

文章、通知类组件只约束对象的最小字段，业务对象上的其他字段会原样保留。上传与附件地址通过回调注入，库本身不绑定任何接口实现：

```vue
<article-editor
	:model-value="article"
	:upload-image="uploadImage"
	:upload-video="uploadVideo"
	:resolve-attachment-url="resolveAttachmentUrl"
	@update:model-value="article = $event"
/>
```

没有附件上传需求时，可以不传上传回调。

## AI 对话

对话能力由 `useAiChat` 组合式函数提供，组件只负责渲染：

```ts
import { useAiChat } from "timi-tdesign-mobile";

const { messages, isGenerating, sendMessage } = useAiChat({
	request: ({ message, signal }) => fetchSseReply(message, signal)
});
```

详见 [AiChatPanel](/components/ai-chat-panel) 与 [AI 对话场景](/scenarios/ai)。

## 下一步

- 在[组件总览](/components/)中浏览全部组件
- 看[编辑器能力总览](/scenarios/editor)等场景，了解多个组件如何协作
- 了解本站的[演示与文档约定](/guide/demo)，向文档站补充新组件