初始化 Vitepress 项目示例代码

初始化 Vitepress 项目示例代码

Vitepress 是一个由 Vue.js 驱动的静态站点生成器，它利用了 Vite 的快速冷启动、即时热更新和真正的按需编译等优点。下面是一个简单的 Vitepress 代码示例，包括如何设置项目、编写文档和启动开发服务器。

1. 初始化 Vitepress 项目

首先，确保你已经安装了 Node.js 和 npm（或者 yarn）。然后，你可以通过运行以下命令来初始化一个新的 Vitepress 项目：

bash
# 创建一个新目录并进入  
mkdir my-vitepress-site && cd my-vitepress-site  
  
# 初始化项目  
npm init vitepress

这将会创建一个新的 Vitepress 项目，其中包括一个基本的目录结构和配置文件。

2. 编写文档

在 docs 目录下，你可以开始编写你的文档。每个 .md 文件都会被视为一个单独的页面。例如，创建一个 docs/index.md 文件：

markdown
# 欢迎来到我的 Vitepress 站点 
  
这是一个简单的 `Vitepress` 示例。你可以在这里编写` Markdown` 文档，并且可以使用 Vue 组件来增强它们！  
  
下面是一个 Vue 组件的示例：  
  
<DemoComponent msg="Hello, Vitepress!" />

在上面的例子中，我们使用了一个名为 DemoComponent 的 Vue 组件。为了使其工作，你需要在 .vitepress 目录下创建一个 theme 目录，并在其中添加一个 index.js 文件来注册你的组件：

javascript
// .vitepress/theme/index.js  
import DemoComponent from './DemoComponent.vue'  
  
export default ({ Vue }) => {  
  Vue.component('DemoComponent', DemoComponent)  
}
然后，创建 DemoComponent.vue 文件：

vue
<!-- .vitepress/theme/DemoComponent.vue -->  
<template>  
  <div class="demo-component">  
    {{ msg }}  
  </div>  
</template>  
  
<script>  
export default {  
  props: {  
    msg: String  
  }  
}  
</script>  
  
<style scoped>  
.demo-component {  
  color: red;  
}  
</style>

3. 启动开发服务器

现在，你可以通过运行以下命令来启动一个开发服务器：

bash
npm run docs:dev

这将启动一个开发服务器，并在浏览器中打开你的 Vitepress 站点。你可以在 docs 目录下编辑你的文档，并立即看到更改反映在浏览器中。

4. 构建站点

当你完成你的文档并准备发布时，你可以运行以下命令来构建你的站点：

bash
npm run docs:build

这将生成一个静态站点，你可以在 docs/.vitepress/dist 目录下找到它。你可以将这些文件部署到任何静态文件服务器上，以便与他人分享你的文档。