天行健，君子以自强不息；地势坤，君子以厚德载物。
每个人都有惰性，但不断学习是好好生活的根本，共勉！
文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。
金陵子弟来相送，欲行不行各尽觞。
请君试问东流水，别意与之谁短长？
——《金陵酒肆留别》
文章目录
VuePress 是一个以 Markdown 为中心的静态网站生成器。
相关介绍可参考官网：https://vuepress.vuejs.org/zh/guide/introduction.html
一、环境
1. Node环境
Node.js版本不低于18.19.0
2. 包管理器
需要使用包管理器（如pnpm、yarn、npm等），一般安装ndoe后都会包含npm
注意：
使用pnpm需要安装vue作为peer-dependencies
使用yarn 2+需要在.yarnrc.yml文件中设置nodeLinker: ‘node-modeules’
这里我们使用npm包管理器，即npm命令
二、手动安装
官网教程：https://vuepress.vuejs.org/zh/guide/getting-started.html
1. 创建项目文件夹
在本地创建项目文件夹vuepress-manual
2. 初始化项目
打开项目文件夹，在当前路径下打开cmd窗口
2.1 git初始化
如果需要使用git远程仓库的可以执行该命令，不需要则跳过，我这里执行
git init
2.2 npm初始化
初始化包管理器
npm init
执行命令后会弹出一些选项，多数情况下回车即可
package name: (vuepress-manual) 包名，可自定义，这里默认当前文件夹，回车
version: (1.0.0) 版本号，可自定义，这里默认，回车
description: this is a manual vuepress demo 描述，可自定义，这里随便输入一句话，回车
entry point: (index.js) 入口，默认index.js，回车
test command: test 测试命令，默认空，这里直接输入了test，回车
git repository: 远程仓库地址，默认空，这里先不输入，回车
keywords: 关键字，默认空，这里不输入，回车
author: libai 作者，默认空，这里输入libai，回车
license: (ISC) 证书协议，默认是ISC，回车
以上内容均可在package.json文件中修改
截图如下
最后会展示一下所配置的内容，然后输入y即可完成项目的初始化
3. 安装VuePress
3.1 安装vuepress
安装vuepress
npm install -D vuepress@next
3.2 安装打包工具和主题
安装打包工具和主题
npm install -D @vuepress/bundler-vite@next @vuepress/theme-default@next
4. 创建docs和docs/.vuepress文件夹
创建docs和docs/.vuepress文件目录
4.1 docs
在项目文件夹vuepress-manual下创建docs文件夹
docs 目录是你放置 Markdown 文件的地方，它同时也会作为 VuePress 的源文件目录。
4.2 docs/.vuepress
在docs文件夹下创建.vuepress文件夹
docs/.vuepress 目录，即源文件目录下的 .vuepress 目录，是放置所有和 VuePress 相关的文件的地方。
当前这里只有一个配置文件。默认还会在该目录下生成临时文件、缓存文件和构建输出文件。建议你把它们添加到 .gitignore 文件中。
4.3 .gitignore
后续远程仓库创建后会有该文件，不过也可以自己在本地先创建，为的就是忽略本地的一些不必要提交的文件类型
.gitignore文件内容如下，该文件位置与docs目录同级
# VuePress 默认临时文件目录
.vuepress/.temp
# VuePress 默认缓存目录
.vuepress/.cache
# VuePress 默认构建生成的静态文件目录
.vuepress/dist
5. 创建VuePress配置文件config.js
在docs/.vuepress目录下创建config.js
docs/.vuepress/config.js内容如下
import { viteBundler } from '@vuepress/bundler-vite'
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'
export default defineUserConfig({
bundler: viteBundler(),
theme: defaultTheme(),
})
6. 创建文档
在docs文件夹下创建第一个文档README.md
内容如下
# Hello World
7. 项目目录结构
最终的项目目录结构如下
├─ docs
│ ├─ .vuepress
│ │ └─ config.js
│ └─ README.md
└─ package.json
三、启动项目
在配置之前，使用启动命令npm run docs:dev会报错
1. scripts命令配置
在项目的package.json文件中的scripts部分添加以下内容
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
配置后
用npm run docs:dev启动服务
用npm run docs:build构建项目，然后可使用dist目录部署项目
在 docs/.vuepress/dist 目录中可以找到构建生成的静态文件
package.json完整内容如下
{
"name": "vuepress-manual",
"version": "1.0.0",
"description": "this is a manual vuepress demo",
"main": "index.js",
"scripts": {
"test": "test",
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
},
"author": "libai",
"license": "ISC",
"devDependencies": {
"@vuepress/bundler-vite": "^2.0.0-rc.15",
"@vuepress/theme-default": "^2.0.0-rc.42",
"vuepress": "^2.0.0-rc.15"
}
}
2. 运行项目
执行命令运行项目
npm run docs:dev
运行后输出如下
3. 访问项目
可根据输出的访问地址访问项目
四、站点配置
关于站点的一些配置项，可参考文章进行定制化配置，如主题、导航栏等
VuePress搭建个人博客（配置）
感谢阅读，祝君暴富！