快速創建vuepress項目-使用vuepress+Markdown寫文檔併發布爲網站

• 搭建一個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、配置主頁，這是 個叫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

就能生成文件，將生成的文件部署的服務器上就可以了。