dolphinscheduler 3.0.1首页功能介绍及前端项目本地启动配置

🔼上一集：dolphinscheduler 3.0.1代码下载编译及部署

*️⃣主目录：dolphinscheduler 3.0.1功能梳理及源码解读

🔽下一集：dolphinscheduler 3.0.1 项目管理（一）：项目基本操作、项目概览及工作流关系

首页

首页展示该用户下所有项目的任务、流程状态统计、定义数量统计（admin用户展示的是所有数据，包括所有普通用户数据），功能比较简单，没啥好介绍的，3.0主要增加了几种状态，前端架构大升级，都不能滚动截屏！本文主要研究下前端框架、本地配置。

• 2.0.6 首页如下：状态看着是超链接，实际上点不进去，有点误导人
  
• 3.0.1 首页如下，不能滚动截图，截了两张：状态增加了，流程定义变好看了，不像之前那么单薄，空白那么大
  
  

前端

2.0.6 框架

采用的vue2+webpack+js，通过webpack.dev.config.js，配置devServer服务器,实现本地开发

3.0.1 框架

vue3+vite+ts,通过vite.config.ts，配置本地服务器

项目启动

• 配置完vite.config.ts（需要先部署dolphinscheduler，可参照主目录的部署章节），启动项目npm run dev
  
• 登录
  

源码

• 国际化文件都单独分开了
  
• 到这就完成了前端从入门到放弃
  3.0首页统计图引入了naive-ui，层层点下去好像还是用到了echarts，搞不懂怎么这么复杂（咨询前端同事，说是通过echarts直接实现挺简单的）
  

其它

naiveui组件

有兴趣自研吧，后面还是好好研究我的后端吧🤣。naiveui官网地址

TypeScript

TypeScript是JavaScript的超集，扩展了JavaScript的语法，JavaScript代码可以在无需任何修改的情况下与TypeScript 一同工作，同时可以使用编译器将 TypeScript 代码转换为 JavaScript。
TypeScript通过类型注解提供编译时的静态类型检查，要求数据带有明确的类型，引入了模块、类的概念，可以把声明、数据、函数和类封装在模块中。适合开发大型应用。

.tsx文件表明是typescript文件并使用了JSX语法

有兴趣自研吧🤣。TypeScript官网地址

---

最后给大家分享一段代码，保证认识字的人都能看懂：

if("写的还凑合"){
    "请右下角点👍"
} else if("写的不错") {
    "请右下角点⭐收藏，没事就可以回味回味！"
} else {
    "请右下角点💬，接受夸赞，反对批评！"
    "当然有问题，热烈🌞欢迎🎈指正🙇‍♂️！"
}