一、什么是 VuePress ?
VuePress是基于 vue 的极简静态网站生成器，实际上就是一个 vue 的单页应用，内置 webpack，可以用来写文档。详见 VuePress中文网
VuePress可用于将 markdown 文件展示为 WEB 页面
二、展示效果
首页
文档页
三、开始搭建
目标：记录我学习HTMl、CSS、JavaScript的笔记。创建含有三篇文章（HTML、CSS、JavaScript）的项目
前提条件
使用 VuePress 需要先安装 Node.js，版本号要在 8.6 以上
1.创建项目目录并进入
mkdir my-vuepresscd 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: trueheroImage: logo.pngtagline: HTML + CSS + JavaScriptactionText: 开始学习 →actionLink: /HTML/features:- title: HTMLdetails: 超文本标记语言- title: CSSdetails: 层叠样式表- title: JavaScriptdetails: JS脚本footer: 静夜聆雨 © ---
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./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，启动服务器
个人博客就搭建好啦！
