教程

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

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

vue-docute

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

官方文档==》docute

我的示例demo==》demo

demo源码==》code

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

1.安装

方法1 npm 安装

npm：

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

yarn：

  1. yarn global add docute-cli

方法2 直接script标签导入

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
  7.   <title>My Awesome Doc</title>
  8.   <!-- the docute client styles -->
  9.   <link rel="stylesheet" href="https://unpkg.com/docute/dist/docute.css">
  10. </head>
  11. <body>
  12.   <div id="app"></div>
  13.   <!-- load the docute client library -->
  14.   <script src="https://unpkg.com/docute/dist/docute.js"></script>
  15.   <!-- bootstrap your docute app! -->
  16.   <script>
  17.     docute.init()
  18.   </script>
  19. </body>
  20. </html>

2.设置配置

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

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

  1. docute.init({
  2.   // ...config goes here
  3. })

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

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

讲几个常用的：

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

  1. docute.init({
  2.   // or custom path
  3.   landing: '_my-landing.html',
  4.   // or even markdown file
  5.   landing: 'landing.md',
  6.   // or inline markdown
  7.   landing: '# this is landing page'
  8. })

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

  1.     <a class="landing-button" router-link="/home">
  2.     　　Docs
  3.   　</a>

2.2 设置nav导航

效果：

示例代码：

  1. docute.init({
    nav: [{
  2. 　　path: '/',
  3. 　　markdown: '## counter\n {{ count }}',
  4. 　　component: {
  5. 　　data() {
  6. 　　　　return { count: 0 }
  7. 　　　　　　}
  8. 　　　　}
  9. 　　},{
  10. 　　　　title: "introduce",
  11. 　　　　path: "/md/introduce",
  12. 　　　　source: '/md/introduce.md',
  13. 　　　},{
  14. 　　　　title: 'Languages',
  15. 　　　　type: 'dropdown',
  16. 　　　　items: [
  17. 　　　　　　{title: 'Chinese',type: 'label', path: '/language/chinese'},
  18. 　　　　　　{title: 'Japanese', path: '/language/japanese'},
  19. 　　　　　　{type: 'sep'},
  20. 　　　　　　{title: 'Chinese',type: 'label', path: '/language/chinese'},
  21. 　　　　　　{title: 'Japanese', path: '/language/japanese'},
  22. 　　　　　　{type: 'sep'}
  23. 　　　　　　]}]
    })
​
 2.3 设置自定义侧边栏导航
侧边栏的导航是根据markdown文件中的标题自动提取出的
 
  1. // markdown.md
    ## 一级标题
  2. ### 二级标题
 如何自定义侧边栏呢？
  1. docute.init({
  2.   toc: `
  3. - [Install](/install)
  4. - [Guide](/guide)
  5.   - [How to do A](/guide/how-to-do-a)
  6.   - [How to do B](/guide/how-to-do-b)
  7. `
  8. })

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

  1. docute.init({
  2.   toc: './toc.md'
  3. })

2.4 头部自定义链接

效果图：

实现代码：

  1. docute.init({　　
  2. icons: [{
  3. icon: 'github',
  4. label: 'Fork me on GitHub',
  5. link: 'https://github.com/calamus0427'
  6. },{
  7. icon: "twitter",
  8. label: "calamus",
  9. link:"https://github.com/calamus0427"
  10. },{
  11. icon: "edit",
  12. label: "calamus",
  13. link:"https://github.com/calamus0427"
  14. },{
  15. label: 'Hovered!',
  16. svgId: 'my-icon',
  17. link: 'http://blah.blah'
  18. }],
  20. })

也可以用自定义的图标

  1. <body>
  2.   <div id="app"></div>
  3.   <!-- you can add it everywhere outside #app -->
  4.   <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  5.     <symbol id="my-icon"  viewBox="0 0 22 22">
  6.       <!-- all shapes like `<path>` go here -->
  7.     </symbol>
  8.     <!-- ... other symbols -->
  9.   </svg>
  10.  
  11. docute.init({
  12.   icons: [
  13.     {
  14.       label: 'Hovered!', // the text for tooltip
  15.       svgId: 'my-icon', // the id of symbol
  16.       link: 'http://blah.blah'
  17.     }
  18.   ]
  19. })
  20. </body>

3.更改主题

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

==》查看更多主题

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

  1. <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. VMWare虚拟机安装 - 学习者系列文章

    以前笔者写过一个VMWare虚拟机的安装说明,但是那个版本比较低,已经过时,今天,讲讲VMWare的14版本的安装和使用说明. 首先,下载VMWare 14的安装文件,这里提供一下百度网盘文件: 链接 ...

  2. 【转】python:让源码更安全之将py编译成so

    python:让源码更安全之将py编译成so 应用场景 Python是一种面向对象的解释型计算机程序设计语言,具有丰富和强大的库,使用其开发产品快速高效. python的解释特性是将py编译为独有的二 ...

  3. SDI初识

    SDI初识 SDI接口,即“数字分量串行接口(Serial Digital Interface)”.按照速率可以分为: 标准清晰度SD-SDI,速率为270Mb/s; 高清标准HD-SDI,速率为1. ...

  4. Windows Azure Web Site (19) Azure Web App链接到VSTS

    <Windows Azure Platform 系列文章目录> 之前遇到一个问题,客户在海外使用 我参考了一下国内Azure China的文档:https://school.azure.c ...

  5. spring AOP的学习

    1.Spring常用的概念 Joinpoint(连接点): 所谓连接点是指那些被拦截到的点.在spring中,这些点指的是方法,因为spring只支持方法类型的连接点. Pointcut(切入点): ...

  6. python+selenium自动化软件测试（第3章）：unittes

    From: https://blog.csdn.net/site008/article/details/77622472 3.1 unittest简介 前言 (python基础比较弱的,建议大家多花点 ...

  7. ALGO-119_蓝桥杯_算法训练_寂寞的数

    问题描述 道德经曰:一生二,二生三,三生万物. 对于任意正整数n,我们定义d(n)的值为为n加上组成n的各个数字的和.例如,d()=++=, d()=++++=. 因此,给定了任意一个n作为起点,你可 ...

  8. 让HTMLrunner 报告的子列表都 默认展示出来的 方法(方便发送邮件时可以方便查看)

    1.找到生成的测试报告,获取到all元素 2.在HTMLrunner源码,</script> 标签上 加入一个函数 #让所有列表都展示出来window.onload = function ...

  9. Scala传名参数（By-Name）

    1.=> 在了解Scala的By-Name参数之前,先了解下“=>”在Scala中有几种用法: 1.对于值,“=>”相当于lambda表达式.如: scala> List(,, ...

  10. Nodejs使用多个分隔符分隔字符串

    在nodejs中当需要使用多个分隔符分隔字符串时,可以使用正则表达式作为split函数的参数,具体使用如下: var str = "111@222#333 444@555# 666 777& ...