【🐱小咪带你启动 VitePress 项目：精彩开启✨】

前言

嗨，亲爱的小伙伴们！我是小咪🐱。今天呢，小咪要和大家好好唠一唠 VitePress 这个超级厉害的工具。VitePress 那可真是一个极其出色的基于 Vite 的静态网站生成器呢，它专门致力于打造超赞的文档网站哦。小咪🐱自己就用 VitePress 搭建了一个酷得不得了的个人博客呢。虽然目前只是有一个好看的门面，里面的内容还没完全填充完整，但是小咪🐱向大家郑重承诺，在未来一定会把它逐步完善起来哒。

下面呢，小咪就来给小伙伴们讲讲到底该怎么使用 VitePress 吧。

首先呀，小伙伴们一定要确保自己已经安装好了 Node.js 和 npm（或者 yarn）哦。要是还没安装的话呢，那就赶紧跑去 Node.js 的官网下载安装包进行安装哟。

1. 安装 VitePress

接下来呢，我们要在项目里面安装 VitePress 啦。可以通过 npm 或者 yarn 来完成这个操作哦。小咪🐱习惯用 vscode，那就用 vscode 来给大家演示一下哈～

LESS 复制代码

# 使用 npm
npm install vitepress --save-dev

# 使用 yarn
yarn add vitepress --dev

小咪🐱在这里选用 npm，在 vscode 终端里面输入"npm install vitepress --save-dev"。然后就耐心等待安装完成吧。

安装完成之后呢，就会多出一些文件哦。

2. 创建项目结构

接着呀，在你的项目根目录下，创建一个名为"docs"的文件夹嗷。VitePress 会在这个文件夹中查找你的文档呢。

arduino 复制代码

mkdir docs

完成这个指令后，就会创建出一个名为"docs"的文件夹啦。

还没完嗷～咱们的目标目录结构应该是这样的：

lua 复制代码

my-project
├── docs
│   ├──.vitepress
│   │   └── config.js
│   ├── index.md
│   └── guide.md
└── package.json

3. 配置 VitePress

在"docs"文件夹中，创建一个".vitepress"文件夹，并在其中创建"config.js"文件哦。这可是 VitePress 的配置文件呢。

示例配置

LESS 复制代码

// docs/.vitepress/config.js
module.exports = {
  title: '我的文档',
  description: '这是我的文档网站',
  themeConfig: {
    nav: [
      { text: '主页', link: '/' },
      { text: '指南', link: '/guide' },
    ],
    sidebar: [
      { text: '指南', link: '/guide' },
    ],
  },
}

具体操作：

右键"docs"文件夹，新建一个文件夹，取名叫".vitepress"。

并且在".vitepress"文件夹中创建一个"config.js"文件哦。

在"config.js"中填入上面给出的代码哟。

4. 创建文档

在"docs"文件夹中，创建 Markdown 文件哦。比如，创建"index.md"和"guide.md"文件。

"index.md"示例

LESS 复制代码

# 欢迎来到我的文档

这是一个使用 VitePress 创建的文档网站。

"guide.md"示例

LESS 复制代码

# 使用指南

这里是如何使用 VitePress 的指南。

5. 启动开发服务器

在项目根目录下，打开终端并运行以下命令来启动开发服务器哦：

LESS 复制代码

npx vitepress dev docs

按住 ctrl 键盘，左键点击 local 这里的地址，就可以访问自己的本地博客啦。

结束

虽然现在的博客离小咪🐱的目标样式还有一段距离呢，既没有好看的头像，标题、描述也不够完美，交互也还没加上......但是没关系呀，好在咱们已经成功迈出了第一步，成功启动了博客项目。小咪🐱会加快速度，尽快为大家带来如何装饰博客以及部署博客的精彩内容哦。大家就好好期待着吧，咱们下次再见哟！😉