前言

　　VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

概要

  1. 基础命令
  2. 基础配置
  3. 总结

基础命令（粘贴复制就行了，我也是复制过来的）

  • mkdir vuepress-starter && cd vuepress-starter
  • yarn init # npm init
  • yarn add -D vuepress # npm install -D vuepress
  • mkdir 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）的更多相关文章

  1. 手把手教你搭建一个Elasticsearch集群

    一.为何要搭建 Elasticsearch 集群 凡事都要讲究个为什么.在搭建集群之前,我们首先先问一句,为什么我们需要搭建集群?它有什么优势呢? (1)高可用性 Elasticsearch 作为一个 ...

  2. 用Python手把手教你搭建一个web框架-flask微框架！

    在之前的文章当中,小编已经教过大家怎么搭建一个Django框架,今天我们来探索另外的一种框架的搭建,这个框架就是web框架-flask微框架啦!首先我们带着以下的几个问题来阅读本文: 1.flask是 ...

  3. 手把手教你搭建一个 Elasticsearch 集群

    为何要搭建 Elasticsearch 集群 凡事都要讲究个为什么.在搭建集群之前,我们首先先问一句,为什么我们需要搭建集群?它有什么优势呢? 高可用性 Elasticsearch 作为一个搜索引擎, ...

  4. 『原创』手把手教你搭建一个实用的油耗App（一）

    前言: 入行快10年,有点积蓄,三年前买了代步车.于是乎,汽车油耗开销就成了每个月都必须关注的问题.三年来,用过了无数油耗记录软件,比如最知名的“小熊油耗”,从第一次用,一直到最新一版,感觉越来越“臃 ...

  5. 大数据江湖之即席查询与分析（下篇）--手把手教你搭建即席查询与分析Demo

    上篇小弟分享了几个“即席查询与分析”的典型案例,引起了不少共鸣,好多小伙伴迫不及待地追问我们:说好的“手把手教你搭建即席查询与分析Demo”啥时候能出?说到就得做到,差啥不能差人品,本篇只分享技术干货 ...

  6. PWA入门：手把手教你制作一个PWA应用

    摘要: PWA图文教程 原文:PWA入门:手把手教你制作一个PWA应用 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. 简介 Web前端的同学是否想过学习app开发,以弥补自 ...

  7. 手把手教你搭建自己的Angular组件库 - DevUI

    摘要:DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸.灵活.至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠.取悦眼球的设计.如果你正在开发 ToB 的工 ...

  8. iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  9. 手把手教你搭建Pytest+Allure2.X环境详细教程，生成让你一见钟情的测试报告（非常详细，非常实用）

    简介 宏哥之前在做接口自动化的时候,用的测试报告是HTMLTestRunner,虽说自定义模板后能满足基本诉求,但是仍显得不够档次,高端,大气,遂想用其他优秀的report框架替换之.一次偶然的机会, ...

随机推荐

  1. AcWing 195. 骑士精神

    双向BFS (广搜) \(O(8 ^ 7)\) 看到没有双向BFS的题解我就过来了 这道题也可以用双向\(BFS\)来做,时间复杂度与\(IDA*\)不相上下. 双向\(BFS\)的实现有多种: 把初 ...

  2. Java集合源码分析（九）——HashSet

    简介 HashSet就是一个集合,里面不能有重复的元素,元素也是无序的. HashSet其实就是调用了HashMap实现的,所以,它也不是线程安全的. HashSet通过iterator()返回的迭代 ...

  3. js基本数据类型--null和undefined的区别

    1. null类型 只有一个值null,逻辑上表示一个空对象的指针,如果要定义一个变量来保存对象,最好将该变量初始化为null,比如let a="",而不要let b这样,其实nu ...

  4. 云小课 | 需求任务还未分解，该咋整！项目管理Scrum项目工作分解的心酸谁能知？

    温馨提醒:本文约3000字,需要阅读5分钟,共分为8个部分,建议分段阅读! 软件开发过程中,从产品概念形成到产品规划.往往要做详细的需求分析和项目规划等,因此,选对一款项目管理工具对开发者就显得尤为重 ...

  5. 【教程】IDEA创建Maven项目并整合Tomcat发布，问题解决大全

    一篇入门教程 一.创建项目并运行 参考这个视频,能顺利运行 helloworld ,本人用的 IDEA2020.2.3 .jdk11 .Tomcat9 .Maven3.6 bilibili-IDEA( ...

  6. 附028.Kubernetes_v1.20.0高可用部署架构二

    目录 kubeadm介绍 kubeadm概述 kubeadm功能 本方案描述 部署规划 节点规划 初始准备 互信配置 其他准备 集群部署 相关组件包 正式安装 部署高可用组件I Keepalived安 ...

  7. 我们是如何实现DevOps的

    一.DevOps的理解 DevOps的概念理解 DevOps 的概念在软件开发行业中逐渐流行起来.越来越多的团队希望实现产品的敏捷开发,DevOps 使一切成为可能.有了 DevOps ,团队可以定期 ...

  8. python爬虫之解析链接

    解析链接 1. urlparse() & urlunparse() urlparse() 是对url链接识别和分段的,API用法如下: urllib.parse.urlparse(urlstr ...

  9. 【实时渲染】实时3D渲染如何加速汽车线上体验应用推广

    在过去,一支优秀的广告片足以让消费者对一辆汽车产生兴趣.完美的底盘线条或引擎的轰鸣声便会让潜在买家跑到经销商那里试驾.现在,广告还是和往常一样,并没有失去其特性,但86%的买家在与销售交流之前会在网上 ...

  10. 常见的JS手写函数汇总（代码注释、持续更新）

    最近在复习面试中常见的JS手写函数,顺便进行代码注释和总结,方便自己回顾也加深记,内容也会陆陆续续进行补充和改善. 一.手写深拷贝 <script> const obj1 = { name ...