vitepress 最详细教程之开始使用

开始使用

写在前面

关于为什么要写这个教程，原因有二，其一是因为 vitepress 才刚出来，中文版的教程不详细，英文版的教程可能大部分人看起来比较麻烦；其二是因为作者最近刚用 vitepress 搭建了一个组件库展示网站，就想趁此机会写个文档吧 😄！

以后可能会出开发自己组件库的教程，如果有兴趣可以私信我，人多的话可能就会提前安排上 🎉，目前文档已在我的 GitHub 仓库了，是我参加青训营的团队一起完成的，但是文档的搭建是我一个人负责的，悄悄夸一下自己 👍。

如果大家想看看效果，其实我没有部署到 GitHub 上，这个以后也会教大家，现在使用方法如下：

• 首先去克隆我的组件库项目，喜欢的话可以 Star 🌟 一下哈

$ git clone https://github.com/ox4f5da2/seven-bit-docs.git

• 然后安装依赖

$ pnpm i

对了如果没有安装 pnpm 的可以全局安装一下，运行如下命令即可：

$ npm i pnpm -g

如果提示说无权限写入文件夹的话那就加 sudo 安装即可

• 然后运行命令启动项目

$ pnpm run docs:dev

• 最后打开链接应该就能看到了，希望大家喜欢这个文档网站

顺便说一下，我还写了一个刷算法题的网站，都是用 js 写的，网址在这里，想看的可以看看，这是用 vuepress 写的，如果您有 vuepress 基础那么会非常容易上手，好了废话不多说，接下来就介绍怎么使用 vitepress。

创建项目

首先选一个自己喜欢的文件及，然后在这个文件夹里创建一个 vitepress 项目文件夹，自己想叫啥叫啥，然后进入这个文件夹即可，如果大家觉得麻烦可以进入文件夹后运行如下命令：

$ mkdir vitepress && cd vitepress

然后使用自己喜欢的包管理方式，可以是 npm、yarn、pnpm，初始化项目即可：

• npm -> npm init -y
• yarn -> yarn init
• pnpm -> pnpm init

作者就选 pnpm 了

安装 vitepress

为了方便书写教程，之后的安装命令都是用 pnpm 了，请大家谅解哈。

安装 vitepress 使用如下命令：

$ pnpm add -D vitepress vue

然后创建一个 md 文档：

$ mkdir docs && echo '# Hello VitePress' > docs/index.md

启动项目

将以下的内容写入 package.json 文件：

{
  ...
   "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  ...
}

然后本地启动服务：

$ pnpm run docs:dev

VitePress 将在 http://localhost:5173 上展示你自己的网站，并且是热更新的。

vitepress 的目录结构

.
├─ docs
│  ├─ .vitepress
│  │   ├─ theme
│  │   │  └─ index.js
│  │   └─ config.js
│  └─ index.md
├─ .gitignore
├─ node_modules
└─ package.json

大概是这么个结构，其实没有具体规定，其实只要路径对匹配了就行了，但是 .vitepress 必须有，然后 config.js 也要有，否则没办法配置了。

💡 注意事项
如果 config.js 和 index.js 文件中没有内容的话，页面是无法显示的，应该删除或者添加相关配置，这个在以后会慢慢讲解。

写在最后

到目前应该有一个最简单的网站了，下一个教程我们来实现自己的 Home Page，一般看情况更新吧，如果大家喜欢可以点赞➕收藏这个专栏。

🚀 下一节：

• 【vitepress 最详细教程之Home Page的配置】