VuePress 是“静态网站生成器”，需要我们自行编写文档，然后交给VuePress变成网站，VuePress 并没有提供编写环境，我知道有很多编写 Markdown 的方式，但是我还是喜欢“一体”的编写、浏览的方式。
似乎没有，那么 —— 自己动手丰衣足食吧，开干！
技术栈
- vite: ^2.7.0
- vue: ^3.2.23
- axios: ^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
建立库项目（@naturefw/press-edit）实现文档的编写、浏览功能
首先使用 vite2 建立一个 Vue3 的项目：
- 安装 elementPlus 实现页面效果；
- 安装 v-md-editor 实现 Markdown 的编辑和显示；
- 安装 @naturefw/storage 操作 indexedDB ，实现帮助文档的存储；
- 安装 @naturefw/nf-state 实现状态管理；
- 安装axios 用于加载 json文件，实现导入功能。
- 用node写一个后端API，实现写入json文件的功能。
注意：库项目需要安装以上插件，帮助文档项目只需要安装 @naturefw/press-edit 即可。
基本功能就是这样，心急的可以先看在线演示和源码。
- 在线演示：https://nfpress.gitee.io/nf-press-edit/
- 源码：https://gitee.com/nfpress/nf-press-edit
两个状态：编辑和浏览
一开始做了两个项目，分别实现编辑文档和显示文档的功能，但是后来发现，内部代码大部分是相同的，维护的时候有点麻烦，所以改为在编辑文档的项目里加入“浏览”的状态，然后设置切换的功能，这样便于内部代码的维护，以后成熟了可能会分为两个单独的项目。
编辑状态的功能：菜单维护、文档维护、文档展示、导入导出、编写/执行代码
我喜欢在线编辑的方式，这样更省心，于是我用 el-menu 实现导航和左侧的菜单，然后加上了维护功能。 使用 v-md-editor 实现 Markdown 的编辑和显示。 然后用node写了一个后端API，实现写json文件的功能，这样就完美了。
浏览状态的功能：导航、菜单、文档展示、执行代码
提供导航组件、菜单组件、文档展示组件，可以比较灵活的进行布局。
实现导航
首先参考 VuePress 设置一个json文件，用于加载和保存网站信息、导航信息。
/public/docs/.nfpress/project.json
{
“projectId”: “1000”,
“title”: “nf-press-edit ！”,
“description”: “这是一个在线编辑、展示文档的小工具”,
“navi”: [
{
“naviId”: “1010”,
“text”: “指南”,
“link”: “menu”
},
{
“naviId”: “1020”,
“text”: “组件”,
“link”: “menu”
},
{
“naviId”: “1380”,
“text”: “Gitee”,
“link”: “https://gitee.com/nfpress/nf-press-edit”
},
{
“naviId”: “1390”,
“text”: “在线演示”,
“link”: “https://nfpress.gitee.io/nf-press-edit/”
},
{
“naviId”: “1395”,
“text”: “我要提意见”,
“link”: “https://gitee.com/nfpress/nf-press-edit/issues”
}
]
}
评论0