认识vitepress

什么是vitepress

是新技术？ 是文档？ 还是类似于html的网页？

不要猜了，俺也不明白。哈哈哈哈哈哈

常言道：不要问为什么，你要知道能干什么 —— big_BIN

能力

可以写文档 - 类似于markdown

可以写网站 - 类似于html

可以写博客 - 类似于blog等

到这里我们应该就明白了，哦~。大佬牛哄哄，我们苦哈哈

::: info 该说不说的，习惯了markdown的快捷键，在vscode里面不能用就很难受。有没有这方面了解较多的，给俺推荐下好用的插件 :::

准备

要使用vitepress，首先你要先了解几个步骤。就例如你想开飞机，首先你要先建一个机场那样。

这里介绍一些我所认识的抛开底层的步骤。 不要问为什么，问就是不知道。

安装

配置 - 看着高大上，其实就是ctrl C+V

写页面

感慨一下，尤大大太厉害了

安装

官方提供了几种安装方式，我们就按官方的来吧。

安装环境

::: code-group

#安装npm
npm i -D vitepress

#安装pnpm
pnpm add -D vitepress

#安装yarn
yarn add -D vitepress

:::

code-group - 代码组 是vitepress的语法，依赖于vitepress环境，所以没有出来

初始化环境 - 看好对应的安装方式

::: code-group

#初始化npm
npx vitepress init

#初始化pnpm
pnpm vitepress init

#初始化yarn
yarn vitepress init

:::

初始化配置

T   Welcome to VitePress!
|
o  Where should VitePress initialize the config?
|  ./docs
|
o  Site title:
|  My Awesome Project
|
o  Site description:
|  A VitePress Site
|
o  Theme:
|  Default Theme
|
o  Use TypeScript for config and theme files?
|  Yes
|
o  Add VitePress npm scripts to package.json?
|  Yes
|
—  Done! Now run npm run docs:dev and start writing.

如果你在初始化配置项的时候，你没有添加./docs路径，那么你就需要在安装成功之后去修改配置了。那么我将欢迎你，为自己新增麻烦一次。

启动 - 看好对应的安装方式

::: code-group

#运行npm
npm run docs:dev

#运行pnpm
pnpm run docs:dev

#运行yarn
yarn docs:dev

:::

生成了一个本地 5173 端口的链接，可以对网站进行预览

此时，VitePress已经搭建好了一个基础的网站

http://localhost:5173/

到这里我们的准备工作都已经完成了。

还有一些详细的配置，需要参考官方文档vitepress快速上手

搭建完成之后，根据代码运行npm run dev:docs差不多就能看到下面的界面了

当然，文本当然是自己改的啦