vue从入门到女装??:从零开始搭建后台管理系统(一)安装框架
一个系统开发完成了总要有操作说明手册,接口文档之类的东西吧?这种要全部纯手写就很麻烦了,可以借助一些插件,比如:
vue-docute
vue的官方文档就是用这个生成的呢~
官方文档==》docute
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'}
]}]
})
// 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发布的。