(0.4.13)
Oeos-Components

Appearance

On this page

vitepress的一些常用语法(可以在写文档的时候参考) ​

Hidden Title ​

说明 ​

  • 该页面用于记录项目文档编写时常用的 VitePress 语法片段和示例。

1. tip提示框 ​

提示

andy加油.

TIP

This is a tip.

WARNING

This is a warning.

DANGER

This is a dangerous.

Details

This is a details block.

2. 通过:::demo使用示例.vue文件 ​

3. emoji文字 ​

🎉 💯

4. 高亮显示某一行 ​

js
export default {
  data() {
    return {
      msg: 'Focused!', 
    }
  },
}
export default {
  data() {
    return {
      msg: 'Focused!', 
    }
  },
}

5. 直接在.md文件中写代码 ​

123456789101112131415161718192021222324252627282930

{
  "title": "vitepress的一些常用语法(可以在写文档的时候参考)",
  "description": "",
  "frontmatter": {},
  "headers": [],
  "relativePath": "components/utils/grammar/home.md",
  "filePath": "components/utils/grammar/home.md",
  "lastUpdated": 1776070973000
}

6. 折叠代码 ​

Details

7. 直接在md文档中引入文件 ​

<<< ../../../../packages/components/test/src/index.vue

vue
<script setup lang="ts">
import { computed } from 'vue'

defineOptions({
  name: 'OTest',
})

declare const __OEOS_COMPONENTS_BUILD_TIME__: string

const props = defineProps({
  label: {
    type: String,
    default: '打包时间',
  },
  prefix: {
    type: String,
    default: '',
  },
})

const displayText = computed(() => {
  const text = `${props.label}: ${__OEOS_COMPONENTS_BUILD_TIME__}`
  return props.prefix ? `${props.prefix}${text}` : text
})
</script>

<template>
  <div class="o-test">
    {{ displayText }}
  </div>
</template>

<style scoped lang="scss">
.o-test {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  color: var(--el-text-color-primary);
  font-size: 14px;
  line-height: 1.5;
  background-color: var(--el-fill-color-light);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 6px;
}
</style>
<script setup lang="ts">
import { computed } from 'vue'

defineOptions({
  name: 'OTest',
})

declare const __OEOS_COMPONENTS_BUILD_TIME__: string

const props = defineProps({
  label: {
    type: String,
    default: '打包时间',
  },
  prefix: {
    type: String,
    default: '',
  },
})

const displayText = computed(() => {
  const text = `${props.label}: ${__OEOS_COMPONENTS_BUILD_TIME__}`
  return props.prefix ? `${props.prefix}${text}` : text
})
</script>

<template>
  <div class="o-test">
    {{ displayText }}
  </div>
</template>

<style scoped lang="scss">
.o-test {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  color: var(--el-text-color-primary);
  font-size: 14px;
  line-height: 1.5;
  background-color: var(--el-fill-color-light);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 6px;
}
</style>

8. 代码组 ​

sh
pnpm add oeos-components -S
pnpm add oeos-components -S
sh
yarn add oeos-components
yarn add oeos-components
sh
npm install oeos-components -S
npm install oeos-components -S

9. md中常用组件el-tag ​

推荐

10. md中进行跳转 ​

去tooltip组件

11. 在markdown中使用组件不报警告 ​

  1. 警告原因分析 你遇到的波浪线警告是由 markdownlint 规则引起的，具体是 MD033 规则触发的。

markdownlint MD033 规则说明 规则名称: MD033/no-inline-html 规则目的: 禁止在 markdown 文件中使用内联 HTML 标签 触发条件: 检测到任何 HTML/XML 风格的标签（包括 Vue 组件标签）

  1. 为什么会出现此警告 虽然 <o-warning> 是你的全局 Vue 组件，但在 markdown 解析器看来：

Vue 组件标签仍属于 HTML 风格的标签语法 markdownlint 规则默认不允许任何形式的内联 HTML 即使是自定义组件标签也会被识别为 HTML 标签

  1. 解决方案

方案一：禁用特定规则（推荐） 在文件顶部添加 markdownlint 配置：

方案二：配置项目级别 markdownlint 规则 修改 .markdownlint.json 或相应配置文件： { "no-inline-html": false }

12. 在markdown中使用o-tip ​

属性名说明类型默认值
title顶部titleboolean 提示