超详细的vuepress搭建教程

准备工作

项目搭建工作

打开或者新建一个项目。新建项目：

// 新建项目目录
mkdir myVuepress
cd myVuepress

// 快速生成pachage.json文件
npm init -y

安装vuepress

安装vuepress包

npm install vuepress

添加指令
打开package.json文件，添加项目运行和打包命令

   "scripts": {
      // 添加这两条命令
       "docs:dev": "vuepress dev docs",
       "docs:build": "vuepress build docs"
   },

运行指令：npm run docs:dev

打包指令：npm run docs:build

到这里，项目准备工作就完成了，接下来就是配置vuepress项目了。

vuepress配置

首页配置

首先在项目根目录下新建docs目录，并且在docs目录下新建一个README.md文件，这个文件就是项目打开的首页。我们可以进行以下配置:

---
home: true
actionText: 进入文档 →
actionLink: /guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助写作，更加专注与内容的编写。
- title: 高性能
  details: 每个页面都预渲染生成静态的 HTML，在页面被加载的时候，将作为 SPA 运行，具有更好的性能和更快速的体验。
- title: 响应式
  details: 响应式页面，能够兼容多种设备。在不同端的设备上，实现相同的浏览体验。
footer: Be yourself the happiest | Copyright © 2023
---

对应的页面如下图：

这里的autoLink字段对应的路径就是docs目录下的文件位置。例如：
在上述配置，就是在docs目录下有个guide目录

docs
  |-- guide
        |-- README.md
        |-- hello.md

配置路径为 /guide/，代表的就是跳转到guide目录下的REAMD.md。在vuepress中，路径为xxx/表示默认xxx目录下的README.md文件。

核心配置

vuepress最核心的配置应该就是进入文档的主页面了，主页面结构的配置是比较重要的。

1. 在docs目录下新建.vuepress目录
2. 在 .vuepress 目录下新建config.js文件
   详细介绍如下：

module.exports = {
	title: '',  // 首页的大标题，内容页面的头部左侧标题
	description: '', // 首页的主要描述，大标题下方位置
	base: '',
	// markdown设置
	markdown:{
		lineNumbers: true, // 代码块行号
	}
	themeConfig:{
		// 头部导航（右侧）
		nav: [
			{ text: "联系作者", link: "/guide/concact" }, // link是路径
			// link 可以链接外部地址，界面样式会带有 小箭头 
			{ text: "github", link: "https://github.com/JAY-825/knowledge-gihub" },
			...
		],
		// 左侧导航
		sidebar: [
			{
				title: 'vue2系列', // 标题 必要的
                collapsable: false, // 可选的, 默认值是 true,表示是否可以折叠收缩
                sidebarDepth: 1, // 可选的, 默认值是 1，表示显示的标题深度(显示几级)
                // 子标题
                children: [
                    ['vue2/', "vue2特点介绍"],
                    ['vue2/spa', "对单页面应用(spa)的理解"],
					...
                ]
			}
		]
	},
	lastUpdated: 'Last Updated',  // 最后更新时间
	...
}

以上是大概配置，并非全部配置。更多配置可以去vuepress官网查看：vuepress官网配置

文档中可以添加图片之类的，像这些资源都要放在指定的文件夹下，具体可以去查看官网指南：vuepress官网指南

页面md文档全部写在docs目录下(可以在docs下新建目录，并不是一定要直接在docs目录里)

添加完内容后，就可以执行运行命令了，快速试试看吧。
运行指令：npm run docs:dev
打包指令：npm run docs:build

现在的项目只能本地访问，我们可以把项目部署到github pages上，这样我们就可以通过网址访问到我们的项目了(线上网页，https访问哦)。
下面推荐一篇很详细的将vuepress项目部署到github pages上的文章：
【vuepress】将vuepress项目部署到github pages上