教程

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. linux shell创建目录、遍历子目录

    1.创建目录 代码1: #!/bin/bash#如果没有tmp_dir目录则创建static_dir="/web/fyunw.com/static"if [ ! -d $staic ...

  2. Ansible Ad-Hoc命令(三)

    一.Ad-Hoc 介绍 1.了解下什么是Ad-Hoc ? Ad-Hoc 其实就是基于Ansible 运行的命令集,有些类似终端中敲入的shell命令,Ansible提供了两种运行完成任务的方式,一种是 ...

  3. dojo DataGrid实现表格数据编辑的解决方案

    在官网上看见的DataGrid编辑非常简单,但我实现的时候总是出现问题.经过N久的摸索,终于搞定了,期间出现了多处困难,下面说些解决办法的流程. 我实现的表格在页面加载时是不显示数据,只有通过表单像服 ...

  4. 基于MVC4+EasyUI的Web开发框架形成之旅(4)--附件上传组件uploadify的使用

    大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中 ...

  5. 关于mybatis map foreach遍历

    map 数据如下 Map<String,List<Long>>. 测试代码如下: public void getByMap(){ Map<String,List<L ...

  6. LeetCode——4. Median of Two Sorted Arrays

    一.题目链接:https://leetcode.com/problems/median-of-two-sorted-arrays 二.题目大意: 给定两个排序过的数组,求出两个数组的中位数,要求时间复 ...

  7. pyqt信号和槽传递额外参数

    转载:fengyu09 环境:python2.7.8 —— pyqt 4.11.1 使用Pyqt编程过程中,经常会遇到给槽函数传递额外参数的情况.但是信号-槽机制只是指定信号如何连接到槽,信号定义的参 ...

  8. 将字符串表示的IP地址转变为整形表示

    当时面试上机的想法是,直接使用uint32_t变量来存ip地址,遍历字符串带".",然后去值,利用移位来将这个值填到uint32_t对应的位置上.这样的麻烦之处在于: 1,遍历字符 ...

  9. Python 里面什么时候用一个=,什么时候用两个=

    赋值用=                                                                   i != j != k   >>>> ...

  10. [翻译]Restful Web服务模型

    最近我一直在阅读“Rest实践”的草稿:一本几位同事一直在努力编写的书. 他们的目的是解释如何使用Restful Web服务来处理企业面临的许多集成问题. 这本书的核心在于这样一种观点,Web以一个有 ...