# 写 Demo

我们很赞同 dumi 的 Demo 理念，并以它为标准来实现的 demo 功能。

# demo 类型

目前只支持了一种写 demo 的形式。

<demo src="../demo-example.vue"
  language="vue"
  title="Demo演示"
  desc="这是一个Demo渲染示例">
</demo>

渲染效果如下

# demo在线演示

v0.16.0开始采用 https://sfc.vuejs.org/。

很常见的需求是demo中会需要引入第三方库，此时需要在.vitepress/config.js传入 importMap 的配置项。

例如:

// .vitepress/config.js
module.exports = {
  lang: 'zh-CN',
  title: 'vitepress-for-component',
  importMap: {
    'vue-typical': 'https://cdn.jsdelivr.net/npm/vue-typical@2.1.0/dist/vue-typical.es.min.js'
  },
  ...
}

sfc.vuejs.org 有以下限制:

• 暂不支持 lang="less" lang="ts" 等需要编译的代码。