Vite-Doc-Creator

A fast and light Document Creator 一个轻快的文档生成器

简介

• 这是一个基于vite的文档生成器插件

1. 快速生成文件界面源码
2. 编辑markdown生成html页面
3. 快速生成文档菜单

依赖

1. 依赖vite编译环境
2. 插件内自动依赖marked、highlightjs

安装

1. 创建工程文件夹

mkdir project-name

2. 进入文件夹初始化npm

npm init -y

3. 安装vite。 作者：尤雨溪

npm i vite -D

4. 修改package.json内部的scripts命令

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

5. 安装vite-doc-creator。作者：小野森森

npm i vite-doc-creator -D

vite插件配置

1. 工程文件夹根目录下创建vite.config.js

touch vite.config.js

2. vite.config.js配置插件

const ViteDocCreator = require('vite-doc-creator');

module.exports = {
  plugins: [new ViteDocCreator()]
}

启动项目（生成文档编辑目录）

npm run dev

插件配置项

1. 配置项位置

module.exports = {
  plugins: [new ViteDocCreator({
    // 配置项
  })]
}

2. 配置项说明

配置项	说明	默认值	必填
title	网页title与header文字标题	This is my first DOC by Vite-doc-creator	否
domain	生产环境下的域名（须带协议：http://或https://）	http://localhost	否
port	生成环境下的端口号	process.env.npm_config_port	否

注意：为了避免页面链接生成错误，请尽量不要在开发环境下设置domain与port，除非确保文档页面在该域名或该端口下可以正常访问。

使用方法

• 在workspace文件夹中创建.md文件进行编辑
• 保存.md文件后，会自动将文件转换为html文件并生成文件菜单
• 页面会自动展示，无需刷新页面

注意事项

1. 目前不支持在workspace内创建子文件夹（稍后更新会支持）
2. 目前不支持修改workspace内的md文件名（稍后更新会支持）

版本更新

20201009：v1.0.0

原理

1. 创建文档工程目录 src -> js css html workspace
2. 创建文件 复制：js/css/welcome.html 编译：index.html / md.html createIndexHtml mdToHtml
3. 监听文件及文件夹变化 watchHtml / watchMarkdown 监听html文件夹 监听workspace文件夹