Vue 3.0文档风格指南

本指南将概述可用于创建文档的不同设计元素。

#警告

VuePress 提供了一个自定义容器插件来创建警稿框。有四种类型：

• Info：提供中立的信息
• Tip：提供积极和鼓励的信息
• Warning：提供用户应该知道的信息，因为存在低到中等
• Danger：供对用户具有高风险的负面信息

Markdown 范例

1. ::: info
2. You can find more information at this site.
3. :::
6. ::: tip
7. This is a great tip to remember!
8. :::
11. ::: warning
12. This is something to be cautious of.
13. :::
16. ::: danger DANGER
17. This is something we do not recommend. Use at your own risk.
18. :::

渲染 Markdown

INFO

你可以在这个网站上找到更多信息。

TIP

这是一个值得记住的好提示！

WARNING

这是需要谨慎的。

DANGER

这是我们不推荐的。使用风险自负。

#代码块

VuePress 使用 Prism 提供语言语法高亮显示，方法是将语言附加到代码块的起始反撇号：

Markdown 示例

1. ```js
2. export default {
3. name: 'MyComponent'
4. }
5. ```

渲染输出

1. export default {
2. name: 'MyComponent'
3. }

#行高亮

向代码块添加行高亮显示，需要在大括号中附加行号。

#单行

Markdown 示例

1. ```js{2}
2. export default {
3. name: 'MyComponent',
4. props: {
5. type: String,
6. item: Object
7. }
8. }
9. ```

渲染 Markdown

1. export default {
2. name: 'MyComponent',
3. props: {
4. type: String,
5. item: Object
6. }
7. }

#行组

1. ```js{4-5}
2. export default {
3. name: 'MyComponent',
4. props: {
5. type: String,
6. item: Object
7. }
8. }
9. ```

1. export default {
2. name: 'MyComponent',
3. props: {
4. type: String,
5. item: Object
6. }
7. }

#多个段落

1. ```js{2,4-5}
2. export default {
3. name: 'MyComponent',
4. props: {
5. type: String,
6. item: Object
7. }
8. }
9. ```

1. export default {
2. name: 'MyComponent',
3. props: {
4. type: String,
5. item: Object
6. }
7. }