vite vue3 lowcode

Vite2.x + Vue3.x + TypeScript H5 로우 코드 플랫폼 기반

중국어 |

현재는 단순한 템플릿일 뿐이며 나중에 더 완전한 메커니즘 시스템이 도입될 수 있습니다. 관심 있는 친구들은 이 프로젝트를 통해 vue3의 많은 흥미로운 새로운 기능과 게임 플레이를 접할 수 있습니다.

PS: 此项目为个人半年以前做的实验性小玩具，使用的都是最新的技术栈，后面由于个人时间问题，没有持续维护和完善，暂时计划于2022年下半年开始对项目进行整体的重构和重新设计，实现一个基本可用的简易低代码平台。感谢关注~

계획 구현:

• 작업 내역 스냅샷
• Vue 템플릿 구성 요소 생성 지원
• 구성 요소 개요 트리 생성
• 공통 양식 및 목록 템플릿 제공
• v-바인드 데이터 소스용
• 샌드박스에서 사용자 정의 로직 실행
• monaco-editor를 기반으로 한 사용자 정의 코드 완성 규칙
• vue3 createRenderer를 기반으로 한 사용자 정의 렌더러
• 스키마를 사용하여 데이터 구조를 설명합니다. (스키마는 검증 기능을 생성할 수 있으므로)
• (ㅇㅇㅇ)…생각나면 또 할게요~

모델 기반 뷰

가장 단순한 구조에서 모델 기반 뷰 시스템에는 다음 요소가 포함됩니다.

• 모델

  • 상태 구조 정의
  • 행동 정의

• 보다

  • 구독 상태
  • 트리거 동작

이는 대부분의 장면에 적용할 수 있는 매우 간단한 렌더링 모드입니다.

프로젝트 복제

git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.git
or
git clone --depth=1 https://github.com/buqiyuan/vite-vue3-lowcode.git

 cd vite-vue3-lowcode

pnpm install

• 달리다

pnpm serve

• 짓다

pnpm build

기술 스택

• 프로그래밍 언어: TypeScript 4.x + JavaScript
• 빌드 도구: Vite 2.x
• 프런트엔드 프레임워크: Vue 3.x
• 라우팅 도구: Vue Router 4.x
• 상태 관리: Vuex 4.x
• PC UI 프레임워크: Element Plus
• H5 UI 프레임워크: vant
• CSS 사전 컴파일: Stylus/Sass/Less
• HTTP 도구: Axios
• Git Hook 도구: Husky + Lint-staged
• 코드 사양: EditorConfig + Prettier + ESLint + Airbnb JavaScript 스타일 가이드
• 약정 사양: Commitizen + Commitlint
• 단위 테스트: vue-test-utils + jest + vue-jest + ts-jest
• 자동 배포: GitHub Actions

기능 목록

• 동적으로 페이지 추가
• 드래그 앤 드롭 구성요소 생성
• 서비스 워커 + indexeddb는 서버리스 프런트 엔드 상호 작용을 구현합니다.
• 데이터 소스 관리(Swagger JSON을 가져와 데이터 모델 및 인터페이스 생성 지원)
• 프리셋 기능 제공
• 더 많은 구성 요소 포장
• 다른...

간단한 지침

현재 양식을 사용하는 경우 관련表单控件表单容器안에 넣어야 하며按钮表单容器에 넣은 다음按钮的type表单提交按钮으로 설정한 다음 자동으로 제출 버튼을 클릭해야 합니다. 양식 컨테이너 내부의 모든 필드와 값을 수집합니다.

구성 요소 속성을 빠르게 생성

 // 在vant文档中 chrome控制台输入以下代码，快速生成组件属性
let propObj = {
  string : ( config ) => `createEditorInputProp( ${ JSON . stringify ( config ) } )` ,
  number : ( config ) => `createEditorInputNumberProp( ${ JSON . stringify ( config ) } )` ,
  boolean : ( config ) => `createEditorSwitchProp( ${ JSON . stringify ( config ) } )` ,
} ;

JSON . stringify (
  $$ ( '#props + table tbody tr' ) . reduce ( ( prev , curr ) => {
    const children = curr . children ;
    const key = children [ 0 ] . textContent . replace ( / -([a-z]) / g , ( all , i ) => i . toUpperCase ( ) ) ;
    const child3Text = children [ 3 ] . textContent ;
    const defaultValue = [ 'true' , 'false' ] . includes ( child3Text )
      ? child3Text
      : `' ${ child3Text == '-' ? '' : child3Text } '` ;
    const value = ( propObj [ children [ 2 ] . textContent ] ?? propObj [ 'string' ] ) ( {
      label : `' ${ children [ 1 ] . textContent } '` ,
      defaultValue ,
    } ) . replaceAll ( '"' , '' ) ;
    prev [ key ] = value ;
    return prev ;
  } , { } ) ,
) . replaceAll ( '"' , '' ) ; 

 // 在vant文档中 chrome控制台输入以下代码，快速生成组件事件
JSON . stringify (
  $$ ( '#events + table tbody tr' ) . reduce ( ( prev , curr ) => {
    const children = curr . children ;
    const event = {
      label : children [ 1 ] . textContent ,
      value : children [ 0 ] . textContent ,
    } ;
    return prev . concat ( [ event ] ) ;
  } , [ ] ) ,
)
  . replaceAll ( / (?<!:)"(?!,|}) / g , '' )
  . replace ( / " / g , "'" ) ; 

부분 기능 시연

브라우저 지원

로컬 개발의 경우 Chrome 80+ 브라우저 사용을 권장합니다.

최신 브라우저를 지원하고 IE는 지원하지 않습니다.

즉	가장자리	파이어폭스	크롬	원정 여행
지원하지 않음	최근 2개 버전	최근 2개 버전	최근 2개 버전	최근 2개 버전

제출 사양

• feat 새로운 기능을 추가합니다
• 수정문제 fix /BUG
• style 코드 스타일은 관련되어 있으며 실행 결과에 영향을 주지 않습니다.
• perf 최적화/성능 개선
• refactor
• revert 취소
• test 테스트 관련
• docs /메모
• build 빌드 시스템이나 외부 종속성을 변경합니다.
• chore 업데이트/스캐폴딩 구성 수정 등
• workflow 작업 흐름 개선
• ci 지속적 통합
• types 유형 정의 파일 변경
• wip 개발중입니다