搭建一个vuepress项目

项目初始化

1、创建一个文件夹

2、项目初始化

npm init

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、网站效果如下：

你只要运行：

npm run docs:build

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