数据设置任何操作都只会影响浏览器的indexedDB数据库1

> 这里是在线演示和体验，可以单击右上角，切换为编辑模式，任何操作都只会影响浏览器的indexedDB数据库，不会影响别人的体验，也不会向外发布任何信息，所以可以放心折腾。 **删除 indexedDB 的数据库，然后刷新即可恢复初始文档内容。** |column1|column2|column3| |-|-|-| |content1|content2|content3| # 介绍 nf-Press 是一个以 Markdown 为中心的在线文档 **编辑工具**和**展示工具**。你可以在vue3的项目里安装 [@naturefw/press-edit](https://www.npmjs.com/package/@naturefw/press-edit)插件，实现在线编写 Markdown 格式的帮助文档，并且展示的功能。或者导出给 VuePress（待实现）。 nf-Press 诞生的初衷是为了自己写文档的时候可以更方便一些（我有好多文档要写），因为我喜欢这种在线编辑的快感，然后自动生成整个帮助文档的网站，而我只需要负责“写”就可以了，不用管其他配置。 另外更新文档的时候，只需要上传对应的json文件即可，不需要重新编译项目。 # nf-Press 的组件 nf-Press 提供了若干组件，可以实现基础功能： * 导航组件 * 菜单组件（编辑版） * 菜单组件（浏览版） * Markdown 编辑组件 * Markdown 展示组件 * 面包屑组件 * 路由功能（导航 + 菜单自动实现） * 下载、导出功能 ::: tip 引入组件即可直接实现对应的功能。 ::: # 功能 * 在线编辑菜单、文档。 * 在线编写代码、修改代码、运行代码（vue的部分代码）。 * 展示帮助文档。 * 导入导出。 * 前端缓存，准离线浏览。 # nf-press 包含两个状态： - 编辑状态：在线编写菜单、文档，读、写模式。 - 浏览状态：显示导航、菜单和帮助文档，只读模式。 # 它是如何工作的？ 分为编辑状态和浏览状态。 ## 编辑状态 帮助文档在线编辑版，本质上是一个用 [vite2](https://cn.vitejs.dev/) 建立的 [Vue3](https://v3.cn.vuejs.org/guide/introduction.html) 项目，UI库采用 [element-plus](https://element-plus.gitee.io/zh-CN/component/button.html)，Markdown 编辑器采用 [vue-markdown-editor](http://ckang1229.gitee.io/vue-markdown-editor/zh/)，可以实现在线设置菜单、编写文档的功能，以及导入导出的功能。 ## 浏览状态 浏览帮助文档也是一个用 [vite2](https://cn.vitejs.dev/) 建立的 [Vue3](https://v3.cn.vuejs.org/guide/introduction.html) 项目，UI库采用 [element-plus](https://element-plus.gitee.io/zh-CN/component/button.html)，Markdown 编辑器采用 [vue-markdown-editor](http://ckang1229.gitee.io/vue-markdown-editor/zh/)，仅展示文档，以后可能加入其它辅助功能，比如查询、书签、版本对比等。 ## 步骤 * 用 vite2 建立 vue3 的项目 * 安装 @naturefw/press-edit，会自动安装依赖项。 * 设置 main.js，挂载 vue-markdown-editor、路由、组件等 ，选择主题，设置 markdown 需要的插件。 * 使用 @naturefw/press-edit 提供的组件实现导航、菜单和编辑等功能。 * 运行项目，即可实现在线编辑。 * 可以加载组件用于运行。 编辑环境不仅可以编辑文档，还可以维护导航和菜单（侧边栏），菜单可以实现 n级分类，这样再也不用头疼路由的设置，直接添加即可。 ## 采用 indexedDB 存储文档 为了实现在线编辑的功能，采用 indexedDB 来存放导航、菜单和文档，编辑完成之后，可以导出配置文件、文档文件。 可以运行```yarn api```开启一个后端API，实现保存json文件的功能。 # 特点 ## 在线编写代码且运行 我知道有第三方网站支持在线写代码，但是那些网站的打开速度有点慢，体验效果差了一点点，所以我用 defineAsyncComponent 组件做了一个内置的在线编写代码、运行代码的功能，可以写vue组件里的 template 、setup 部分的代码。可以使用全局组件和全局变量。 ## 前端缓存文档 json文件格式的文档被下载后，会被保存在前端的 indexedDB 数据库里面，这样下次再打开的时候，可以直接从 indexedDB 里面读取，这样速度就更快了。 ## 仅更改文档时，不需要重新打包编译 如果仅仅是编写图文的帮助文档，那么在发布更新文档的时候并不需要再次打包，因为帮助文档会以 json文件的方式被下载，本身并不需要参与打包，所以更新的时候，直接上传json文件即可。 为了保证用户可以看到最新文档，内置（简易）版本管理功能，避免用户看不到最新文档的情况。 ## 其他 还想实现书签、查询这类的功能，暂时没有时间实现。 # 为什么不是 ...? 可能你会想，又在重复制造轮子，有现成的 VuePress 不去用，自己瞎折腾啥。 我做这个项目，首先是因为自己的思路和 VuePress 的不太一样，另外就是想做一个有一点用途的项目练练手，最后想发掘一下 Vue3 可以做到什么程度，自己可以掌握哪些技能。 做个项目验证一下自己的熟练程度，于是有了这个小工具。 ## VuePress VuePress 的官方定位是一个 “以 Markdown 为中心的静态网站生成器”。 这个比较费解，为啥只是一个生成器？文档都编写好了，难道还无法生成网站吗？（也许是给不会写代码的人准备的？） 举个例子，我去市场买菜、买肉，拿回来各种加工，然后跑到饭店找到大厨：大哥帮忙炒一下呗。 我承认，我不会做满汉全席，但是做个西红柿炒鸡蛋还是可以的。所以，我想按照自己的口味做菜。 ## 为什么不用后端数据库保存文档？ 首先因为穷，没钱弄云服务器。 另外用 indexedDB 保存文档，做在线演示的时候，每个人都可以有一份自己的文档，可以随意体验，也就是说可以瞎折腾，不会影响其他人的体验。 另外，安全！在线体验版本，不会向外发送任何信息，大家都省心，对吧。