Markdown编辑器推荐的 Md 编辑器https://github.com/bytedance/bytemd阅读官方文档下载编辑器主体、以及 gfm表格支持插件、highlight 代码高亮插件npm i bytemd/vue-next npm i bytemd/plugin-highlight bytemd/plugin-gfm新建 MdEditor 组件编写代码隐藏编辑器中不需要的操作图标比如 GitHub 图标要把 MdEditor 当前输入的值暴露给父组件便于父组件去使用同时也是提高组件的通用性需要定义属性把 value 和 handleChange 事件交给父组件去管理MdEditor 示例代码代码编辑器微软官方编辑器https://github.com/microsoft/monaco-editor官方提供的整合教程https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md安装编辑器vue-cli 项目webpack 项目整合 monaco-editor。先安装 monaco-editor-webpack-pluginhttps://github.com/microsoft/monacoeditor/blob/main/webpack-plugin/README.md在 vue.config.js 中配置 webpack 插件全量加载按需加载如何使用 Monaco Editor查看示例教程https://microsoft.github.io/monaco-editor/playground.html?sourcev0.40.0#example-creating-the-editor-hello-worldhttps://microsoft.github.io/monaco-editor/playground.html?sourcev0.40.0#examplecreating-the-editor-hello-world整合教程参考http://chart.zhenglinglu.cn/pages/2244bd/#%E5%9C%A8-vue-%E4%B8%AD%E4%BD%BF%E7%94%A8http://chart.zhenglinglu.cn/pages/2244bd/#%E5%9C%A8-vue-%E4%B8%AD%E4%BD%BF%E7%94%A8注意monaco editor 在读写值的时候要使用 toRaw(编辑器实例的语法来执行操作否则会卡死。示例整合代码如下通 Md 编辑器一样也要接受父组件的传值把显示的输入交给父组件去控制从而能够让父组件实时得到用户输入的代码页面开发创建题目页面重新根据后端生成前端请求代码openapi -- input http://localhost:8121/api/v2/api-docs -- output ./generated -- client axios在 JetBrains 系列编辑器中打开设置搜索 live Templates先创建一个自定义模板组在组下创建代码模板。效果输入缩写即可生成模板代码。示例模板template div id$ID$/div /template script setup langts $END$ /script style scoped #$ID$ { } /style注意其中的 ID 是根据表达式自动生成的camelCase(fileNameWithoutExtension())使用表单组件先复制示例代码再修改https://arco.design/vue/component/form此处我用到了嵌套表单https://arco.design/vue/component/form#nest动态增减表单https://arco.design/vue/component/form#dynamic注意自定义的代码编辑器组件不会被组件库识别需要手动指定 value 和handleChange 函数。题目管理页面开发1使用表格组件https://arco.design/vue/component/table#customhttps://arco.design/vue/component/table#custom需要找到自定义操作的示例2查询数据3定义表格列4加载数据5调整格式比如 json 格式不好看有 2 种方法调整1.使用组件库自带的语法自动格式化更方便2.完全自定义渲染想展示什么就展示什么更灵活6添加删除、更新操作删除后要执行 loadData 刷新数据如果想学习 React And Design 框架的管理页面开发去看用户中心项目