手把手教你搭建一个跟vue官方同款文档（vuepress）
前言
VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
概要
- 基础命令
- 基础配置
- 总结
基础命令（粘贴复制就行了，我也是复制过来的）
mkdir vuepress-starter && cd vuepress-starteryarn init # npm inityarn add -D vuepress # npm install -D vuepressmkdir docs && echo '# Hello VuePress' > docs/README.md"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
} //在package.json 中配置启动、打包命令
yarn docs:dev # npm run docs:dev(访问http://localhost:8081)：success [11:30:31] Build 34c8e7 finished in 163 ms! ( http://localhost:8081/ ) 端口由你自己的服务决定哦
实际效果（这也太简单了吧，所以继续）
基础配置
- 参考官方文档
- 预期：左侧边栏，头部，底部
在docs下面创建config.js 文件（很重要），我的目录结构就是这样子啦~
看看config都有哪些配置
module.exports = {
title: 'fannieGirl', // 显示在左上角的网页名称以及首页在浏览器标签显示的title名称
description: 'fannieGirl的前端记录', // meta 中的描述文字，用于SEO
// 注入到当前页面的 HTML <head> 中的标签
head: [
['link', { rel: 'icon', href: '/avatar.gif' }], //浏览器的标签栏的网页图标
],
markdown: {
lineNumbers: true
},
serviceWorker: true,
themeConfig: {
logo: '/avatar.gif',
lastUpdated: 'lastUpdate', // string | boolean
nav: [
{ text: '首页', link: '/' },
{
text: '分类',
ariaLabel: '分类',
items: [
{ text: '文章', link: '/pages/folder1/test1.md' },
{ text: '日记', link: '/pages/folder2/test4.md' },
]
},
{ text: '功能演示', link: '/pages/folder1/test3.md' },
{ text: 'Github', link: 'https://github.com/dwanda' },
],
sidebar: {
'/pages/folder1/':[
{
title: '测试菜单1', // 必要的
collapsable: false, // 可选的, 默认值是 true,
sidebarDepth: 1, // 可选的, 默认值是 1
children: [
['test1.md', '子菜单1'],
['test3.md', '子菜单2']
]
},
{
title: '测试菜单2',
collapsable: false, // 可选的, 默认值是 true,
children: [
['test2.md', '子菜单1']
]
}
],
}
}
}
Fannie总结
搭建这样的文档，拿一份别人配置好了的就行了。so easy!
效果是很十分的巴适，想部署到我的github.io上面！但是三年前我用hexo搭建了个人博客。今天访问还是拒绝连接了（但我解决了这个问题）
搭建好了本地这个文档，我打算开始写jointJs 教程（主要是官方的文档十分令人抓狂）也在考虑是不是要干掉Hexo博客。。。。还有有。。。非主流的告白）
时间猝不及防，情感风轻云淡，但代码程序是最真诚的，依然还在计算在一起多少天了~~~~~
手把手教你搭建一个跟vue官方同款文档（vuepress）的更多相关文章
- 手把手教你搭建一个Elasticsearch集群
一.为何要搭建 Elasticsearch 集群 凡事都要讲究个为什么.在搭建集群之前,我们首先先问一句,为什么我们需要搭建集群?它有什么优势呢? (1)高可用性 Elasticsearch 作为一个 ...
- 用Python手把手教你搭建一个web框架-flask微框架！
在之前的文章当中,小编已经教过大家怎么搭建一个Django框架,今天我们来探索另外的一种框架的搭建,这个框架就是web框架-flask微框架啦!首先我们带着以下的几个问题来阅读本文: 1.flask是 ...
- 手把手教你搭建一个 Elasticsearch 集群
为何要搭建 Elasticsearch 集群 凡事都要讲究个为什么.在搭建集群之前,我们首先先问一句,为什么我们需要搭建集群?它有什么优势呢? 高可用性 Elasticsearch 作为一个搜索引擎, ...
- 『原创』手把手教你搭建一个实用的油耗App（一）
前言: 入行快10年,有点积蓄,三年前买了代步车.于是乎,汽车油耗开销就成了每个月都必须关注的问题.三年来,用过了无数油耗记录软件,比如最知名的“小熊油耗”,从第一次用,一直到最新一版,感觉越来越“臃 ...
- 大数据江湖之即席查询与分析（下篇）--手把手教你搭建即席查询与分析Demo
上篇小弟分享了几个“即席查询与分析”的典型案例,引起了不少共鸣,好多小伙伴迫不及待地追问我们:说好的“手把手教你搭建即席查询与分析Demo”啥时候能出?说到就得做到,差啥不能差人品,本篇只分享技术干货 ...
- PWA入门：手把手教你制作一个PWA应用
摘要: PWA图文教程 原文:PWA入门:手把手教你制作一个PWA应用 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. 简介 Web前端的同学是否想过学习app开发,以弥补自 ...
- 手把手教你搭建自己的Angular组件库 - DevUI
摘要:DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸.灵活.至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠.取悦眼球的设计.如果你正在开发 ToB 的工 ...
- iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 手把手教你搭建Pytest+Allure2.X环境详细教程，生成让你一见钟情的测试报告（非常详细，非常实用）
简介 宏哥之前在做接口自动化的时候,用的测试报告是HTMLTestRunner,虽说自定义模板后能满足基本诉求,但是仍显得不够档次,高端,大气,遂想用其他优秀的report框架替换之.一次偶然的机会, ...
随机推荐
- OI知识点/得分技巧的归纳总结
网络流 拆点/拆边技巧 题目来源 bzoj1070 题目描述 同一时刻有\(N\)位车主带着他们的爱车来到了汽车维修中心.维修中心共有\(M\)位技术人员,不同的技术人员对不同 的车进行维修所用的时间 ...
- li = [11,22,33,44,55,66,77,88,99]分类
方法一: li = [11,22,33,44,55,66,77,88,99]s = []m = []for i in li: if i <= 55: s.append(i) else: m.ap ...
- Django Uwsgi Nginx 部署
1.django的settings配置 参照博客 https://www.cnblogs.com/xiaonq/p/8932266.html # 1.修改配置 # 正式上线关闭调试模式, 不会暴露服务 ...
- css 11-CSS3属性详解（一）
11-CSS3属性详解(一) #前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性. 本文主要内容: 文本 盒模型中的 box-sizing 属性 处理兼容性问题:私有前缀 ...
- js下 Day12、案例
一．垃圾分类 效果图: 功能思路分析: 1. 鼠标按下 (1) 获取鼠标到元素的距离(e.offsetX) (2) 开启开关变量 (3) 获取事件源 (4) 记录垃圾初始位置 2. 鼠标移动 ( ...
- vue第八单元(组件通信 子父，父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- 容器编排系统之DaemonSet、Job和CronJob控制器
前文我们了解了k8s上的pod控制器中的常用的两种控制器ReplicaSet和Deployment控制器的相关话题,回顾请参考:https://www.cnblogs.com/qiuhom-1874/ ...
- Spark性能调优篇六之调节数据本地化等待时长
数据本地化等待时长调节的优化 在项目该如何使用? 通过 spark.locality.wait 参数进行设置,默认为3s,6s,10s. 项目中代码展示: new SparkConf().set(&q ...
- 多任务-python实现-多进程文件拷贝器（2.1.10）
@ 目录 1.需求 2.代码 1.需求 当去拷贝一个文件夹的所有文件时,使用多任务拷贝 假如一个文件使用一个进程处理 10000个文件就额可以使用最大值为10的进程池处理(当然max取值看具体主机性能 ...
- 怎样用Java 8优雅的开发业务
怎样用Java 8优雅的开发业务 目录 怎样用Java 8优雅的开发业务 函数式编程 流式编程 基本原理 案例 优雅的空处理 新的并发工具类CompletableFuture 单机批处理多线程执行模型 ...