---

天行健，君子以自强不息；地势坤，君子以厚德载物。

---

每个人都有惰性，但不断学习是好好生活的根本，共勉！

---

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

---

金陵子弟来相送，欲行不行各尽觞。
请君试问东流水，别意与之谁短长？
——《金陵酒肆留别》

---

---

VuePress个人博客专栏

---

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搭建个人博客（配置）

---

感谢阅读，祝君暴富！

---