Prose 组件是标准 HTML 排版标签的替代品,它们提供了一种在使用 Markdown 时轻松自定义 UI 的方法。
Movk Nuxt Docs 和 Nuxt UI 提供了一套设计精美的 Prose 组件,帮助您使用 MDC 语法 编写出色的文档。
Accordion使用 accordion 和 accordion-item 组件在您的内容中嵌入一个 Accordion。
Movk Nuxt Docs 是一个使用 Nuxt UI 构建的完全集成的文档解决方案。它是一个基于 UI 文档模板的主题,提供开箱即用的视觉效果。用户可以专注于使用 Markdown 和 MDC 语法编写内容。
要开始一个 Movk Nuxt Docs 项目,您只需要一个 content/ 文件夹。您可以查看入门模板以快速开始。
Nuxt UI 是一个包含高质量 Vue 组件、可组合项和工具的集合。
::accordion
:::accordion-item{label="什么是 Movk Nuxt Docs,它的主要特性是什么?" icon="i-lucide-circle-help"}
Movk Nuxt Docs 是一个使用 Nuxt UI 构建的完全集成的文档解决方案。它是一个基于 UI 文档模板的主题,提供开箱即用的视觉效果。用户可以专注于使用 Markdown 和 MDC 语法编写内容。
:::
:::accordion-item{label="如何开始使用 Movk Nuxt Docs?" icon="i-lucide-circle-help"}
要开始一个 Movk Nuxt Docs 项目,您只需要一个 `content/` 文件夹。您可以查看入门模板以快速开始。
:::
:::accordion-item{label="什么是 Nuxt UI?" icon="i-lucide-circle-help"}
[Nuxt UI](https://ui.nuxt.com/) 是一个包含高质量 Vue 组件、可组合项和工具的集合。
:::
::
Badge在 badge 组件的默认插槽中使用 Markdown,在您的内容中显示一个 Badge。
::badge
**v3.0.0**
::
Callout在 callout 组件的默认插槽中使用 Markdown,为您的内容添加引人注目的上下文信息。
使用 icon 和 color 属性来自定义其外观。您还可以传递 <NuxtLink> 组件的任何属性。
此外,您可以使用具有预定义图标和颜色的 note、tip、warning 和 caution 快捷方式。
::note
这是一些额外信息。
::
::tip
这是一个有帮助的建议。
::
::warning
请小心此操作,因为它可能产生意外结果。
::
::caution
此操作无法撤销。
::
Card 和 CardGroup在 card 组件的默认插槽中使用 Markdown 来突出显示您的内容。
使用 title、icon 和 color 属性来自定义它。您还可以传递 <NuxtLink> 中的任何属性。
使用 card-group 组件包装您的 card 组件,将它们分组在一起以获得网格布局。
:::card-group
::card
---
title: Dashboard
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/dashboard
target: _blank
---
A dashboard with multi-column layout.
::
::card
---
title: SaaS
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/saas
target: _blank
---
A template with landing, pricing, docs and blog.
::
::card
---
title: Docs
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/docs
target: _blank
---
A documentation with `@nuxt/content`.
::
::card
---
title: Landing
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/landing
target: _blank
---
A landing page you can use as starting point.
::
:::
Collapsible使用 collapsible 组件包装您的内容以在内容中显示 Collapsible。
| Prop | Default | Type |
|---|---|---|
name | string | |
size | md | string |
color | neutral | string |
::collapsible
| Prop | Default | Type |
|---------|-----------|--------------------------|
| `name` | | `string`{lang="ts-type"} |
| `size` | `md` | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |
::
Field 和 FieldGroupfield 是一个在内容中显示的属性或参数。您可以通过 field-group 将它们分组在列表中。
false - Enables analytics for your project (coming soon).false - Enables blob storage to store static assets, such as images, videos and more.false - Enables cache storage to cache your server route responses or functions using Nitro's cachedEventHandler and cachedFunctionfalse - Enables SQL database to store your application's data.::field-group
::field{name="analytics" type="boolean"}
Default to `false` - Enables analytics for your project (coming soon).
::
::field{name="blob" type="boolean"}
Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
::
::field{name="cache" type="boolean"}
Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
::
::field{name="database" type="boolean"}
Default to `false` - Enables SQL database to store your application's data.
::
::
Icon使用 icon 组件在内容中显示 Icon。
:icon{name="i-simple-icons-nuxtdotjs"}
Kbd使用 kbd 组件在内容中显示 Kbd。
:kbd{value="meta"} :kbd{value="K"}
Tabs使用 tabs 和 tabs-item 组件在内容中显示 Tabs。
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
::tabs{.w-full}
:::tabs-item{icon="i-lucide-code" label="Code"}
```mdc
::::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::::
```
::::
:::tabs-item{icon="i-lucide-eye" label="Preview"}
:::::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
:::::
:::
::
Steps用 Steps 组件包装您的标题以显示步骤列表。
使用 level 属性来定义哪个标题将用于步骤。
npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/template
pnpm run dev
::steps{level="4"}
#### 启动一个全新项目
```bash [Terminal]
npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/template
```
#### 启动您的开发服务器
```bash [Terminal]
pnpm run dev
```
::