测试项目功能

代码组

code-tabs的名称一样就行

pnpm

pnpm add -D vuepress-theme-hope

yarn

yarn add -D vuepress-theme-hope

npm

npm i -D vuepress-theme-hope

pnpm

pnpm add -D vuepress-theme-hope1

yarn

yarn add -D vuepress-theme-hope1

npm

npm i -D vuepress-theme-hope1

代码演示

演示

<h1>VuePress Theme Hope</h1>
<p><span id="very">非常</span>强大!</p>

document.querySelector("#very").addEventListener("click", () => {
  alert("非常强大");
});

span {
  color: red;
}

Vue 演示 1

<template>
  <div class="box">
    <code>vuepress-theme-hope</code> is
    <span @click="handler">{{ message }}</span
    >!
  </div>
</template>
<script>
const { ref } = Vue;

export default {
  setup() {
    const message = ref("powerful");

    const handler = () => {
      message.value = "very " + message.value;
    };

    return {
      message,
      handler,
    };
  },
};
</script>
<style>
.box span {
  color: red;
}
</style>

图片

图片展示

图片展示

图片展示

Badge

• tip
• warning
• danger
• info
• note

图标

• 主页图标:

PDF

任务列表

• 任务一
• 任务二

Heading 2

pnpm

pnpm add -D vuepress-theme-hope

yarn

yarn add -D vuepress-theme-hope

npm

npm i -D vuepress-theme-hope

pnpm

pnpm add -D vuepress-theme-hope1

yarn

yarn add -D vuepress-theme-hope1

npm

npm i -D vuepress-theme-hope1

演示

<h1>VuePress Theme Hope</h1>
<p><span id="very">非常</span>强大!</p>

document.querySelector("#very").addEventListener("click", () => {
  alert("非常强大");
});

span {
  color: red;
}

预设

TS 案例 1

TS 案例 2