Vue项目学习（一）-SQL闯关

Hello , 我是小恒不会java。今天来阅读一个Vue纯前端项目--SQL在线闯关
进步的方法除了文档书籍视频，学会阅读源代码，从代码中学会解决需求的方法也是必要的

已部署完成，在线体验：http://sql.yunduanjianzhan.cn
在这里插入图片描述

背景

简介

闯关式 SQL 自学教程网站，结合鱼皮自己的 SQL 学习实践经验，编写了 30 多个关卡，用户可以在线提交 SQL 代码做题闯关
GitHub地址：https://github.com/liyupi/sql-mother?tab=readme-ov-file

学习要点

前端SQL执行：webassembly
Markdown 展示组件：bytemd 以及主题
代码编辑器：monaco-editor
全局状态管理：pinia
前端工程化：typescript + eslint + prettier

代码架构（src）

├───src/
│   ├───App.vue
│   ├───main.ts
│   ├───style.css
│   ├───vite-env.d.ts
│   ├───assets/
│   │   ├───logo.png
│   ├───components/
│   │   ├───CodeEditor.vue
│   │   ├───MdViewer.vue
│   │   ├───QuestionBoard.vue
│   │   ├───SqlEditor.vue
│   │   ├───SqlResult.vue
│   │   ├───SqlResultTable.vue
│   ├───configs/
│   │   ├───routes.ts
│   ├───core/
│   │   ├───globalStore.ts
│   │   ├───result.ts
│   │   ├───sqlExecutor.ts
│   ├───levels/
│   │   ├───customLevels.ts
│   │   ├───index.ts
│   │   ├───level.d.ts
│   │   ├───mainLevels.ts
│   │   ├───custom/
.........自定义题目文件夹（md）
│   │   ├───main/
........基础题目文件夹（md）
│   ├───pages/
│   │   ├───IndexPage.vue
│   │   ├───LevelsPage.vue
│   │   ├───PlaygroundPage.vue