Vue CLI UI로 Vue 프로젝트를 쉽게 만들고 관리하세요.
5229 단어 Vue.js자바스크립트vue-cliTypeScript
소개
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
커멘드로 쾌적하게 프로젝트 관리합시다! !
Reference
이 문제에 관하여(Vue CLI UI로 Vue 프로젝트를 쉽게 만들고 관리하세요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hakshu/items/80ae38382cfd5990f87b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
먼저 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
커멘드로 쾌적하게 프로젝트 관리합시다! !
Reference
이 문제에 관하여(Vue CLI UI로 Vue 프로젝트를 쉽게 만들고 관리하세요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hakshu/items/80ae38382cfd5990f87b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
프로젝트가 생성되면 프로젝트의 대시보드 화면이 표시됩니다.

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

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

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

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

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

프로젝트 설정이 있거나

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

마지막으로
Vue 프로젝트를 지금부터 새롭게 작성하는 분은 꼭 $ vue ui
커멘드로 쾌적하게 프로젝트 관리합시다! !
Reference
이 문제에 관하여(Vue CLI UI로 Vue 프로젝트를 쉽게 만들고 관리하세요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hakshu/items/80ae38382cfd5990f87b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Vue CLI UI로 Vue 프로젝트를 쉽게 만들고 관리하세요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hakshu/items/80ae38382cfd5990f87b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)