VuePress使用

Quber...大约 3 分钟VuePress

内嵌 Markdown 页面跳转：

[vuePressHope.md 页面](./vuePressHope.md)

渲染结果：

vuePressHope.md 页面

说明：内嵌 Markdown 页面的地址可以是相对路径，也可以是绝对路径，建议使用相对路径。

外部地址跳转：

[百度](https://www.baidu.com)

渲染结果：

百度open in new window

1.2、Emoji 支持

支持 Emoji，如下所示：

:100: :tada:

渲染结果：

💯 🎉

1.3、目录输出

如果想输出 Markdown 中的目录，请使用如下代码：

[[toc]]

渲染结果：

1.4、代码块

综合展示：

示例如下所示，代表的是ts语言，第 1 行、第 6~8 行代码高亮，并且默认显示了行号：

import { defaultTheme, defineUserConfig } from 'vuepress'

export default defineUserConfig({
  title: '你好， VuePress',

  theme: defaultTheme({
    logo: 'https://vuejs.org/images/logo.png',
  }),
})

默认是显示行号的，如果不需要显示行号，请添加:no-line-numbers即可，如下所示：

import { defaultTheme, defineUserConfig } from 'vuepress'

export default defineUserConfig({
  title: '你好， VuePress',

  theme: defaultTheme({
    logo: 'https://vuejs.org/images/logo.png',
  }),
})

Vue 编译：

默认情况下，涉及到 Vue 代码是不会进行编译的，如下所示：

```md
<!-- 默认情况下，这里会被保持原样 -->

1 + 2 + 3 = {{ 1 + 2 + 3 }}
```

渲染结果：

<!-- 默认情况下，这里会被保持原样 -->

1 + 2 + 3 = {{ 1 + 2 + 3 }}

如果想让代码执行 Vue 编译，则只需要添加no-v-pre标记即可

```md:no-v-pre
<!-- 这里会被 Vue 编译 -->
1 + 2 + 3 = {{ 1 + 2 + 3 }}
```

渲染结果：

<!-- 这里会被 Vue 编译 -->
1 + 2 + 3 = 6

导入代码块：

导入代码块可参见官网的导入代码块open in new window

1.5、Vue 的使用

简单的使用如下所示：

一加一等于： {{ 1 + 1 }}

<span v-for="i in 3" style="border:1px solid #2a4555;margin-right:5px;padding:5px;"> span: {{ i }} </span>

渲染结果：

一加一等于： 2

span: 1 span: 2 span: 3

1.6、Element-Plus 的使用

参考文档：

安装element-plus依赖：

yarn add element-plus

修改docs\.vuepress\client.ts文件：

import { defineClientConfig } from "@vuepress/client";

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

export default defineClientConfig({
    enhance({ app, router, siteData }) {
        app.use(ElementPlus);
    },
    setup() {},
    rootComponents: [],
});

修改docs\.vuepress\config.ts文件：

bundler: viteBundler({
    viteOptions: {
        ssr: {
            noExternal: ["element-plus"],
        },
    },
    vuePluginOptions: {},
}),

使用：

<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>

<el-badge :value="12" style="margin-left:10px;margin-right:10px;">
    <el-button>comments</el-button>
</el-badge>
<el-badge :value="3" class="item">
    <el-button>replies</el-button>
</el-badge>

<el-progress :percentage="50" />
<el-progress :percentage="100" />
<el-progress :percentage="100" status="success" />
<el-progress type="circle" :percentage="100" status="warning" />
<el-progress type="circle" :percentage="50" status="exception" />

<el-empty description="暂无数据！" />

渲染结果：

¹²

50%

100%

暂无数据！

VuePress使用

1、Markdown 中的使用

1.1、链接跳转

1.2、Emoji 支持

1.3、目录输出

1.4、代码块

1.5、Vue 的使用

1.6、Element-Plus 的使用