VuePress初体验-极简版

前言：最近需要出一份技术文档，第一次尝试VuePress。简单记录下，大概是你能见到最简单的版本了

先看效果吧

首页.png

导航-指南.png

组件.png

导航-JS.png

再说下步骤

1. 安装 VuePress（本地安装或全局安装均可，官网不再推荐全局安装 VuePress）

//本地安装
npm install -D vuepress
//全局安装
npm install -g vuepress

2. 创建并进入项目

mkdir vuepress-app && cd vuepress-app

3. 初始化项目

npm init -y // 默认配置yes

4. 在生成的package.json中，添加如下两个启动命令

"scripts": {
  "dev": "vuepress dev docs",
  "build": "vuepress build docs"
}

5. 创建基本项目结构
   官方只有推荐目录结构，并没有现成的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

6. 配置config.js
   该文件为项目最重要的配置文件，几乎所有配置项都是在此进行。官网-config配置
   我来了一个最简单的配置：

module.exports = {
    title: 'APP文档',
    head: [ // 注入到当前页面的 HTML  中的标签
        ['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文件夹

7. 启动项目，展示见文章头部

npm run dev

好啦，一个极简版的文档完成啦。撒花花～～