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

部署

本地；npm install & npm run dev

服务器：npm run build 打包生成dist文件夹下的静态文件，在web服务器启动即可

注意：在 Vue 项目中，构建后的 HTML 文件可能看起来没有内容，因为 Vue 使用了单页面应用程序（SPA）的架构。所以这些静态文件在本地是无法在浏览器预览的