VitePress

@lite-tree/vue是一个Vue组件，用于渲染树形结构。

安装

npm install @lite-tree/vue
// or
yarn add @lite-tree/vue
// or
pnpm add @lite-tree/vue

配置

如果通过默认slot传入数据，需要在./vitepress/config.mts中配置：

// ./vitepress/config.mts
import { defineConfig } from 'vitepress'

export default defineConfig({
  vue:{
    template: {                      
      compilerOptions: {
        whitespace: 'preserve'
      }
    }
  }
})

重点

设置whitespace: 'preserve'是为了保留Markdown中的空格，以便LiteTree可以正确解析lite格式的树数据。

导入

在vitpress中使用LiteTree组件。有两种方式：

• 局部引入

在需要使用LiteTree的.md文件中引入.

// xxxxxx.md

<script setup>
import { LiteTree } from '@lite-tree/vue'
</script>

• 全局引入

在.vitepress/theme/index.ts中引入。

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import { LiteTree } from '@lite-tree/vue'

/** @type {import('vitepress').Theme} */
export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    // 注册自定义全局组件
    app.component('LiteTree'，LiteTree)
  }
}

使用

为LiteTree提供数据，可以通过slot或者data属性传入。

• slot

import { LiteTree } from "@lite-tree/vue";

<LiteTree>
// 这里是树形数据
</LiteTree>

重点

设置whitespace: 'preserve'是为了保留Markdown中的空格，以便LiteTree可以正确解析lite格式的树数据。

• data属性。

<script setup>
import { LiteTree } from '@lite-tree/vue'

const treeData=`
// 这里是树形数据
`
</script>

<LiteTree :data="treeData"</LiteTree>