之前一直手写文档，真心累啊，尤其只有一个人维护的时候，而且如果想要做完美，工作量巨大，最近发现了vuePress这个好东西，一天能搞定一个基础的的文档，太方便了。
这里是我写的一个demo，如果没有耐心看下面的文字，可以直接拿去改改就用：
下面主要是完成一个简单项目的步骤，不可能将细枝末节全部说清楚，所以具体知识点还请移步官方文档
前言：
以下命令都使用yarn进行操作
npm install -g yarn 安装yarn，日常建议使用yarn，比较快
yarn config set registry https://registry.npm.taobao.org -g 设置淘宝下载源
1.创建项目
1.1 创建项目命令
mkdir vuepress && cd vuepress 创建文件夹
yarn init 初始化项目
yarn add-D vuepress 安装vuepress
mkdir docs && echo # Hello VuePress > docs/README.md 创建docs文件夹和readme.md文件
yarn add less less-loader --dev 安装less，根据自己的css语言自行选择安装
npm install element-ui -S 安装element-ui ，自行选择是否安装
1.2 修改package.json配置
增加：
"scripts": {
"dev": "vuepress dev docs --temp .temp",
"build": "vuepress build docs"
},
加temp是为了解决vuepress 不会热刷新的问题
1.3 创建目录
docs目录下创建：
.vuepress
components文件夹 和vue项目的component类似，用来放自定义组件
styles 文件夹
index.styl 文件 css样式放在这里，不要改文件名字，后缀名也不可改
config.js 文件 类似vue项目的vue.config.js 配置文件
enhanceApp.js 文件 类似vue项目的main.js入口文件
1.4 运行
yarn run dev 运行
http://localhost:8080/ 打开页面
2.导航配置
分析导航后，在 docs 的根目录创建对应的文件夹和readme.md文件
2.1创建目录
使用说明 对应 /guide/ 和 /guide/README.md
组件 对应 /component/ 和 /component/README.md
API 对应 /api/ 和 /api/README.md
更改日志 对应 /log/ 和 /log/README.md
创建完目录之后，在readme.md中随便写点文字
2.2 配置导航和侧边栏
打开.vuepress里面的config.js ，并且复制以下代码：
module.exports = {
title: '头部左边标题',
description: 'meta的描述内容',
// 注入到当前页面的 HTML <head> 中的标签
head: [
['link', {
rel: 'icon',
href: '/favicon.ico'
}], // 增加一个自定义的 favicon(网页标签的图标)
],
base: '/',
markdown: {
lineNumbers: true // 代码块显示行号
},
themeConfig: {
nav: [{
text: '使用说明',
link: '/guide/'
},
{
text: '组件',
link: '/component/'
},
{
text: 'API',
link: '/api/'
},
{
text: '更改日志',
link: '/log/'
},
],
sidebar: {
'/guide/': [''],
'/component/': [ ''],
'/api/': [''],
'/log/': [''],
},
sidebarDepth: 2
},
};
2.3 重启运行
重启之后，我们可以看到以下效果，点击右上角的导航，会发现页面会发生切换
2.4 修改docs根目录的readme.md代码
注意：下面的1.jpg 实际路径为 .vuepress/public/1.jpg
---
home: true
heroImage: /1.jpg
actionText: 快速上手 →
actionLink: /guide/
features:
- title: 简洁至上
details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: 2021，rainlofty，mengmanyan@163.com
---
网友评论