快速创建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、我的文件目录如下:
快速创建vuepress项目(使用vuepress写文档)的更多相关文章
- myeclipse创建的项目发布不了文档
进入MyEclipse的工作目录下/.metadata/.plugins/org.eclipse.core.runtime/.settings/com.genuitec.eclipse.ast.dep ...
- 2springboot:快速创建springboot项目
使用IDEA快速创建springboot项目流程: 创建新的项目选择 项目的命名以及包名 需要什么包就导入什么包 进行测试的单元 <dependency> <groupId>o ...
- Spring-boot(一)通过向导快速创建Spring-boot项目
通过向导快速创建Spring-boot项目 创建步骤: 选择Spring Initializr 填写组织和模块名 选择对应的模块 注:这里左侧的模块比较多,玩家可以根据自己的实际需要自由选择,此处暂时 ...
- 【快学springboot】1.快速创建springboot项目
若图片查看异常,请前往掘金查看:https://juejin.im/post/5d00e793f265da1b614ff10b 使用spring initialize工具快速创建springboot项 ...
- 使用开源文档工具docsify,用写博客的姿势写文档
前提 下面的简介摘抄自docsify的官网 https://docsify.js.org 中的简介 docsify是一个神奇的文档网站生成器.他可以快速帮你生成文档网站.不同于GitBook.Hexo ...
- 用sphinx-doc优雅的写文档
Sphinx 是一个工具,它使得创建一个智能而美丽的文档变得简单.作者Georg Brandl,基于BSD许可证. 起初为写 Python 文档而诞生的 Sphinx,支持为各种语言生成软件开发文档. ...
- 写文档太麻烦,试试这款 IDEA 插件吧!
前言 每次开发完新项目或者新接口功能等,第一件事就是提供接口文档.说到接口文档,当然是用 Markdown 了.各种复制粘贴字段,必填非必填,字段备注,请求返回示例等等.简直是浪费时间哇.所以想到了开 ...
- ToShowDoc拯救不想写文档的你
ToShowDoc拯救不想写文档的你 写注释已经够折磨开发者了,显然天天curd的我们再去写文档岂不是分分种要被逼疯. 我想每个人都有这种经历 加了一个参数文档忘了更新 参数名更改文档忘了更新 删掉一 ...
- Markdown: 用写代码的思维写文档
作者:吴香伟 发表于 2014/08/07 版权声明:可以任意转载,转载时务必以超链接形式标明文章原始出处和作者信息以及版权声明 本文不讲解Markdown的语法规则,只关注它带来的好处以及我使用的方 ...
- Swagger2边写代码边写文档
作为一个开发人员最怕的就是写文档了,但是要想成为一个合格的程序员,写好文档也是一个必备的技能.开发中我们经常要写接口服务,既然是服务就要跟别人对接,那难免要写接口文档,那么如何”优雅“的写接口文档 ...
随机推荐
- normal use for autotools
1. remove temporary files, only used for test purpose. ls | sed -e rm -rf 2. edit autogen.sh echo &q ...
- 前端(五)—— a、img、list标签
a标签.img标签.list标签 一.a标签 1.常用用法 <a href="https://www.baidu.com">前往百度</a> <a h ...
- 服务器搭建node环境
最近由于工作原因开始学习服务器的搭建和环境配置.记录一下我在服务器搭建node环境的步骤.中间踩了很多坑. 首先,确定自己的服务器可以连接到外网,如果连接不上的话,会出现ETIMEOUT的报错,但这只 ...
- 高级UI晋升之View渲染机制(二)
更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680 优化性能一般从渲染,运算与内存,电量三个方面进行,今天开始说聊一聊Android ...
- 自定义hive文件和记录格式及文本文件数据编码
(1)一段 建表语句: [ROW FORMAT row_format] [STORED AS file_format] | STORED BY 'storage.handler.class.name' ...
- 53-Ubuntu-打包压缩-3-gzip压缩和解压缩介绍
gzip tar与gzip命令结合可以实现文件打包和压缩. tar只负责打包文件,但不负责压缩. 用gzip压缩tar打包后的文件,其扩展名一般为xxx.tar.gz. 注:在Linux中,最常见的压 ...
- oh my zsh 如何启用插件
注 根据自己的需求启用插件.但是,插件具体实现什么功能就得自己看啦. 官网说明 实践 其实默认oh my zsh(以下简称zsh)已经在安装的时候就帮我们下载好了所有插件,只不过需要用户自己选择启用哪 ...
- JQ基本
jQuery的入口函数: 特点:1. 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完毕,jQuery帮我们完成了封装. 2. 相当于原生js中的DOMContentLoaded. ...
- 关于while循环中的break和continue的区别
while循环如果不加条件限制的话,它会一直循环下去,那么问题就来了,如果我不用条件去终止while循环的话,那么我该用什么方法去终止呢? 你可以选择两种终止while循环的方法 1.break 强 ...
- java ThreadPoolExecutor 异常捕获
一,创建一个线程池 其中: public void rejectedExecution(Runnable r, ThreadPoolExecutor executor) 饱和策略执行时的具体逻辑. p ...