本文主要是介绍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
部署
本地；npm install & npm run dev
服务器：npm run build 打包生成dist文件夹下的静态文件，在web服务器启动即可
注意：在 Vue 项目中，构建后的 HTML 文件可能看起来没有内容，因为 Vue 使用了单页面应用程序（SPA）的架构。所以这些静态文件在本地是无法在浏览器预览的
这篇关于Vue项目学习（一）-SQL闯关的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
