开发文档Umo Viewer快速开始

快速开始

Umo Viewer 是一个基于 Vue3 的文档查看器。您可以访问https://www.umodoc.com/demo?target=viewer,体验和测试 Umo Viewer 的部分功能。

安装

使用 NPM 安装

npm install --save @umoteam/viewer

使用

以下使用方式任选一种即可:

全局安装

main.js
import { createApp } from 'vue';
import { useUmoViewer } from '@umoteam/viewer';
 
// 如果预览内容包括 Umo Editor 文档(即 mode 配置中包含 'html'),则需要引入 Umo Editor 样式
// Umo Editor 版本不能不小于 8.0.0
// import '@umoteam/editor/style'
 
const app = createApp(App);
app.use(useUmoViewer, {
  // 配置项
  // ...
});
app.mount('#app');

直接引入

以下组合式 API 和选项式 API 的示例,任选一种使用即可。

component.vue
<template>
  <umo-viewer v-bind="options" />
  <!-- 或者 -->
  <!-- 
  <umo-viewer 
    lang="zh-CN"
    ... 
  /> -->
</template>
 
// 使用组合式 API
<script setup>
  import { ref } from 'vue'
  import { UmoViewer } from '@umoteam/viewer';
 
  // 如果预览内容包括 Umo Editor 文档(即 mode 配置中包含 'html'),则需要引入 Umo Editor 样式
  // Umo Editor 版本不能不小于 8.0.0
  // import '@umoteam/editor/style'
 
  const options = ref({
    // 配置项
    // ...
  });
</script>
 
// 或使用选项式 API
<script>
  import { UmoViewer } from '@umoteam/viewer';
 
  // 如果预览内容包括 Umo Editor 文档(即 mode 配置中包含 'html'),则需要引入 Umo Editor 样式
  // Umo Editor 版本不能不小于 8.0.0
  // import '@umoteam/editor/style'
 
  export default {
    components: {
      UmoViewer
    },
    data() {
      return {
        options: {
          // 配置项
          // ...
        }
      }
    }
  }
</script>

配置

配置项