details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将>作为 SPA 运行。
footer: Copyright @ 2018-present Evan You #尾行
---注意: 每个变量名和值之间有一个英文空格,没有会报错,冒号(:)要使用英文符号
启动访问启动命令
npm run dev
出现如下信息表示启动成功,并监听端口8080
✔ Client
Compiled successfully in 174.56ms
success [12:45:17] Build 8c5288 finished in 175 ms! ( :8080/ )
浏览器访问
在浏览器中访问链接:8080,即可看到上一步创建的主页信息
按ctrl+C结束运行，执行编译命令: npm run build
^C
[root@localhost docs]# npm run build
> vuepress@1.0.0 build /vuepress
> vuepress build docs
出现如下信息表示编译成功
✔ Client
Compiled successfully in 14.65s
✔ Server
Compiled successfully in 10.23s
wait Rendering static HTML...
success Generated static files in docs/.vuepress/dist.
编译完成后在docs文件夹下多了一个.vuepress文件夹
如果在linux系统下,以点. 开头的文件夹会被隐藏,可以直接cd到文件夹下
[root@localhost docs]# ll
total 4
-rw-r--r--. 1 root root 538 Jun 14 12:44 README.md
[root@localhost docs]# cd .vuepress/
[root@localhost .vuepress]# pwd
/vuepress/docs/.vuepress
[root@localhost .vuepress]#
配置网站信息在.vuepress文件夹下新建一个config.js文件
这个文件是全局配置文件，可以配置网站的标题、描述、主题、导航栏等信息，添加内容如下
module.exports = {
title: \'莲藕淹的博客\',
description: \'莲藕淹的博客\',
dest: \'./dist\',
port: \'8080\',
head: [
[\'link\', {rel: \'icon\', href: \'/logo.jpg\'}]
],
markdown: {
lineNumbers: true
},
themeConfig: {
nav: [{
text: \'指南\', link: \'/guide/\'
}],
sidebar: {\'/guide/\':[
{
title:\'hadoop\',
collapsable: true,
children:[
\'/guide/notes/one\',
]
},
{
title:\'java\',
collapsable: true,
children:[
\'/guide/notes/two\',
]
}
]
},
sidebarDepth: 2,
lastUpdated: \'Last Updated\',
searchMaxSuggestoins: 10,
serviceWorker: {
updatePopup: {
message: "有新的内容.",
buttonText: \'更新\'
}
},
editLinks: true,
editLinkText: \'在 GitHub 上编辑此页 ！\'
}
}
nav是导航栏，sidebar是侧边栏，详细配置请参考官网文档有更详细的配置: https://www.vuepress.cn/theme/
导航栏和侧边栏的配置参考博客
https://blog.csdn.net/weixin_34910772/article/details/112240767
默认的侧边栏配置并不友好,可以使用插件自动生成,插件链接
https://github.com/realduang/vuepress-plugin-auto-sidebar
完成了基础搭建后，按照config.js里面配置的目录结构，在docs目录下新增相应的.md文件，一篇文章就是一个.md文件
[root@localhost docs]# pwd
/vuepress/docs
[root@localhost docs]# ll
total 8
drwxr-xr-x. 4 root root 32 Jun 14 13:23 guide
-rw-r--r--. 1 root root 538 Jun 14 12:44 README.md
-rw-r--r--. 1 root root 13 Jun 14 13:27 test.md
[root@localhost docs]# cd guide/
[root@localhost guide]# pwd
/vuepress/docs/guide
[root@localhost guide]# ll
total 0
drwxr-xr-x. 2 root root 28 Jun 14 13:24 hadoop
drwxr-xr-x. 2 root root 26 Jun 14 13:24 java
发布部署 安装部署nginx安装依赖包