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、配置主頁，這是 個叫README.md文件
| --- | |
| 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、我的文件目錄如下：
4、網站效果如下：
接下來你還可以配置各類主題
參照網站： http://www.z01.com/cli
終極發布
你只要運行：
npm run docs:build
就能生成文件，將生成的文件部署的服務器上就可以了。