【亲测免费】 Docute 项目使用教程

2026-01-17 08:57:18作者：贡沫苏Truman

1. 项目的目录结构及介绍

Docute 项目的目录结构相对简单，主要包含以下几个部分：

docute/
├── docs/
│   ├── README.md
│   └── ...
├── public/
│   └── index.html
├── src/
│   ├── main.js
│   └── ...
├── package.json
└── ...

目录结构说明：

docs/: 存放文档的 Markdown 文件。
public/: 存放静态资源文件，如 index.html。
src/: 存放项目的源代码文件，如 main.js。
package.json: 项目的配置文件，包含依赖、脚本等信息。

2. 项目的启动文件介绍

Docute 项目的启动文件主要是 public/index.html 和 src/main.js。

public/index.html

这是项目的入口文件，包含了 Docute 的核心脚本和样式文件的引用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Docute</title>
  <link rel="stylesheet" href="https://unpkg.com/docute/dist/docute.css">
</head>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/docute/dist/docute.js"></script>
  <script>
    new Docute({
      target: '#app',
      sourcePath: './docs'
    })
  </script>
</body>
</html>

src/main.js

这是项目的 JavaScript 入口文件，负责初始化 Docute 实例。

import Docute from 'docute'

new Docute({
  target: '#app',
  sourcePath: './docs'
})

3. 项目的配置文件介绍

Docute 项目的配置文件主要是 package.json。

package.json

这是 Node.js 项目的标准配置文件，包含了项目的元数据和依赖信息。

{
  "name": "docute",
  "version": "1.0.0",
  "description": "Effortless documentation, done right.",
  "main": "src/main.js",
  "scripts": {
    "start": "node src/main.js"
  },
  "dependencies": {
    "docute": "^4.0.0"
  }
}