오픈소스 프로젝트에 기여하는 모든 선구자들에게 경의를 표합니다. 여러분의 노력이 개방적이고 포용적이며 혁신적인 기술 세상을 구축하는 데 크게 기여하고 있습니다.

JeecgBoot-Vue3는 Vue 3와 Ant Design Vue를 기반으로 한 프론트엔드 오픈소스 프로젝트로, JEECG 백엔드와 함께 구축된 전체 스택 개발 프레임워크입니다.

프로젝트 이해 및 사용 경험

현재 JeecgBoot-Vue3 프로젝트에 대한 이해는 대부분의 기업 B2B 비즈니스 요구사항을 충족하며, 페이지는 간결하고 모듈 분류가 명확하며 확장성과 성능이 뛰어납니다. 빠른二次 개발을 통해 현재 산업의 빠른 변화에 대응할 수 있습니다.

시스템 관리, 메시지 관리, 테넌트 관리, Mock 예제 등 기본 모듈 외에도 블록 조립 방식의 저코드 개발 기능을 포함하고 있습니다.

물론 전체 프로젝트에서 개발자에게 가장 큰 요구사항은 개발 문서를 확인하고 읽을 수 있는 능력입니다. 이는 JeecgBoot 프로젝트 개발에만 해당되는 것이 아닙니다.

우리 학교에 배포된 졸업생 과제 선정 시스템은 JeecgBoot-Vue3 프로젝트를二次 개발하여 통합했습니다. 학생과 교수 간의 양방향 과제 선택 및 취소 시스템으로, 현재 약 1,500명의 졸업생이 동시에 양방향으로 과제 선택 및 취소, 메시지 알림 기능을 사용할 수 있습니다.

Jeecg-Boot-Vue3 학습 과정에서 겪은 문제점은 경험이 부족하여 잘못된 부분이 있을 수 있으니 비판하지 말고, 함께 개선하고 발전할 수 있도록 지적해주시기 바랍니다.

이제 JeecgBoot-Vue3의 구체적인 내용을 살펴보겠습니다:

버전 정보

JeecgBoot-Vue3

• 버전: 3.6.2
• 패키지 관리 도구: pnpm
• 빌드 도구: vite^4.4.9
• TypeScript 버전: ^4.9.5
• 프론트엔드 프로젝트 규칙: eslint + stylelint + prettier + husky + commitlint + conventional-changelog

실행 결과

워크스페이스

1. 디렉토리 구조

프론트엔드 프로젝트의 디렉토리 구조는 다음과 같습니다:

├── src                주요 개발 코드 디렉토리
│   └── components     프로젝트 컴포넌트
│   └── utils          프로젝트 유틸리티
│   └── views          프로젝트 페이지
│   └── store          프로젝트 상태 관리
│   └── router         프로젝트 라우팅
│   └── ...
├── tests              테스트 코드 디렉토리
├── types              프로젝트 타입 디렉토리
├── public             프로젝트 정적 리소스 디렉토리
├── package.json       환경, git, 코드 규칙, 커밋 규칙 관련 설정 파일(완전하지 않음)
├── .env
├── .env.development
├── .env.production
├── .gitignore
├── ...

전반적으로: JeecgBoot-Vue3의 프론트엔드 프로젝트 디렉토리는 전체적으로 비교적 규칙적이고 명확하며, 사용자와 개발자 모두 쉽게二次 개발 및 유지보수할 수 있습니다.

2. package.json 확인

프로젝트에서 사용하는 주요 의존성(완전하지 않음)

1. vue ^3.4.15 (프론트엔드 프레임워크)
2. vue-router ^4.1.0 (라우팅 라이브러리)
3. axios ^1.6.4 (HTTP 요청 라이브러리)
4. ant-design (UI 라이브러리)
5. dayjs (시간 처리 라이브러리)
6. echarts (데이터 시각화 라이브러리)
7. pinia (상태 관리 라이브러리)
8. ...

기타 의존성(완전하지 않음)

1. lodash
2. mockjs
3. nprogress
4. clipboard
5. ...

3. 개선 제안

1. 설정보다 규칙 (Convention over Configuration)

디렉토리 구조가 길어지는 문제를 해결하기 위해, 각종 설정을 분리하고 CLI 도구를 통해 프로젝트 설정 파일을 통합 관리하는 것이 좋습니다:

├── .config
│   └── vite.config.ts
│   └── .env
│   └── .env.development
│   └── .env.production
│   └── jest.config.mjs
│   └── postcss.config.js
│   └── prettier.config.js
│   └── 기타 설정 파일...
├── src
├── tests
├── types
├── public
├── package.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",
        ...
    }
}

pnpm run build:es
pnpm run lint:style

2. JeecgBoot 생태계 도구 구축

프론트엔드 코드는 monorepo를 사용하여 최소 두 개의 프로젝트로 분리 관리할 수 있습니다:

1. jeecgboot-components

컴포넌트를 개별적으로 패키징하고 통합 관리하여, 컴포넌트와 비즈니스 로직 간의 결합을 분리합니다. 2. jeecgboot-vue

비즈니스용 Vue 프레임워크 3. jeecgboot-react

비즈니스용 React 프레임워크 4. jeecgboot-cli

JeecgBoot 생태계 CLI 도구로 다음을 포함할 수 있습니다:

• 구문 검사 eslint
• 코드 스타일 검사
• stylelint
• jest
• 빌드 도구 설정 등
• JeecgBoot 생태계 템플릿 빠른 생성

3. 개별 컴포넌트 테스트 분리

components 디렉토리의 컴포넌트 src 폴더가 너무 중복되는 문제가 있습니다. 디렉토리 구조는 명확하지만 각 컴포넌트마다 src 폴더가 있어 코드 중복 문제가 발생할 수 있으므로 최적화가 필요합니다.

4. 결론

1. Jeecg-Boot-Vue3는 우리 팀의 개발 효율성을 향상시켰으며, 전반적으로 매우 원활하고 편리하며 개발 비용을 크게 절감했습니다.
2. Jeecg-Boot-Vue3는 오픈소스 프로젝트와 Jeecg 팀의 책임감 있는 태도와 오픈소스 정신에 대한 인정을 받았습니다.
3. 물론 커뮤니티의 지속적인 성장과 발전을 통해 Jeecg-Boot 프로젝트는 더욱 발전할 것이라고 믿습니다.

물론 프로젝트의 발전과 최적화는 하루아침에 이루어지지 않습니다.

파일 내부 인라인 처리를 통해 요청 수 감소, Tree-shaking, GZIP 압축, CDN 가속은 Jeecg-Boot 사용자가 수행할 수 있는 최적화 방법입니다.

전망

1. JavaScript 런타임? Rust v8 라이브러리를 사용하여 런타임 기능을 제공하고, 관련 없는 런타임 코드 주입을 줄이고 상위 계층에 고수준 인터페이스를 제공하여 높은 활용성을 제공합니다.
2. Rust WASM의 기능을 시도하여 일부 저수준 컴포넌트를 추가로 추출하고 패키징할 수 있습니다.
3. React 또는 데스크톱 버전을 출시하여 더 많은 기업 수요를 제공할 수 있습니다.
4. 알리바바 BizCharts를 통합하여 PC 환경의 개인화된 시각화 솔루션을 제공할 수 있습니다.