VuePress 由两部分组成：第一部分是一个极简静态网站生成器
1.0 安装vuepress
npm install -g vuepress
2.0 初始化 package.json
npm init -y
3.0 新建文件夹 docs 并且配置package.json 添加下面两行代码
image
4.0 然后添加这几个文件
4.1 在docs文件夹下面 新建README.md
内容如下
image
4.2 创建.vuepress 文件夹 下面创建config.js 然后创建 public 文件夹 里面放一张图片
如下图
image
4.3 运行命令
npm rundocs:dev
4.4 忘记很重要的一步了 就是写config.js
代码如下
module.exports = {
title:'个人主页',
description: 'Reggie Study Notes',
head: [
['link', { rel: 'icon', href: '/img/logo.ico' }],
['link', { rel: 'manifest', href: '/manifest.json' }],
],
dest: './docs/.vuepress/dist',
ga: '',
evergreen: true,
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{
text: 'Languages',
items: [
{ text: 'Chinese', link: '/language/chinese' },
{ text: 'English', link: '/language/english' }
]
},
{ text: 'External', link: 'https://www.baidu.com' },
],
}
}
5.0 打开地址看到的图片就是这样了
image
6.0
在themeConfig 对象里面添加 下面代码
sidebar: [
{
title: 'page-1',
collapsable: false,
children: [
'/page-1/',
'/page-1/one/',
'/page-1/two/',
]
},
{
title: 'page-a',
children: [
'/page-a/',
]
},
],
目录结构是这样的
image.png
最后再运行一下，你就看到是这样了，不聊啦，我要去做饭了。
image.png
回来了有个很重要的没讲 ，就是 代码高亮显示 请看
### js高亮
test = {
name : function () {
return 'hello';
},
age : function () {
return 13;
}
}