前言

接了学校一个SRP项目,所以最近一个月都开始搞这个OJ的前端开发,现在分享一些这个OJ部署的一些坑点,帮助大家避坑,也Mark下给自己做笔记用.

启动前端组件

git clone https://github.com/QingdaoU/OnlineJudgeFE.git
npm install
npm run build:dll

配置Config/index.js

npm run dev

FE即可成功编译

引入Component

• 创建Conponent VUE文件
  
• 配置route/route.js
  
• 配置views/index.js
  
• 参考iview语法设置导航栏入口
  
• 修改i18n的双语文件即可
  
  通过上述步骤即可将自己的组件引入到FE之中

关于OJFE使用的CSS坑点

QDUOJ这个平台实际上时使用了两种UI框架
1. iView
2. ElementUI
其中iView是作为UI组件库使用,所以一开始Coding的时候会发现前端的语法与ElementUI对不上.而ElementUI的实际作用仅仅是给OJ提供了动画效果,所以为了让自己的组件也有弹出的效果,我们要使用Panel组件使得自定义的组件具有相同的弹出动画效果.
如果需要自定义动画效果的话,则需要我们自身使用transition标签来创建动画效果

结语

现在其实开刚刚起步,大致把前端摸了一下(后端也会摸,但我不是主要负责这块的),后续应该还有坑点.到时候也会分享出来给大家看的.
小声BB,QDU的文档真的不咋地.(可能是我菜才看不懂吧,若有冒犯请见谅:joy:)