【2】VitePress搭建个人博客-快速上手_vitepress搭建博客

准备工作

1. Node.JS版本18或更高版本 https://nodejs.org/en
2. 具有Markdown语法支持的文本编辑器
3. git https://git-scm.com/

初始化项目

1. 创建文件夹并进入到项目的目录中，打开cmd cd到该目录下

# mkdir 创建文件夹指令； && 表示当前命令执行成功后会执行下一条指令。
mkdir vitepress-starter && cd vitepress-starter
1
2

2. 初始化项目，官网默认使用yarn作为依赖管理工具

yarn init
1

3. 安装项目所需的依赖vitepress和vue

yarn add --dev vitepress vue
1

4. 创建第一个实例文件

# echo 写入内容到项目的 docs/index.md 中
mkdir docs && echo '# My name is Zhuang Niuniu' > docs/index.md
1
2

5. 在package.json中增加打包以及运行的指令

"scripts": {
  "docs:dev": "vitepress dev docs", // 本地运行调试
  "docs:build": "vitepress build docs", // 项目打包：最终结果会在 .vitepress/dist 中
  "docs:serve": "vitepress serve docs" // 预览打包后的效果，此命令只有 build 成功后才会执行成功。
},
1
2
3
4
5

6. 执行npm run docs:dev，项目运行本地生成一个链接，点击能够访问看见你刚刚在index.md写的内容(例如：My name is Zhuang Niuniu)则代表运行成功