guide/repl/frontend/

[giscus[bot]]

guide/repl/frontend/

概述 前端代码演示 由 vuepress-plugin-md-enhance 提供支持。 前端 代码演示 默认不启用，你可以通过配置来启用它。 语法 提示 JSON 块是可选的，可用的配置详见配置 插件支持三种类型 normal(默认) vue react 可用的语言 你可以在演示块中使用不同语言。 当你设置一些不能在浏览器上直接运行的语言时，由于插件...

https://theme-plume.vuejs.press/guide/repl/frontend/

[xlcaptain]

作者，您好，请问怎么在这个主题内使用自定义vue组件呢？
比如：.vuepress>components>ApiComponent .vue:

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      title: 'API Data',
      content: 'Loading...',
    };
  },
  async created() {
    try {
      const response = await axios.get('http://localhost:8000/api/demo/');
      this.content = response.data.data; // 假设 API 返回的数据中有一个 'content' 字段
    } catch (error) {
      console.error('Error fetching data:', error);
      this.content = 'Failed to load data.';
    }
  },
};
</script>

<style>
/* Add your styles here */
</style>

然后我在markdown页面：

<ClientOnly>
  <ApiComponent />
</ClientOnly>

没有作用，我的部分配置：

  theme: plumeTheme({
    plugins: {
      shiki: {
        languages: ['javascript', 'typescript', 'vue', 'bash', 'sh'], 
      },
      markdownPower: {
        bilibili: true,
      },
      markdownEnhance: {
        echarts: true,
        flowchart: true,
        demo: true,
        
      },

    }
  }),

您能够回答吗？谢谢！

[pengzhanbo]

.md 本质上也是一个 vue 组件，因此你需要在对应的 md 文件中 用 script setup 导入组件：

<script setup>
import YourComponent from 'your_componnet_path'
</script>

<YourComponent />

或者将 组件在 client.ts 的 enhance() 中注册为全局组件：

import YourComponent from 'your_componnet_path'
export default {
  enhance({ app }) {
    app.component('YourComponent', YourComponent)
  }
}

[xlcaptain]

好的，谢谢

[ykshang]

能不能把容器写法的title和desc做成solt。这样可以有更丰富样式
title="常规示例" desc="一个常规示例"

优化为以下写法：三者顺序可以调整，标题可以靠左靠中靠右

::: code-title top/center/bottom  left/center/right
:::
::: code-desc  top/center/bottom
:::
::: code-tabs top/center/bottom
:::

[ykshang]

title默认只能写文字，desc部分就可以写一些比较丰富的内容了。比如列表，字体加粗，马克笔，代码，什么的。

[ykshang]

我本人的写作风格，大多数的时候喜欢把先有标题后有内容。

[hub-yu]

作者，您好，请问如何在vue组件演示中的容器语法中添加组件的嵌套呢？
类似如下:
:::: demo vue
::: code-tabs

@tab App.vue

<script setup>
import { ref } from 'vue'
import TodoItem from './TodoItem.vue'
  
const newTodoText = ref('')
const todos = ref([
  {
    id: 1,
    title: 'Do the dishes'
  },
  {
    id: 2,
    title: 'Take out the trash'
  },
  {
    id: 3,
    title: 'Mow the lawn'
  }
])

let nextTodoId = 4

function addNewTodo() {
  todos.value.push({
    id: nextTodoId++,
    title: newTodoText.value
  })
  newTodoText.value = ''
}
</script>

<template>
	<form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    />
    <button>Add</button>
  </form>
  <ul>
    <todo-item
      v-for="(todo, index) in todos"
      :key="todo.id"
      :title="todo.title"
      @remove="todos.splice(index, 1)"
    ></todo-item>
  </ul>
</template>

@tab TodoItem.vue

<script setup>
defineProps(['title'])
defineEmits(['remove'])
</script>

<template>
  <li>
    {{ title }}
    <button @click="$emit('remove')">Remove</button>
  </li>
</template>

:::
::::

[pengzhanbo]

不支持多组件的代码演示

[hub-yu]

好的，谢谢