topology vue demo

토폴로지 데모

토폴로지 기반 토폴로지 편집기 + elemenu-ui + vue-cli (학습 참고용)

현재 이 기능은 매우 간단합니다. Vue에서 작성한 토폴로지에 대한 여러 데모를 참조하고 이를 통합하여 익숙한 것으로 변경했습니다. 토폴로지에 API 구현을 계속 유지하고 추가할 예정입니다.

기술선택

• Vue-Cli
• 토폴로지
• 요소UI

아이디어

일반적인 프레임은 비교적 잘 만들어진 다른 데모를 기반으로 하고 있으며, 레이아웃에 따라 컴포넌트를 나누어 컴포넌트별 개발을 용이하게 합니다. 주로 캔버스 객체를 조작하는 방식으로 캔버스를 각 컴포넌트에 전달하고, 컴포넌트가 스스로 동작하거나(동일한 애플리케이션 주소로 객체를 조작하는 것이 원칙), 부모 컴포넌트의 메소드를 콜백하기 위해 내보낸다. 공식 Le5le 예제는 Nuxt로 작성되었으며 Vuex를 사용하여 호출할 메서드를 상위 구성 요소에 알리고 싶지 않기 때문에 vuex를 제거하고 현재 항목으로 대체했습니다. 지금까지 아무런 문제도 발생하지 않았습니다. 더 좋은 방법이 있으면 조언을 부탁드립니다.

용법

프로젝트 운영

 npm i
npm run serve

프로젝트 빌드

 npm run build

파일 린트 및 수정

 npm run lint

FAQ

App.vue에서 padding: 50px인 이유

이는 토폴로지 버그를 테스트하기 위한 것입니다. 왼쪽 구성 요소를 캔버스로 드래그하면 페이지가 특정 위치로 되돌아갑니다. 프로젝트에 컴포넌트로 넣을 때 반드시 별도의 인터페이스는 아니지만 대화 상자나 컨테이너에 의해 래핑된 컴포넌트로 사용될 수 있으므로 이 버그는 여전히 어느 정도 영향을 미칠 것입니다. 정상적인 상황에서는 제거될 수 있습니다.

스크린샷 실행