소개

2018년에 Vue CLI3가 출시되었지만, 이때 GUI에서 프로젝트 작성 도구가 새로 도입되었습니다.
그 툴의 사용법을 간단히 기재합니다.

【공식 사이트】
Vue CLI 3

※Vue CLI3의 개요는 2018년의 Vue Fes Japan에서 Vue CLI의 제작자가 발표했으므로, 그쪽의 자료를 봐 주세요.
Vue CLI 3 and its Graphical User Interface (Guillaume Chau)

Getting Started

먼저 Vue CLI를 설치합시다.
버젼 2 이전의 패키지명은 「vue-cli」였지만, 버젼 3부터는 「@vue/cli」가 되었으므로, 낡은 버젼으로부터 바꾸는 사람은 주의합시다.

$ npm install -g @vue/cli
# もしくは
$ yarn global add @vue/cli

설치 후 다음 명령을 치면 브라우저에서 프로젝트 관리자가 시작됩니다.

$ vue ui

새로 만들려면 만들기 탭을 선택하고 기존 Vue 프로젝트를 추가하려면 가져오기 탭을 선택합니다.

# ちなみにこれまで通りCLIでプロジェクト作成する場合は
$ vue create my-project

프로젝트 만들기

초기 설정

만들기 탭에서 새 프로젝트 만들기를 선택하면 프로젝트 설정 화면으로 이동합니다.
프로젝트 이름 설정, Git 리포지토리 초기화 설정에서 패키지 관리자를 선택할 수도 있습니다.

프리셋

초기 설정을 한 후 프리셋 선택으로 이동합니다.

기본 프리셋은 Babel과 ESLint입니다. git 리포지토리에서 프리셋을 읽을 수도 있습니다.


수동으로 사전 설정을 선택할 수도 있습니다.
이전 Babel, ESLint 외에도 TypeScript 및 PWA 지원, Vuex 및 테스트 프레임 워크를 선택할 수 있습니다.
선택한 프리셋은 프로젝트를 만들 때 자동으로 설치 및 설정됩니다.



설정 탭에서 선택한 프리셋에 따라 상세한 설정을 합니다.
한 번에 설정이 완료되면 오른쪽 하단의 "프로젝트 만들기"버튼을 누르십시오!


프로젝트를 저장할 때 설정한 프리셋을 저장할 수 있습니다.
자신의 정해진 설정이 있는 경우는, 1번 보존해 두면 매회 설정하지 않아도 되므로 편리하네요!

프로젝트 대시보드

프로젝트가 생성되면 프로젝트의 대시보드 화면이 표시됩니다.


이 대시보드는 오른쪽 상단의 '사용자 정의' 버튼에서 위젯을 추가할 수 있습니다.


몇 가지 위젯을 추가해 보았습니다.
package.json에 나열된 작업을 수행하거나 포트를 종료할 수 있습니다.
「취약성 체크」와 「의존 관계의 갱신」은 향후 기능이 추가되는 것 같네요.


그리고 재미있는 것은, 이 대시보드로 RSS도 읽을 수 있게 되어 있습니다.


왼쪽 메뉴에서 Vue 플러그인을 관리하거나


종속 패키지를 어떻게 든 할 수 있습니다.


프로젝트 설정이 있거나


프로젝트 작업을 수행할 수 있습니다.

마지막으로

Vue 프로젝트를 지금부터 새롭게 작성하는 분은 꼭 $ vue ui 커멘드로 쾌적하게 프로젝트 관리합시다! !