theme-hope 主题

使用组件

局部引入

提示💡

每个 Markdown 文件首先会被编译为 HTML，然后转换为 Vue 单文件组件（SFC）。换句话说，你可以像编写 Vue SFC 一样编写 Markdown 文件。

• <script> 和 <style> 标签会直接被视为 Vue SFC 中的标签。换句话说，它们会从 <template> 标签提升到 SFC 的顶层。

• 除了 <script> 和 <style> 标签之外的所有内容都会被编译为 HTML，然后被视为 Vue SFC 中的 <template> 标签。

转换后的 Vue SFC 会被缓存到 .vuepress/.temp/pages 目录中，并会在布局中通过内置的 <Content /> 组件渲染。

注意❗

你可以在 Markdown 中直接使用 Vue 语法，详情请见 VuePress → Markdown。由于 Vue 单文件组件只能包含一个 <script> 标签，所以你应该避免在 VuePress Markdown 中使用多个 <script> 标签。

注意❗

由于 Markdown 文件会被转换为 Vue 单文件组件并缓存到 .vuepress/.temp/pages 目录中，所以相对导入在 Markdown 文件中是无效的。你应该使用别名。

你可以使用 @source 别名来引用当前项目的源目录。

.
├── src → project folder
│    ├── example
│    │    ├── ...
│    │    └── MyComponent.vue
│    ├── ...
│    └── README.md
└── ...

<MyComponent />
 
<script setup>
import MyComponent from "@source/example/MyComponent.vue";
</script>

你也可以使用 alias 选项来创建别名:

.
├── src → project folder
│    ├── .vuepress
│    │    ├── components
│    │    │    └── MyComponent.vue
│    │    ├── ...
│    │    └── config.ts
│    ├── ...
│    └── README.md
└── ...

import { getDirname, path } from "vuepress/utils";
 
const __dirname = getDirname(import.meta.url);
 
export default {
  alias: {
    "@MyComponent": path.resolve(__dirname, "components/MyComponent.vue"),
  },
};

<MyComponent />
 
<script setup>
import MyComponent from "@MyComponent";
</script>

重点

尽可能使用局部注册

全局组件需要在 VuePress 初始化时加载（即访问第一个页面时）。因此，如果一个全局组件很大，它会影响站点的初始加载时间。

在 Markdown 中局部导入组件意味着组件只会在访问使用它的页面时加载。

全局组件

通过客户端配置文件注册

你可以通过创建 .vuepress/client.js 或 .vuepress/client.ts 手动注册组件。

import { defineClientConfig } from "vuepress/client";
import MyComponent from "./MyComponent.vue";
 
export default defineClientConfig({
  enhance: ({ app, router, siteData }) => {
    app.component("MyComponent", MyComponent);
  },

全局组件可以直接在任何组件、布局或页面中使用。

• Markdown:

<MyComponent />

• 组件:

<!-- .vuepress/components/Example.vue -->
<template>
  <p>组件案例</p>
  <MyComponent />
</template>

• 布局:

<!-- .vuepress/layouts/Custom.vue -->
<template>
  <p>布局案例</p>
  <MyComponent />
</template>

register-components： 自动组册组件

npm i -D @vuepress/plugin-register-components@next

import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
 
export default {
  plugins: [
    registerComponentsPlugin({
      // 配置项
      componentsDir: path.resolve(__dirname, './components'),
      componentsPatterns:['**/*.vue'],
		// components: {
		// VueDemo: path.resolve(__dirname, './components/react/VueDemo.vue'),
		// },
    }),
  ],
}

注意❗

只能单层匹配

globby: 匹配规则

• * matches any number of characters, but not /
• ? matches a single character, but not /
• ** matches any number of characters, including /, as long as it’s the only thing in a path part
• {} allows for a comma-separated list of “or” expressions
• ! at the beginning of a pattern will negate the match