安装与集成

下面的文档将介绍如何将mt-edit嵌入到已有项目

安装依赖

# NPM
$ npm install maotu

# Yarn
$ yarn add maotu

# pnpm
$ pnpm install maotu

如果网络环境不好导致包无法下载，请使用如下命令进行依赖安装

$ pnpm install maotu --registry https://registry.npmmirror.com

导入到已有项目

app.vue

<template>
  <div style="width: 100%;height: 100vh;">
    <mt-edit></mt-edit>
  </div>
</template>
<script setup lang="ts">
import { MtEdit } from 'maotu';
import 'maotu/dist/style.css';
</script>

然后运行项目，出现以下页面则代表导入成功了

• 在线体验
• 本页源码

TIP

如果导入有问题，可以参考一下示例项目http://101.200.230.128:8888/

已有项目的推荐版本为

• vue:3.3.4 及以上
• vite: 5.0.10 及以上

导入之后您可能会发现左侧图形库没有任何东西，这是因为mt-edit本身是不包含图形库的，让我们继续来看如何导入自己的图形库