前言：最近需要出一份技术文档，第一次尝试VuePress。简单记录下，大概是你能见到最简单的版本了
先看效果吧
首页.png
导航-指南.png
组件.png
导航-JS.png
再说下步骤
- 安装 VuePress（本地安装或全局安装均可，官网不再推荐全局安装 VuePress）
//本地安装
npm install -D vuepress
//全局安装
npm install -g vuepress
- 创建并进入项目
mkdir vuepress-app && cd vuepress-app
- 初始化项目
npm init -y // 默认配置yes
- 在生成的package.json中，添加如下两个启动命令
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
- 创建基本项目结构
官方只有推荐目录结构，并没有现成的cli，所以需要通过命令行或手动创建。
我的结构比较简单，如下（其中有后缀的是文件，没后缀的是文件夹）：
vuepress-app
├── docs
│ ├── .vuepress
│ │ ├── public
│ │ │ └── logo.vue
│ │ ├── config.js
│ ├── components //导航"组件"模块
│ │ └── app-back.md
│ │ └── xxx.md
│ │ └── xxx.md
│ │ └── README.md
│ ├── home //导航"指南"模块
│ │ └── attention.md
│ │ └── icon.md
│ │ └── README.md
│ ├── js //导航"JS"模块
│ │ └── isLogin.md
│ │ └── xxx.md
│ │ └── xxx.md
│ │ └── README.md
│ ├── README.md
└── package.json
- 配置config.js
该文件为项目最重要的配置文件，几乎所有配置项都是在此进行。官网-config配置
我来了一个最简单的配置：
module.exports = {
title: 'APP文档',
head: [ // 注入到当前页面的 HTML <head> 中的标签
['link', {rel: 'icon', href: '/logo.png'}], // 增加一个自定义的 favicon(网页标签的图标)
],
themeConfig: {
logo: '/logo.png', // 左上角logo
nav: [ // 导航栏配置
{text: '指南', link: '/home/'},
{text: '组件', link: '/components/'},
{text: 'JS', link: '/js/'}
],
sidebar: { // 侧边栏配置
'/home/': [
'',
'icon',
'attention'
],
'/components/': [
'',
'app-back',
'xxx',
'xxx'
],
'/js/': [
'',
'isLogin',
'xxx',
'xxx'
]
}
}
};
注意：路由根路径为docs文件夹，静态资源（图片）根路径为public文件夹
- 启动项目，展示见文章头部
npm run dev
好啦，一个极简版的文档完成啦。撒花花～～
网友评论