特价旅游机票网站建设,福州网站建设公司,商城网站建设快速服务,网页设计与网站建设过程Hello , 我是小恒不会java。今天来阅读一个Vue纯前端项目--SQL在线闯关 进步的方法除了文档书籍视频#xff0c;学会阅读源代码#xff0c;从代码中学会解决需求的方法也是必要的 已部署完成#xff0c;在线体验#xff1a;http://sql.yunduanjianzhan.cn
背景
简介
闯… Hello , 我是小恒不会java。今天来阅读一个Vue纯前端项目--SQL在线闯关 进步的方法除了文档书籍视频学会阅读源代码从代码中学会解决需求的方法也是必要的 已部署完成在线体验http://sql.yunduanjianzhan.cn
背景
简介
闯关式 SQL 自学教程网站结合鱼皮自己的 SQL 学习实践经验编写了 30 多个关卡用户可以在线提交 SQL 代码做题闯关 GitHub地址https://github.com/liyupi/sql-mother?tabreadme-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的架构。所以这些静态文件在本地是无法在浏览器预览的
