docsify实现开发文档

使用场景,在vue的项目中经常会封装公用的组件,单单用markdown写组件文档,因为没有左右分栏功能,查找起来很不方便,用docsify既可以用markdown来编写文档,又可以实现左右分栏导航功能。完美!!!

docsify官方文档地址https://docsify.js.org/#/zh-cn/quickstart

实现效果

docsify实现开发文档_第1张图片

配置方法

为了简单方便,没有采用npm。
新建一个文件夹,新建一个index.html文件,新建一个README.md文件

index.html文件如下


<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
head>
<body>
  <div id="app">div>
  <script>
    window.$docsify = {
      loadSidebar: true
    }
  script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js">script>
body>
html>
_sidebar.md文件设置左侧边栏
## 首页
* [文档说明](/)

## 指令
* [自定义指令说明](directive/index)
* [v-floatNumber](directive/v-floatNumber)
* [v-intNumber](directive/v-intNumber)

## 过滤器
* [过滤器说明](filters/index)

## 组件
* [test组件](model/test)
* [upload组件](model/upload)

README.md文件如下

# 本文档说明

## 启动
documents目录下
```cmd
http-server

### 启动服务
```cmd
python -m SimpleHTTPServer 3000

或 (要先 npm install http-server -g安装http-server)

http-server

你可能感兴趣的:(js)