基于vite2+Vue3如何编写一个在线帮助文档工具

本篇内容主要讲解“基于vite2+Vue3如何编写一个在线帮助文档工具”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“基于vite2+Vue3如何编写一个在线帮助文档工具”吧!vite: ^2.7.0vue: ^3.2.23axios: ^0.25.0 获取json格式的配置和文档element-plus: ^2.0.2 UI库nf-ui-elp”: ^0.1.0 二次封装的UI库@element-plus/icons-vue: ^0.2.4 图标@kangc/v-md-editor:”^2.3.13 md 编辑器vite-plugin-prismjs: ^0.0.8 代码高亮nf-state”: ^0.2.4 状态管理nf-web-storage”: ^0.2.3 访问 indexedDB首先使用 vite2 建立一个 Vue3 的项目：安装 elementPlus 实现页面效果；安装 v-md-editor 实现 Markdown 的编辑和显示；安装 @naturefw/storage 操作 indexedDB ，实现帮助文档的存储；安装 @naturefw/nf-state 实现状态管理；安装axios 用于加载 json文件，实现导入功能。用node写一个后端API，实现写入json文件的功能。注意：库项目需要安装以上插件，帮助文档项目只需要安装 @naturefw/press-edit 即可。两个状态：编辑和浏览一开始做了两个项目，分别实现编辑文档和显示文档的功能，但是后来发现，内部代码大部分是相同的，维护的时候有点麻烦，所以改为在编辑文档的项目里加入“浏览”的状态，然后设置切换的功能，这样便于内部代码的维护，以后成熟了可能会分为两个单独的项目。菜单维护文档维护文档展示导入导出在线编写/执行代码我喜欢在线编辑的方式，这样更省心，于是我用 el-menu 实现导航和左侧的菜单，然后加上了维护功能。 使用 v-md-editor 实现 Markdown 的编辑和显示。 然后用node写了一个后端API，实现保存 json文件的功能，这样就完美了。导航菜单文档展示执行代码就是在编辑状态的功能的基础上，去掉一些功能。或者其实可以反过来思考。首先参考 VuePress 设置一个json文件，用于加载和保存网站信息、导航信息。/public/docs/.nfpress/project.jsonprojectId：项目ID，可以用于区分不同的帮助文档项目。navi： 存放导航项。naviId： 关联到菜单。text： 导航上显示的文字。link： 连接方式或链接地址。menu：表示要打开对应的菜单；URL：在新页面里打开连接。然后做一个组件，用 el-menu 绑定数据渲染出来即可实现导航效果。/lib/navi/navi.vue可以是多级的导航，暂时没有实现在线维护功能。@naturefw/nf-state自己写的一个轻量级状态管理，可以当做大号 reactive 来使用，通过状态管理加载 project.json 然后绑定渲染。naviList导航列表，由状态管理加载。current当前激活的各种信息，比如“current.naviId”表示激活的导航项。和导航类似，只是需要增加两个功能：n级分组和维护。首先参考 VuePress 设置一个json文件，保存菜单信息。/public/docs/.nfpress/menu.jsonnaviId： 关联导航项ID，可以是数字，也可以是其他字符。需要和导航项ID对应。menus： 导航项对应的菜单项集合。menuId： 菜单项ID，关联一个文档，可以是数字或者英文。text： 菜单项名称。description： 描述，考虑以后用于查询。icon： 菜单使用的图标名称。children： 子菜单项目，没有的话可以去掉。ver： 版本号，便于更新文档。然后用 el-menu 绑定数据渲染，因为要实现n级分组，所以做一个递归组件实现n级菜单的效果。做一个递归组件实现n级分组的功能：/lib/menu/menu-sub-edit.vuesubMenu 要显示的子菜单项dialogAddInfo 添加菜单的信息dialogModInfo 修改菜单的信息这个就比较简单了，做个表单实现菜单的增删改即可，篇幅有限跳过。使用 v-md-editor 实现 Markdown 的编辑和展示，首先该插件非常好用，其次支持VuePress的主题。建立 /lib/md/md-edit.vue 实现编辑 Markdown 的功能：mdController 实现文档的增删改查的controllertimeSave 定时保存文档，避免忘记点保存按钮是不是挺简单的。因为是基于Vue3建立的项目，而且也是为了写vue3相关的帮助文档，那么就有一个很实用的要求：在线写代码并且可以运行。个人感觉这个功能还是很实用的，我知道有第三方网站提供了这种功能，但是网速有点慢，另外有一种大炮打蚊子的感觉，我只需要实现简单的代码演示。于是我基于 vue 的 defineAsyncComponent 写了一个简单版的在线编写代码且运行的功能：/lib/runCode/run.vuedefineAsyncComponent实用 defineAsyncComponent 加载组件，需要设免费云主机域名置三个部分：模板、setup和style。template： 字符串形式，可以直接传入setup： js代码，可以用eval的方式进行动态编译。style： 可以设置样式。这样即可让在线编写的代码运行起来，当然功能有限，只能用于一些简单的代码演示。以上这些功能都是基于 indexedDB 进行的，想要发布的话，需要先导出为json文件。因为浏览器里不能直接写文件，所以需要使用折中的方式：复制粘贴下载导出这个简单，用文本域显示json即可。使用 chrome 浏览器提供的下载功能下载文件。以上介绍的是内部原理，如果只是想简单使用的话，可以跳过，直接看下面的介绍。以上两种都不太方便，于是用node做了个简单的后端API，用于实现写入json文件的功能。代码放在了 api文件夹里，可以使用 yarn api运行。当然需要在 package.json 里做一下设置。上面介绍的是库项目的基本原理，我们要做帮助文档的时候，并不需要那么复杂。使用 vite2 建立一个vue3的项目，然后安装 @naturefw/press-edit，使用提供的组件即可方便的实现。首先需要在 main.js 里面做一些设置。baseUrl： 根据发布平台的情况进行设置，比如这里需要设置为：“/doc-ui-core/”setupIndexedDB： 初始化 indexedDB 数据库setupStore： 设置状态element-plus：element-plus 可以不挂载，但是css需要 import 进来，这里采用CDN的方式引入。nfElementPlus： 二次封装的组件，便于实现增删改查。setMarkDown： 加载 v-md-editor ，以及需要的插件。vuepressTheme： 设置主题。因为 v-md-editor 相关设置比较多，所以设置了一个单独文件进行管理：/src/main-md.js不多介绍了，可以根据需要选择插件。在App.vue文件里面进行整体布局$state：全局状态，$state.current.isView 设置是否是浏览状态。doc-navi：导航组件doc-menu：菜单组件docControl：根据状态选择加载显示组件或者编辑组件的字典。这种方式虽然有点麻烦，但是比较灵活，可以根据需要进行各种灵活设置，比如添加版权信息、备案信息、广告等内容。到此，相信大家对“基于vite2+Vue3如何编写一个在线帮助文档工具”有了更深的了解，不妨来实际操作一番吧！这里是百云主机网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: java并发JUC工具包AtomicInteger原子整型语法的示例分析

这篇文章主要介绍了java并发JUC工具包AtomicInteger原子整型语法的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。AtomicInteger 类底层存储一个int值，并提供…