vitepress 使用 unocss 方式

为了在VitePress中使用Unocss，你需要按照以下步骤操作：

1. 安装必要的包：

npm install unocss

2. 在你的VitePress项目中创建一个 unocss.ts 文件，并配置你的样式规则。例如：

// unocss.ts
import { defineConfig } from 'unocss'
 
export default defineConfig({
  rules: [
    // 这里添加你的Unocss规则
    ['p', 'text-fuchsia-600'],
    ['h1', 'text-orange-600 underline'],
    // 更多规则...
  ],
})

3. 在你的 vitepress.config.ts 文件中引入 Unocss 插件并配置它：

// vitepress.config.ts
import { defineConfig } from 'vitepress'
import unocss from 'unocss/vite'
 
export default defineConfig({
  plugins: [
    unocss({
      // 配置项，如果你有
    }),
  ],
})

4. 在你的Markdown文件或者Vue文件中使用Unocss规则：

<!-- 在Markdown文件中 -->
<p>This is a paragraph.</p>
<h1>This is a heading.</h1>
 
<!-- 或者在Vue文件中 -->
<template>
  <p>This is a paragraph.</p>
  <h1>This is a heading.</h1>
</template>

确保你的VitePress项目配置正确，并且Unocss插件按预期工作。这样，你就可以在VitePress中使用Unocss来简化样式的定义了。