向所有投入到开源项目的先驱者致敬，感谢你们为构建开放、包容、创新的技术世界所作出的卓越贡献。
JEECGBOOT-VUE3 是一个基于 Vue 3 和 Ant Design Vue 的前端开源项目，与 JEECG 后端一起构建的一套全栈开发框架。
项目理解和使用心得
就目前我对于jeecg-boot-vue3项目的理解是，符合当前绝大部分企业的B端业务的需求 ，页面简洁大方，模块分类清晰，拓展性和性能的表现都非常不错。通过快速的二次开发接入，完全可以面对当前行业迅速变化的需求。
它包括了：系统管理，消息管理，租户管理，Mock示例 等基础常见的模块外，还包括低代码开发等通过类似积木的方式进行项目的开发。
当然整个项目而言，对开发人员最大的要求就是能具备查阅和阅读开发文档的能力，不单单是对于jeecgboot这个项目的开发而言。
在我们学校上线的毕业生课题选题系统，就是二次开发接入的jeecgboot-vue3的项目，集成毕业生和教师双向的选题系统。就目前来看完全可以容纳近1.5k左右的毕业生同时进行双向的选择课题和取消，双向发送通知消息的功能。
在学习jeecg-boot-vue3所遇到的问题，由于我的经验有限，说得不好，勿喷，只是希望能指出其中的问题，大家共同进步和学习。
好的，现在我们就来看看在JEECGBOOT-VUE3的具体内容：
版本信息
JEECGBOOT-VUE3
- 版本: 3.6.2
- 包管理工具：pnpm
- 打包构建工具：vite^4.4.9
- Tyescript 版本 ^4.9.5
- 前端项目规范：eslint + stylelint + prettier + husky + commitlint + conventional-changelog
运行效果
工作台
一、目录结构
前端项目的目录结构，如下：
java
├── src 开发主要代码目录
│ └── components 项目组件
│ └── utils 项目工具
│ └── views 项目页面
│ └── store 项目状态
│ └── router 项目路由
│ └── ...
├── tests 测试代码目录
├── types 项目类型目录
├── public 项目静态资源目录
├── package.json 以下为项目配置文件，关于环境、git、代码规范、commit规范的配置文件(为列举完全)
├── .env
├── .env.development
├── .env.production
├── .gitignore
├── ...总的来说: jeecgboot-vue3的前端项目目录，整体来讲比较规范和清晰 、对于使用者、开发者来讲都是比较容易入手 进行二次开发和维护的。
二、查看项目package.json
项目使用的主要依赖(未列举完全)
- vue ^3.4.15 (前端框架库)
- vue-router ^4.1.0 (路由库)
- axios ^1.6.4 (请求库)
- ant-design (UI库)
- dayjs (时间处理库)
- echarts (可视化处理库)
- pinia (状态管理库)
- ...
其他依赖(未列举完全)
- lodash
- mockjs
- nprogress
- clipboard
- ...
三、改进建议
1.约定优于配置
目录结构冗长，建议封装工具脚手架，将各类配置抽离，统一管理项目中的配置文件,通过cli脚手架工具进行项目的测试、代码规范和风格检查及项目的构建，如下：
arduino
├── .config
│ └── vite.config.ts
│ └── .env
│ └── .env.development
│ └── .env.production
│ └── jest.config.mjs
│ └── postcss.config.js
│ └── prettier.config.js
│ └── 其他配置文件...
├── src
├── tests
├── types
├── public
├── package.json
├── ...
json
{
"scripts": {
"dev": "jeecgboot dev -p 3000 -h localhost",
"build": "jeecgboot build:umd ...",
"build:es": "jeecgboot build:es ...",
"lint:style": "jeecgboot lint:style --scope scss/less/css"
"lint:md": "jeecgboot lint:md",
....
}
}
javascript
pnpm run build:es
pnpm run lint:style2. 构建jeecgboot生态链工具
前端代码，可以使用monorepo进行分别管理，划分出至少两个项目:
-
jeecgboot-components
通过对组件的单独封装和统一管理，隔离组件和业务B端的耦合，进而分离组件库。
-
jeecgboot-vue
业务的vue框架
-
jeecgboot-react
业务的react框架
-
jeecgboot-cli
jeecgboot生态的cli工具，可以包括以下内容：
- 语法检查eslint
- 代码规范检查
- stylelint
- jest
- 打包工具配置等
- 快速创建jeecgboot生态模板
3. 提取出的单独的组件，每个组件内分别测试，降低测试的粒度，确保组件的健壮性。
感觉components下的组件src此文件夹过于冗余了，目录结构虽然清晰但是，每一个组件下都有src文件夹，从感觉上来讲更符合规范，但是从代码上来讲src重复，可优化。
四、总结
- jeecg-boot-vue3 提高了我们团队的开发效率 ,整体使用下来非常流畅和方便，极大降低开发成本。
- jeecg-boot-vue3 符合我对一个开源项目和jeecg团队的认真负责，开源精神的认可。
- 当然我相信随着社区的不断壮大和发展，jeecg-boot项目会发展的更加的好。
当然项目的发展和优化不是一蹴而就的。
文件内联减少请求数 ，Tree-shaking , GZIP压缩 ，CDN加速已经变成jeecg-boot用户所可以进行的优化。
展望
- js运行时？使用rust v8库 提供的运行时能力，减少无关运行时代码的注入和向上层提供高层次接口，可玩性非常高。
- 是否尝试使用Rust WASM 的能力 ，对一些低层的组件进行进一步的抽取和封装。
- 是否尝试推出React或者桌面端版本来提供更多的企业级需求。
- 是否尝试集成阿里旗下BizCharts，PC端个性化场景可视化方案。