Getting Started

Installation

Install VuePress

Please refer to the official Vuepress documentation, click here to view

Install the plugin

Use yarn to install thevuepress-plugin-demo-container-v2 component:

yarn add vuepress-plugin-demo-container-v2 -D

Or use npm to install it:

npm i vuepress-plugin-demo-container-v2 --save-dev

Configure plugin

Open the .vuepress/config.js file, and then reference the plugin in the appropriate location:

module.exports = {
  plugins: ['demo-container-v2']
}

If you are not familiar with VuePress plugin configuration, please click here: Use plugin

After the configuration is complete, start the VUePress dev service

Use plugin

WARNING

In order to show how to write an example, the three points used to mark the end of the code part have been separated by spaces, and the spaces need to be removed when used.

Write the following code in the Markdown file:

::: demo The description information of the code example is placed here, supporting the `Markdown` syntax, **the description information only supports a single line**
```html
<template>
  <div>
    <p>{{ message }}</p>
    <AInput v-model="message" placeholder="Input something..." />
  </div>
</template>
<script>
  import { ref } from 'vue-demi'
  export default {
    setup () {
      const message = ref('Hello Here')

      return {
        message
      }
    }
  }
</script>
` ``
:::

The running effect is as follows

Hello Here

The description information of the code example is placed here, supporting the Markdown syntax, the description information only supports a single line

<template>
  <div>
    <p>{{ message }}</p>
    <AInput v-model="message" placeholder="Input something..." />
  </div>
</template>
<script>
  import { ref } from 'vue-demi'
  export default {
    setup () {
      const message = ref('Hello Here')

      return {
        message
      }
    }
  }
</script>

Expand Copy Copy