vue designer

Vue 디자이너

VUE 구성 요소 설계 도구.

이 확장은 여전히 진행 중입니다. 이 확장에 대한 피드백이 있다면 정말 도움이 될 것입니다!

빠른 시작

• vscode 확장자를 다운로드하십시오

• Command Pallete를 열고 Open Vue Designer 선택하십시오. 그런 다음 현재 열린 단일 파일 구성 요소 ( .vue )의 미리보기 창을 볼 수 있습니다.

설정

vueDesigner.sharedStyles

미리보기에로드 될 CSS 경로 배열. 응용 프로그램에 재설정 CSS와 같은 글로벌 CSS가있을 때 유용합니다.

{
  "vueDesigner.sharedStyles" : [ " reset.css " ]
}

로드 된 CSS에서는 @import 지원하지 않습니다. CSS 파일에 따라 모든 것을 지정해야합니다.

지원되는 사전 처리기

Vue Designer는 현재 <template> , <script> 및 <style> 블록에서 전처리 서를 적극적으로 지원하지 않습니다. 다음 목록에 포함되지 않은 언어는 VUE 디자이너에서 작동하지 않을 수 있습니다.

• html ( <template> )
• JavaScript ( <script> )
• typeScript ( <script lang="ts"> )
• CSS ( <style> )

개발

Vue Designer는 서버와 클라이언트의 두 모듈로 분리됩니다.

서버는 편집기 프로세스에 의해 실행되며 구성 요소 코드를 구문 분석/분석하고 클라이언트 요청을 처리 할 책임이 있습니다. 클라이언트는 Compnent Preview를 렌더링하고 사용자의 상호 작용을 처리하는 것입니다. 서버와 클라이언트는 WebSocket을 통해 통신하여 구성 요소 데이터를 동기화합니다.

서버 코드는 TypeScript로 작성되었으며 CommonJS 형식으로 컴파일되는 반면 클라이언트 코드는 TypeScript이지만 Vite에 의해 번들로 제공됩니다.

클라이언트에 대한 코드는 src/view 에 있어야합니다.

모든 코드는 더 예쁘게 형식화되어야합니다.

존재하지 않는 외부 패키지의 타이핑의 경우 types/(package name) 에 있어야합니다.

비주얼 스튜디오 코드 확장

VSCODE를 디버그하려면 다음 단계를 따르십시오.

1. Dev Server를 시작하려면 yarn watch 실행하십시오.
2. vscode를 열고 편집기의 왼쪽에 디버그 창을 표시합니다.
3. 로컬 VUE 디자이너를 활성화하여 새 창을 열도록 Launch Extension 실행하십시오.
4. Command Pallete에서 Open Vue Designer 선택하십시오.

클라이언트 코드에 Dev 도구를 사용하려면 개발자 : Pallete 명령에서 개발자 도구 명령을 전환하십시오 .

명령

 # build sources
$ yarn build

# build and watch sources
$ yarn watch

# run test
$ yarn test

# format sources with prettier
$ yarn format

풀어 주다

$ npm version XXX # -> update version & generate changelog

# after edit changelog if needed
$ git add CHANGELOG.md
$ git commit -m " docs: changelog vXXX "

$ vsce publish