快速創建vuepress項目（使用vuepress寫文檔）

vuepress的官方文檔：https://vuepress.vuejs.org/zh/guide/

參考：
https://segmentfault.com/a/1190000016333850

https://juejin.im/post/5d1f1136f265da1ba77cc3d3

https://juejin.im/post/5d1ab9c151882579dd60d5e0

視頻教程：https://www.bilibili.com/video/av78052346?p=2

搭建一個vuepress項目

項目初始化

1、創建一個文件夾

2、項目初始化

npm init

安裝配置VuePress

1、進入創建的文件夾

2、在文件夾目錄下安裝VuePress

npm install -D vuepress

3、新建文件夾，並命名為docs

4、創建一個Markdown文件

echo "# Hello VuePress!" > docs/README.md

5、啟動預覽

npx vuepress dev docs

如果使用vscode，則根據控制台提供的地址進行訪問

6、配置package.json

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

7、更換啟動命令，再次啟動，查看是否配置成功

npm run docs:dev

編寫文檔

1、配置主頁

---
home: true
heroImage: /flypig.gif
heroText: 中葯溯源系統
tagline: 接口文檔
actionText: 快速上手 →
actionLink: /guide/
features:
- title: 簡潔至上
  details: 以 Markdown 為中心的項目結構，以最少的配置幫助你專注於寫作。
- title: Vue驅動
  details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 組件，同時可以使用 Vue 來開發自定義主題。
- title: 高性能
  details: VuePress 為每個頁面預渲染生成靜態的 HTML，同時在頁面被加載的時候，將作為 SPA 運行。
footer: 中葯溯源接口文檔1.0 | Copyright © 2019 flypig
---

2、在docs文件夾下創建.vuepress文件夾，並在.vuepress下創建config.js和public文件夾，public文件夾下放圖片等靜態文件

我的config.js的配置

module.exports = ctx => ({
    title: 'xxxxxx文檔',
    head: [['link', { rel: 'icon', href: '/logo.ico' }]],
    description: 'Just playing around',
    theme: '@vuepress/theme-default',
    themeConfig: {
        nav: [
            { text: '首頁', link: '/' },
            { text: '指南', link: '/guide/' },
            {
                text: '接口', items: [
                    { text: '微信小程序', link: '/interface/wxapi/' },
                    { text: '網站', link: '/interface/web/' }
                ]
            },
            { text: '我的博客', link: 'https://www.cnblogs.com/flypig666' },
            { text: '我的碼雲', link: 'https://gitee.com/flypig666/projects' },
        ],
        sidebar: {
            "/guide/": [""],
            "/interface/wxapi/": [""],
            "/interface/web/": [""],
        }
    }
})

3、我的文件目錄如下：