教程

vue从入门到女装？？：从零开始搭建后台管理系统（一）安装框架

一个系统开发完成了总要有操作说明手册，接口文档之类的东西吧？这种要全部纯手写就很麻烦了，可以借助一些插件，比如：

vue-docute

vue的官方文档就是用这个生成的呢~

官方文档==》docute

我的示例demo==》demo

demo源码==》code

下面进入正题，开始学习使用这个好用的插件吧~

1.安装

方法1 npm 安装

npm：

npm i -g docute-cli
docute init ./docs
docute ./docs
然后打开 http://localhost:8080 查看运行结果

yarn：

yarn global add docute-cli

方法2 直接script标签导入

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

  <title>My Awesome Doc</title>

  <!-- the docute client styles -->

  <link rel="stylesheet" href="https://unpkg.com/docute/dist/docute.css">

</head>

<body>

  <div id="app"></div>

  <!-- load the docute client library -->

  <script src="https://unpkg.com/docute/dist/docute.js"></script>

  <!-- bootstrap your docute app! -->

  <script>

    docute.init()

  </script>

</body>

</html>

2.设置配置

一个文档系统只需要markdown文件们和index.html启动文件页和config.js配置代码就实现了

接下来可以按需配置成最终想要的结果

docute.init({

  // ...config goes here

})

可以在index.html里的docute.init({})里直接票配置，当然也可以单独存放在别的js里

详细配置查看官网文档 ==》

讲几个常用的：

2.1  加载页，也就是最初展现在你面前的页面

docute.init({

  // or custom path

  landing: '_my-landing.html',

  // or even markdown file

  landing: 'landing.md',

  // or inline markdown

  landing: '# this is landing page'

})

可以通过加载页设置链接跳转至文档页面

    <a class="landing-button" router-link="/home">

    　　Docs

  　</a>

2.2 设置nav导航

效果：

示例代码：

docute.init({
nav: [{

　　path: '/',

　　markdown: '## counter\n {{ count }}',

　　component: {

　　data() {

　　　　return { count: 0 }

　　　　　　}

　　　　}

　　},{

　　　　title: "introduce",

　　　　path: "/md/introduce",

　　　　source: '/md/introduce.md',

　　　},{

　　　　title: 'Languages',

　　　　type: 'dropdown',

　　　　items: [

　　　　　　{title: 'Chinese',type: 'label', path: '/language/chinese'},

　　　　　　{title: 'Japanese', path: '/language/japanese'},

　　　　　　{type: 'sep'},

　　　　　　{title: 'Chinese',type: 'label', path: '/language/chinese'},

　　　　　　{title: 'Japanese', path: '/language/japanese'},

　　　　　　{type: 'sep'}

　　　　　　]}]
})
​
 2.3 设置自定义侧边栏导航
侧边栏的导航是根据markdown文件中的标题自动提取出的
 
// markdown.md
## 一级标题

### 二级标题
 如何自定义侧边栏呢？
docute.init({

  toc: `

- [Install](/install)

- [Guide](/guide)

  - [How to do A](/guide/how-to-do-a)

  - [How to do B](/guide/how-to-do-b)

`

})

一定要注意对齐哦，不然是不会被渲染的，也可以单独写文件

docute.init({

  toc: './toc.md'

})

2.4 头部自定义链接

效果图：

实现代码：

docute.init({　　

icons: [{

icon: 'github',

label: 'Fork me on GitHub',

link: 'https://github.com/calamus0427'

},{

icon: "twitter",

label: "calamus",

link:"https://github.com/calamus0427"

},{

icon: "edit",

label: "calamus",

link:"https://github.com/calamus0427"

},{

label: 'Hovered!',

svgId: 'my-icon',

link: 'http://blah.blah'

}],

})

也可以用自定义的图标

<body>

  <div id="app"></div>

  <!-- you can add it everywhere outside #app -->

  <svg xmlns="http://www.w3.org/2000/svg" style="display:none">

    <symbol id="my-icon"  viewBox="0 0 22 22">

      <!-- all shapes like `<path>` go here -->

    </symbol>

    <!-- ... other symbols -->

  </svg>

docute.init({

  icons: [

    {

      label: 'Hovered!', // the text for tooltip

      svgId: 'my-icon', // the id of symbol

      link: 'http://blah.blah'

    }

  ]

})

</body>

3.更改主题

link引入css文件更改主题即可

==》查看更多主题

4.语法高亮：python语法高亮支持

<script src="https://unpkg.com/prismjs/components/prism-python.js"></script>

docute和gitbook的区别：docute不需要把markdown文件转换成html；而gitbook是转换成html发布的。

vue从入门到女装？？：从零开始搭建后台管理系统（二）用vue-docute生成线上文档的更多相关文章

  1. vue从入门到女装：从零开始搭建后台管理系统（一）安装框架

    安装及运行都是基于node的,不会node的可以自行百度,网上教程很多,也不难 项目效果预览: demo1 demo2 源码下载 开始安装框架: vue ==>vue-cli安装   eleme ...

  2. Vue+element搭建后台管理系统-二、安装插件

    我们继续上一章的内容,上一章讲到我们已经能将项目成功跑起来了,那么我们接下来把项目必用的东西完善一下. 一.安装elementUI 终于到了我们的男二了,继续在VSCode中新建一个终端,然后通过这个 ...

  3. 保姆级别的vue + ElementUI 搭建后台管理系统教程

    vue + ElementUI 搭建后台管理系统记录 本文档记录了该系统从零配置的完整过程 项目源码请访问:https://gitee.com/szxio/vue2Admin,如果感觉对你有帮助,请点 ...

  4. 从零开始搭建口袋妖怪管理系统(4)-借助webpack4.6工程化项目(上)

    "手动是不可能手动的了,这辈子都不可能手动的了." 一.目标 上一章我们借助ngRoute,完成了口袋妖怪SPA系统的多模块导航开发,但是现在引用的东西越来越多,项目文件目录开始变 ...

  5. vue.js + element 搭建后台管理系统 笔记（一）

    此文仅记录本人在搭建后台系统过程中遇到的难点及注意点,如果能帮到各位自然是极好的~~~ 项目主要架构:vueJS.elementUI.scss 一.项目初始化 首先需要安装nodejs,安装方法就不在 ...

  6. 从零开始搞后台管理系统（1）——shin-admin

      shin 的读音是[ʃɪn],谐音就是行,寓意可行的后台管理系统,shin-admin 的特点是: 站在巨人的肩膀上,依托Umi 2.Dva 2.Ant Design 3和React 16.8搭建 ...

  7. Vue3教程：Vue 3 + Element Plus + Vite 2 的后台管理系统开源啦

    之前发布过一篇文章<Vue3教程:开发一个 Vue 3 + element-plus 的后台管理系统>,文中提到会开发并开源一个 Vue 3 + Element Plus 的项目供大家练手 ...

  8. xadmin快速搭建后台管理系统

    一.xadmin的特点: 1.基于Bootstrap3:Xadmin使用Bootstrap3.0框架精心打造.基于Bootstrap3,Xadmin天生就支持在多种屏幕上无缝浏览,并完全支持Boots ...

  9. admin快速搭建后台管理系统

    一.基于admin后台管理系统的特点: 权限管理:权限管理是后台管理系统必不可少的部分,拥有权限管理,可以赋予用户增删改查表权限(可以分别赋予用户对不同的表有不同的操作权限): 前端样式少:后台管理主 ...

随机推荐

  1. Android 单元测试实践

    1. 在Android Studio创建工程 工程名称  AndroidUnitTest 2. 创建测试类CommonUtil 在类中加入sum和multiply方法 在CommonUtil类中右击 ...

  2. JavaMail SMTP服务器发送邮件程序示例 java通过dns服务器解析ip地址

    /** * JavaMail SMTP服务器发送邮件程序示例 * 扮演SMTP服务器角色与邮件客户端软件最大的区别就是: * SMTP服务器需要解析不同接收人邮件地址主机名对应的SMTP服务器主机名 ...

  3. jersey2+freemarker+spring3的集成

    由于即将开始的新项目,是一个对外网开放访问权限的web应用.所以,公司技术管理层不允许使用struts以及spring mvc这一套.所以,我们开始转战曾经用作REST API的框架jersey及其周 ...

  4. 阅读OReilly.Web.Scraping.with.Python.2015.6笔记---找出网页中所有的href

    阅读OReilly.Web.Scraping.with.Python.2015.6笔记---找出网页中所有的href 1.查找以<a>开头的所有文本,然后判断href是否在<a> ...

  5. 阅读 RAM-Based Shift Register(ALTSHIFT_TAPS) IP Core User Guide

    阅读 RAM-Based Shift Register(ALTSHIFT_TAPS) IP Core User Guide 说明:本文档自带测试工程: DE_ALTSHIFT_TAPS.zip 1.支 ...

  6. Netty Tutorial Part 1.5: On Channel Handlers and Channel Options [z]

    Intro: After some feedback on Part 1, and being prompted by some stackoverflow questions, I want to ...

  7. db2报错: [DB2/NT] SQL0952N 由于中断,处理被取消 SQLSTATE=57014

    DB2被中断,报错:  [DB2/NT] SQL0952N 由于中断,处理被取消 SQLSTATE=57014 在DB2的开发过程中,今日运行了一个执行时间较为长的sql语句.使用DB2服务端的控制台 ...

  8. PAT 乙级 1067 试密码（20 分）

    1067 试密码(20 分) 当你试图登录某个系统却忘了密码时,系统一般只会允许你尝试有限多次,当超出允许次数时,账号就会被锁死.本题就请你实现这个小功能. 输入格式: 输入在第一行给出一个密码(长度 ...

  9. Java学习——多线程例子：银行

    package cys; public class Example9_3 { public static void main(String[] args) { // TODO Auto-generat ...

  10. 学习笔记之Python Crash Course

    Python Crash Course https://www.safaribooksonline.com/library/view/python-crash-course/9781457197185 ...