老赵

Appearance

​

如果你用过vue-press的话 就知道vite-press有多快

前置准备 ​

  • Node.js 18 及以上版本。
  • 通过命令行界面 (CLI) 访问 VitePress 的终端。
  • 支持 Markdown 语法的编辑器。

创建一个目录 ​

sh
mkdir vitepress

image-20240509100818211

这里记得cd进去 我忘记进入目录了 害的我又删了重新搭了一遍

安装vite-press包 ​

image-20240509101001664

image-20240509101039502

sh
npm add -D vitepress
sh
pnpm add -D vitepress
sh
yarn add -D vitepress

以上三种都可以 除了npm是nodeJs自带以外 其余的包管理器都需要额外安装

包管理器 ​

在现代Web开发中，一个Node.js应用的构建往往离不开各种依赖，比如库、辅助工具或其他工具包。以一个典型的React项目为例，当你想为项目添加路由功能时，你需要安装如react-router-dom这样的包。类似这样的需求在开发过程中屡见不鲜，而这就是为什么我们需要一个包管理器来帮助我们管理这些依赖.

在这里我们不具体介绍包管理的内容,搭建vite-press可以使用 npm yarn pnpm 等等

安装额外的包管理器 ​

yarn ​
sh
npm install -g yarn
pnpm ​
sh
npm install -g pnpm

安装向导 ​

VitePress 附带一个命令行设置向导，可以帮助你构建一个基本项目。安装后，通过运行以下命令启动向导：

npm ​
sh
npx vitepress init
yarn ​
sh
yarn vitepress init
pnpm ​
sh
pnpm vitepress init
sh
┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◆  Theme:
│  ● Default Theme (Out of the box, good-looking docs)
│  ○ Default Theme + Customization
│  ○ Custom Theme
└

image-20240509101433544

按照如上进行配置

启动项目 ​

sh
pnpm run docs:dev

image-20240509101521128

image-20240509101555828

一个简单的博客系统就启动好了