前言

　　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. 惊天秘密！如何在 Flutter 项目中实现操作引导

    不要冒然评价我,你只知道我的名字,却不知道我的故事,你只是听闻我做了什么,却不知我经历过什么. 俗话说得好,产品有三宝,弹窗浮层加引导. 上图截图自我司 App 晓黑板中的口算模块,相信每个 App ...

  2. rpl_semi_sync_master_wait_no_slave 参数研究实验

    最近在研究MySQL,刚学到半同步. 半同步的配置中,关于这两个参数: rpl_semi_sync_master_wait_no_slave rpl_semi_sync_master_wait_for ...

  3. HBase过滤器:SingleColumnValueFilter和FirstKeyOnlyFilter一起使用的问题

    FirstKeyOnlyFilter是对第一列进行过滤,hbase中的列按照字典序排列,所以如果SingleColumnValueFilter中的过滤列不是第一列的话,FirstKeyOnlyFilt ...

  4. jmeter的一些知识目录

    1.JDK安装及环境变量配置2.Jmeter安装及环境变量配置3.如何启动 jmeter 4.下载并安装mysql驱动5.创建JDBC连接池及配置6 .新建线程组及参数配置7.http默认请求及参数配 ...

  5. [打基础]OI/ACM基本功&一些小功能的实现&一些错误（持续更新）

    基本功 前导0 如题,有时候需要把3输出成03这样子,可以调用 cout.width(x); ,x表示以几位,用 cout.fill(x); 来给出前导填充的内容,一般x以char的形式给出 例如可以 ...

  6. [日常摸鱼]bzoj1968 [Ahoi2005]COMMON 约数研究

    题意:记$f(n)$为$n$的约数个数,求$\sum_{i=1}^n f(i)$,$n \leq 10^6$. 我也不知道为什么我要来做这个- 直接枚举每个数会是哪些数的约数-复杂度$O(n log ...

  7. java_day 02

    一.方法的传入参数可以为一个 类 类型 有往方法里传 int ,double ,char 类型的值的,第一次学习到居然还能往方法里传 类 定义好一个 Phone 类 实例化对象 ,并且往 method ...

  8. SpringBoot2 整合OAuth2组件，模拟第三方授权访问

    本文源码:GitHub·点这里 || GitEE·点这里 一.模式描述 授权服务 验证第三方服务的身份,验证邮箱用户的身份,记录和管理认证Token,为资源服务器提供Token校验.场景:第三方网站借 ...

  9. k8s的kube-proxy

    kube-proxy 运行在每个节点上,监听 API Server 中服务对象的变化,再通过管理 IPtables 来实现网络的转发. Kube-Proxy 不同的版本可支持三种工作模式:   Use ...

  10. Android虚拟机Genymotion的安装与使用

    1.首先官网下载genymotion-2.12.2-vbox包,首选第一个带有box,点击安装 2.安装完毕选择自己要用的安卓系统,建议选择安卓4.0以上全部 3.启动打开虚拟机 4.安装外部APP, ...