VuePress生成器，以md檔案生成文檔說明

開發一個自己的元件庫，那麼如何提供說明文檔呢？

大家當然可以動手開發一個，但是代價無疑有點大，那麼有什麼速成的方法嗎？

當然有！！！，VuePress就可以很好的實作我們的訴求，讓我們一起學習一下。

一、安裝、建構VuePress

//1、建立檔案夾vuepress-demo，并進入
mkdir vuepress-demo && cd vuepress-demo

// 2、包管理器進行初始化，根目錄會會出現package.json檔案
yarn init # npm init
//3、将 VuePress 安裝為本地依賴
yarn add -D vuepress # npm install -D vuepress

//4、建立你的第一篇文檔
mkdir docs && echo '# Hello VuePress' > docs/README.md

//5、在 package.json 中添加一些 scripts
{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}
//6、在本地啟動伺服器
yarn dev # npm run dev
           

浏覽器上通路位址就可以了，網站是自适應的(pc、m)

二、檔案結構

VuePress 遵循 “約定優于配置” 的原則，推薦的目錄結構如下

.
├── docs
│   ├── .vuepress (用于存放全局的配置、元件、靜态資源等)
│   │   ├── components (目錄中的 Vue 元件将會被自動注冊為全局元件)
│   │   ├── theme (存放本地主題)
│   │   │   └── Layout.vue
│   │   ├── public (靜态資源目錄)
│   │   ├── styles (存放樣式相關的檔案)
│   │   │   ├── index.styl （将會被自動應用的全局樣式檔案）
│   │   │   └── palette.styl （用于重寫預設顔色常量，或者設定新的 stylus 顔色常量）
│   │   ├── templates (存儲 HTML 模闆檔案)
│   │   │   ├── dev.html （用于開發環境的 HTML 模闆檔案）
│   │   │   └── ssr.html （建構時基于 Vue SSR 的 HTML 模闆檔案）
│   │   ├── config.js (配置檔案的入口檔案，也可以是 YML 或 toml)
│   │   └── enhanceApp.js (用戶端應用的增強)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json