一、什么是 VuePress ?
VuePress 是基于 vue 的极简静态网站生成器，实际上就是一个 vue 的单页应用，内置 webpack，可以用来写文档。详见 VuePress中文网
VuePress 可用于将 markdown 文件展示为 WEB 页面
二、展示效果
首页
文档页
三、开始搭建
目标：记录我学习HTMl、CSS、JavaScript的笔记。创建含有三篇文章（HTML、CSS、JavaScript）的项目
前提条件
使用 VuePress 需要先安装 Node.js，版本号要在 8.6 以上
1.创建项目目录并进入
mkdir my-vuepress
cd my-vuepress
2.初始化
yarn init -y
# 或者使用 npm init -y
以下都将使用 yarn 包管理器
3.将 VuePress 安装为本地依赖
yarn add -D vuepress # 安装为开发依赖
4.创建文件夹和文件
基本文件夹结构
my-vuepress
├─── docs
│ ├── README.md
│ └── .vuepress
│ ├── public
│ ├── logo.png
│ └── config.js
└── package.json
文档文件夹结构
my-vuepress
├─── docs
│ ├── css
│ ├── JavaScript
│ ├── html
│ ├── assets
│ ├── REMDME.md
│ ├── HTML01.md
│ ├── HTML02.md
│ ├── HTML03.md
│ ├── HTML04.md
│ ├── HTML05.md
其中，每个文章的文件夹内都需要有一个 README.md 文件，该文件是每篇文章的首页。剩余的md文件是子页面。assets 存放图片等内容，md 文件中不要使用一级标题，引用资源时路径使用相对路径
5.在 package.json 中添加 scripts
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
效果如下：
{
"name": "my-vuepress",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"vuepress": "^1.8.2"
},
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
}
6.配置 README.md
README.md 是项目首页的内容，如果想快速看到效果，可以直接在里面写一段内容，例如：
## 欢迎访问我的第一个页面
然后运行
yarn dev
即可看到页面效果：
推荐的用法
推荐在 README.md 文件中使用 YAML 语法添加内容生成首页
示例
---
home: true
heroImage: logo.png
tagline: HTML + CSS + JavaScript
actionText: 开始学习 →
actionLink: /HTML/
features:
- title: HTML
details: 超文本标记语言
- title: CSS
details: 层叠样式表
- title: JavaScript
details: JS脚本
footer: 静夜聆雨 © 2021
---
actionText: 开始学习 →
actionLink: /HTML/点击开始学习，会先进入“HTML”的页面
效果
7.配置 config.js
module.exports = {
title: '我的vuepress', //网站标题
description: '我的个人网站', //网站描述
head: [ //注入到当前HTMl页面 <head> 中的标签
['link', {
rel: 'icon',
href: '/logo.png' //图片应存放在public目录下
}], // 增加一个自定义的 favicon(网页标签的图标)
],
markdown: {
lineNumbers: false // 代码块显示行号
},
themeConfig: {
nav: [{ //导航栏
text: 'HTML笔记',
link: '/html/'
},
{
text: 'CSS笔记',
link: '/css/'
},
{
text: 'JS笔记',
link: '/JavaScript/'
}
],
sidebar: {
//sidebar: 'auto', // 侧边栏配置,设置auto是自动配置
//sidebarDepth: 2, // 侧边栏显示2级
'/html/': [{
title: 'HTML笔记',
sidebarDepth: 2,
collapsable: true, //可折叠
children: ['', 'HTML01', 'HTML02', 'HTML03', 'HTML04', 'HTML05'] //2级页面，第一个设置为空字符串时，显示的是README.md的内容
}],
'/css/': [{
title: 'CSS笔记',
sidebarDepth: 2,
collapsable: true,
}],
'/JavaScript/': [{
title: 'JS笔记',
sidebarDepth: 2,
collapsable: true,
}]
}
},
/**
* Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/
*/
// 插件，安装后才能使用 ，安装方法 yarn add -D 插件名称
plugins: [
'@vuepress/plugin-back-to-top', //返回顶部的插件
'@vuepress/plugin-medium-zoom', //图片放大的插件
[
'one-click-copy',
{
copyMessage: '复制成功'
}
],
['vuepress-plugin-code-copy', true] //一键复制的插件
]
}
8.配置完成，查看效果
运行 yarn dev，启动服务器
个人博客就搭建好啦！