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 使用如下命令：

$ pnpmadd-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的配置】