VitePress-01-从零开始的项目创建（npm版）

说明

本文介绍一下 VitePress的项目创建的步骤。
主要用到的命令工具是 npm。
本文的操作步骤是从无到有的创建一个完整的基本的【VitePress】项目。

环境准备

根据官方文档的介绍，截止本文发稿时，需要使用node.js 18+ 的版本。
可以使用node -v 的命令查看版本。
如果不满足要求的，可以安装一下后再进行本文的继续阅读。

创建一个目录作为项目目录

mkdir vitepressProject01

进入目录，安装 vitepress 依赖

cd vitepressProject01

npm install vitepress --save-dev

安装完成后 项目中会生成 package.json 文件，
因为我们是空目录下直接执行的 npm install 命令，所以，该文件的内容也是非常的简单，如下：

{
  "devDependencies": {
    "vitepress": "^1.0.0-rc.36"
  }
}

执行安装向导（核心）

这个步骤是本文的重点，
主要用到的 vitepress命令来引导我们创建项目，填写一些项目的必要信息。
执行完成后 会 自动生成基本的项目结构与项目中的文档。

执行命令

# 本命令是为了确保后面的命令在项目目录下执行
cd vitepressProject01

# 核心命令，执行完此命令之后开始了正式创建项目的过程
npx vitepress init

过程记录

这个过程，主要是根据引导填写一些信息，从而完善项目的基本信息。

┌  Welcome to VitePress! # 开始创建
│
◇  Where should VitePress initialize the config?  # 指定项目配置文件的目录，【./】 表示项目的根目录
│  ./
│
◇  Site title: # 指定项目的名称
│  创建项目案例
│
◇  Site description: # 指定项目的描述
│  对VitePress项目创建的简单测试
│
◇  Theme: # 选择项目的主题
│  Default Theme
│
◇  Use TypeScript for config and theme files? # 选择时候使用ts进行配置
│  Yes
│
◇  Add VitePress npm scripts to package.json? # 选择是否自动添加相关的脚本到 package.json 文件中
│  Yes
│
└  Done! Now run npm run docs:dev and start writing. # 完成创建

执行结果

package.json 文件中添加了启动脚本

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

自动生成相关的文件，项目目录结构成型

vitepressProject01
├── .vitepress 				# 项目相关的配置文件，都放在这个目录下
│   └── config.mts 			# 本项目的配置文件，ts 的
├── api-examples.md 		# 自动生成的一个文档文件
├── index.md 				# 项目的入口文件
├── markdown-examples.md 	# 自动生成的一个文档文件
├── node_modules 			# 需要用到的依赖
├── package-lock.json
└── package.json 			# 脚本配置文件

【 补充1 】：
默认情况下，VitePress 将其开发服务器缓存存储在 .vitepress/cache 中，并将生产构建输出存储在 .vitepress/dist 中。
如果使用 Git，应该将它们添加到 .gitignore 文件中。也可以手动配置这些位置。

【 补充2 】：
【.vitepress】 目录中存放的是项目的配置相关的内容；
项目中其他的【.md】文件，都是项目的源文件，会被编译成 【.html】文件在浏览器中进行访问。

本文暂不对文件的具体内容做分析，只是了解基本的项目结构即可。

启动并访问项目

启动命令

根据的是在 package.json 中的脚本进行启动

npm run docs:dev

访问项目

至此，vitepress 项目的基本的创建就完成了！