VuePress入门静态网站
适合那些人群
VuePress文档依赖于markdown，简单来说优点如下：
- 扩展性与兼容性最强，没有之一，随时可以迁移文档
- 层级分明
- 纯文本记录，快！！！
提示
当然缺点也是十分明显，虽然可以嵌入HTML语法，却始终在本地资源上加载有点不方便
使用Typora创建md
也可以使用各类代码编辑器来创建，我对比过vscode、webstorm、sublime等的编辑器，在编辑器里适合修改文档，如批量重命名、搜索等等。在编写文档上我更加偏向于typora，特别是插入图片和表格时，这类所见即所得的编辑器还是有自己独特的用户体验。
提示
根据配置，typora会在当前文件下创建一个assets的资源文件夹
所以我自己的习惯是，使用源码模式写作，而插入图片和其他资源（包括链接、表格等）使用可视化编辑，按一下F3即可切换，一举两得。
第一步：初始化环境
VuePress使用Vue驱动，对于有前端开发经验的人来说上手难度不大。
提示
重中之重看文档！！！以下内容与官网重复的内容没必要重新编写
非必要可以不使用typescript，毕竟单纯的博客在非要折腾自己，不如多放时间在内容本身上面，当然有技术追求的最好使用typescript，以后typescript肯定是趋势来的。
提示
需要有一点点bash知识
安装VuePress
#全局安装
yarn global add -D vuepress@next
#当前文件夹安装
yarn add -D vuepress@next
2
3
4
#全局安装
npm i -g -D vuepress@next
#当前文件夹安装
npm install -D vuepress@next
2
3
4
创建目录和初始化
#自定义目录
mkdir vuepress-starter
#自定义目录
cd vuepress-starter
git init
yarn init
2
3
4
5
6
7
mkdir vuepress-starter
cd vuepress-starter
git init
npm init
2
3
4
5
添加脚步命令
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
2
3
4
5
6
添加 .gitignore 文件
将默认的临时目录和缓存目录去掉，不提交到git仓库
echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore
2
3
开启本地服务器
yarn docs:dev
npm run docs:dev
第二步：文章配置
在docs目录下存放markdown格式的文件就是对外发布的文章
├─ docs
│ ├─ .vuepress
│ │ └─ config.js
│ └─ README.md
├─ .gitignore
└─ package.json
2
3
4
5
6
新建配置文件，网站所有的配置均在docs/.vuepress/config.js文件中。
module.exports = {
lang: 'zh-hans',
title: '医程通',
description: '产品文档、前端技术文档说明',
themeConfig: {
logo:'/images/logo.png'
}
}
2
3
4
5
6
7
8
首页配置
配置docs/REANME.md实现首页
---
home: true
title: Home
# 文件路径docs/public/images，没有则自己创建。这段记得删除，不要复制过去
heroImage: /images/logo.png
actions:
- text: 产品说明
#路径需更换在docs/的文件或文件夹路径，这段记得删除，不要复制过去
link: /product/1.md
type: primary
- text: 前端技术
link: /frontEnd/2.md
type: secondary
features:
- title: 简介1
details: 细节
- title: 简介2
details: 细节
- title: 简介3
details: 细节
footer: Copyright © 2021-present Pangzhiming
---
# 这里是标题
下面可以正常的编写markdown
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
文章路径
根路径为docs，所有的文章都需要放置在docs下，除了一些图片资源以外。
提示
如果配置的是文件夹路径，点击后则会跳转到该文件夹的README.md文件，没有该文件则会404
警告
坑：文件夹不能使用中文，不然无法跳转
第三步：配置导航
docs/.vuepress/config.js
导航需要在themeConfig中配置navbar
module.exports = {
lang: 'zh-hans',
title: '医程通',
description: '产品文档、前端技术文档说明',
themeConfig: {
logo:'/images/logo.png',
navbar:{
'/product/': [{
text: '产品功能指引',
children: [
'/product/满诊医生推荐配置指引.md',
'/product/阳光对账平台使用.md'
]
}]
}
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
提示
navbar 与 sidebar 两者的配置类似且有两种配置方式，看下面
第一种：具有导航标题（推荐）
navbar: {
text: '技术文档',
children: [{
text: '前端技术文档',
children: [
'/frontEnd/前端技术架构重构方案v1.md',
'/frontEnd/项目管理.md'
]
}]
}
2
3
4
5
6
7
8
9
10
第二种：没有导航标题
navbar: {
text: '前端技术文档',
children: [
'/frontEnd/前端技术架构重构方案v1.md',
'/frontEnd/项目管理.md'
]
}
2
3
4
5
6
7
效果如下：
为什么推荐第一种，原因是更好管理，而且信息层级更清晰
注意
其他配置查看官网的默认主题配置
第四步：配置侧栏
docs/.vuepress/config.js
与导航类似，需要在themeConfig中配置sidebar
themeConfig: {
sidebar: {
'/product/': [{
text: '产品功能指引',
children: [
'/product/满诊医生推荐配置指引.md',
'/product/阳光对账平台使用.md'
]
}],
}
}
2
3
4
5
6
7
8
9
10
11
警告
与导航配置不同的是，key需要使用根路径/作为key，假如你的文件是在文件夹里面则必须要填写完整的路径/file/。配置不成功可clone本仓库作为参考。
第五步：构建
yarn docs:build
生成文件在docs/.vuepress/dist目录下，需要构建网站的时候提交该目录即可。