参考链接1: https://www.cnblogs.com/softidea/p/10084946.html.
参考链接2: https://www.jianshu.com/p/2ac5727947cd.
demo代码地址:https://gitee.com/wk1255315430/vue-press-demo.git
搭建
- 创建项目文件夹
mkdir vuepressBlogDemo
- 全局安装 VuePress
// An highlighted block
npm install -g vuepress
- 进入 vuepressBlogDemo 文件夹,初始化项目
npm init -y
- 进入package.json,修改脚本内容
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
- 修改配置文件 - config.js
module.exports = {
title: 'Hello VuePress',
description: 'Hello, my friend!',
head: [
['link', {
rel: 'icon',
href: `/favicon.ico`
}]
],
dest: './docs/.vuepress/dist',
ga: '',
evergreen: true,
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{
text: 'Languages',
items: [
{ text: 'Chinese', link: '/Languages/chinese/' },
{ text: 'English', link: '/Languages/english/' }
]
},
{ text: 'External', link: 'https://www.baidu.com' },
],
sidebarDepth: 2,
sidebar: [
{
title: 'Guide',
collapsable: false,
children: ['/guide/']
},{
title: 'Languages',
collapsable: false,
children: [ { title: "chinese", path: "/Languages/chinese/" },'/Languages/english/']
}
]
}
}
- 创建文件夹和文件
在 vuepressBlogDemo 文件夹中创建 docs 文件夹,在 docs 中创建 .vuepress 文件夹,在.vuepress中创建 public 文件夹和 config.js 文件,最终项目结构如下所示:
vuepressBlogDemo
├─── docs
│ ├── README.md
│ └── .vuepress
│ ├── public
│ └── config.js
└── package.json
// An highlighted block
var foo = 'bar';