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

这篇具有很好参考价值的文章主要介绍了VitePress-01-从零开始的项目创建（npm版）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

说明

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

环境准备

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

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

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 			# 脚本配置文件