vitepress开发配置

1.安装vitepress

1.1 终端执行安装命令

npm add -D vitepress

1.2 执行安装向导

VitePress 附带一个命令行设置向导，可以帮助你构建一个基本项目。安装后，通过运行以下命令启动向导：

npx vitepress init

┌ Welcome to VitePress!
│
◇ Where should VitePress initialize the config?
│ ./docs
│
◇ Site title:
│ My Awesome Project
│
◇ Site description:
│ A VitePress Site
│
◆ Theme:
│ ● Default Theme (Out of the box, good-looking docs)
│ ○ Default Theme + Customization
│ ○ Custom Theme
└

1.3 文件结构

如果正在构建一个独立的 VitePress 站点，可以在当前目录 (./) 中搭建站点。但是，如果在现有项目中与其他源代码一起安装 VitePress，建议将站点搭建在嵌套目录 (例如 ./docs) 中，以便它与项目的其余部分分开。

假设选择在 ./docs 中搭建 VitePress 项目，生成的文件结构应该是这样的：

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

2.vitepress使用第三方库

2.1 安装ElementPlus

npm install element-plus --save

2.2 注册ElementPlus组件

在 .vitepress/theme/index.js（或 .vitepress/theme/index.ts）文件中注册ElementPlus组件：

import DefaultTheme from 'vitepress/theme'
import 'element-plus/dist/index.css'
// import ElementPlus from 'element-plus'
import {ElButton} from 'element-plus'

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    // 全局注册全部 ElementPlus组件
    //  app.use(ElementPlus)
    // 全局按需注册 ElementPlus组件
    app.component("ElButton",ElButton)
  }
}

2.3 使用ElementPlus组件

在 Markdown 文件 api-examples.md 中指定使用ElementPlus组件：

其他内容............

<el-button type="primary">Primary<el-button>

3.vitepress使用自定义vue组件

3.1 自定义vue组件

在 .vitepress/theme 目录下创建一个新的vue组件，例如 .vitepress/theme/mycomponent/mybutton.vue

<template>
  <div class="parent">
    <el-button type="primary" @click="clik">mybutton</el-button>
  </div>
</template>

<script setup>

 const clik = ()=>{
     confirm("11111")
 }

</script>

<style lang="scss" scoped>
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100;
}
</style>

3.2 注册自定义组件

在 .vitepress/theme/index.js（或 .vitepress/theme/index.ts）文件中注册自定义组件：

import DefaultTheme from 'vitepress/theme'
import mybutton from './mycomponent/mybutton.vue'

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    // 全局按需注册 自定义vue组件
    app.component("mybutton",mybutton)
  }
}

3.3 使用自定义组件

在 Markdown 文件 api-examples.md 中指定使用自定义组件：

其他内容............

<mybutton />