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

教程

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发布的。

posted on 2018-01-16 15:26 calamus 阅读(892) 评论(0) 编辑收藏举报