在 Markdown 中 使用 Vue

    如果你正在使用，或者需要展示一个对于 SSR 不怎么友好的组件（比如包含了自定义指令），你可以将它们包裹在内置的 <ClientOnly> 组件中：

    请注意，这并不能解决一些组件或库在导入时就试图访问浏览器 API 的问题 —— 如果需要使用这样的组件或库，你需要在合适的生命周期钩子中动态导入它们：

    1. <script>
    2. export default {
    3.   mounted () {
    4.     import('./lib-that-access-window-on-import').then(module => {
    5.     })
    6.   }
    7. }
    8. </script>

    模板语法

    每一个 Markdown 文件将首先被编译成 HTML，接着作为一个 Vue 组件传入 vue-loader，这意味着你可以在文本中使用 Vue 风格的插值：

    Input

    1. {{ 1 + 1 }}

    Output

    1. {{ 1 + 1 }}

    指令

    同样地，也可以使用指令:

    Input

    1. <span v-for="i in 3">{{ i }} </span>

    Output

    编译后的组件没有私有数据，但可以访问 网站的元数据，举例来说：

    Input

    1. {{ $page }}

    Output

    1. {
    2.   "path": "/using-vue.html",
    3.   "title": "Using Vue in Markdown",
    4.   "frontmatter": {}
    5. }

    Input

    1. ::: v-pre
    2. `{{ This will be displayed as-is }}`
    3. :::

    Output

    ::: v-pre
    {{ This will be displayed as-is }}
    :::

    使用组件

    所有在 .vuepress/components 中找到的 *.vue 文件将会自动地被注册为全局的异步组件，如：

    1. .
    2. └─ .vuepress
    3.       ├─ demo-1.vue
    4.       ├─ OtherComponent.vue
    5.       └─ Foo
    6.          └─ Bar.vue

    你可以直接使用这些组件在任意的 Markdown 文件中（组件名是通过文件名取到的）：

    ::: warning 重要！
    请确保一个自定义组件的名字包含连接符或者是 PascalCase，否则，它将会被视为一个内联元素，并被包裹在一个 <p> 标签中，这将会导致 HTML 渲染紊乱，因为 HTML 标准规定， <p> 标签中不允许放置任何块级元素。
    :::

    VuePress 对以下预处理器已经内置相关的 webpack 配置：sass、scss、less、stylus 和 pug。要使用它们你只需要在项目中安装对应的依赖即可。例如，要使用 sass，需要安装：

    1. yarn add -D sass-loader node-sass

    然后你就可以在 Markdown 或是组件中使用如下代码：

    2.   .title
    3.     font-size: 20px
    4. </style>

    要在组件中使用 <template lang="pug">，则需要安装 pug 和 pug-plain-loader:

    1. yarn add -D pug pug-plain-loader

    ::: tip
    需要指出的是，如果你是一个 stylus 用户，你并不需要在你的项目中安装 stylus 和 stylus-loader，因为 VuePress 已经内置了它们。

    脚本和样式提升

    有时，你可以只想在当前页面应用一些 JavaScript 或者 CSS，在这种情况下，你可以直接在 Markdown 文件中使用原生的 <script> 或者 <style> 标签，它们将会从编译后的 HTML 文件中提取出来，并作为生成的 Vue 单文件组件的 <script> 和 <style> 标签。

    " class="reference-link">OutboundLink

    () 用来表明当前是一个外部链接。在 VuePress 中这个组件会紧跟在每一个外部链接后面。

    参考 浏览器的 API 访问限制。

    " class="reference-link">Content

    • Props:

      • custom - boolean

    • 用法：

    当前的 .md 文件渲染的内容，当你在使用 自定义布局 时，它将非常有用。

    1. <Content/>

    参考:

    • Props:

      • text - string
      • type - string, 可选值： "tip"|"warn"|"error"，默认值是： "tip"

    • Usage:

    你可以在标题文本的末尾，使用这个组件来为某些 API 添加一些状态：