Vue 프로젝트 매니저로 프로젝트 설치하기
- Vue 프로젝트 매니저를 이용하면 GUI 환경에서 조금 더 쉽게 프로젝트 생성이 가능하다
1. 터미널에서 다음 명령어를 실행한다.
vue.cmd ui
2. 그럼 다음과 같이 프로젝트만들기 UI 화면이 나온다
3. 만들기 탭을 클릭한다 나는 workspace 안에서 실행했음으로 바로 프로젝트 작업 폴더가 나온다 여기서 새프로젝트를 만들어보세요 버튼을 클릭하자
4. 프로젝트 만들기 화면이 나온다. 프로젝트 폴더에 vue-project-manager라고 입력했고 패키지 매니저는 npm을 선택했다.
5. 그다음 프리셋 선택에서는 수동으로 선택하기를 누른다.
7. 프리셋 목록을 선택하자.
8. 버전은 3.x, Linter/Formatter / ESLint + Standard Config/ Lint On Save 옵션을 선택한 다음 프로젝트 만들기를 선택한다.
9. 프리셋은 따로 저장하지 않고 만들기를 실행한다. 저장하지 않고 진행 클릭!
10.프로젝트가 생성되었다. 왼쪽 LNB메뉴에 대시보드, 플러그인, 의존성, 설정, 작업목록 메뉴가 보이며 우측 상단의 사용자 정의 버튼을 클릭하여 위젯을 추가할 수 있다.
11. 대시 보드 : 대시보드 메뉴에서 프로젝트를 모니터링 하거나 관리할 수 있다.
- 포트 중지 : 실행 중인 네트워크 포트 종료
- 플러그인 업데이트 : 플러그인 메뉴에 설치되어 있는 플러그인 중 업데이트 가능한 플러그인 목록이 표시되고 업데이트할 수 있다
- 의존성 업데이트 : 의존성 메뉴에 있는 프로젝트 의존성 목록 중 업데이트 가능한 목록이 표시되고 바로 업데이트 할 수 있음
- 태스크 실행 : 작업 목록 메뉴에서 제공하는 프로젝트 태스크인 Server, build, lint, inspect 중 자주 사용하는 태스크를 선택하여 바로 실행 가능함
- 취약점 확인 : 현재 설치되어 있는 프로젝트 내에서 취약점 정보 제공
- 뉴스피드 : vue 관련 주요 뉴스 확인
12. 플러그인 : 프로젝트에 설치되어 있는 플러그인 목록 확인 가능함.
우측 상단의 플러그인 추가 버튼을 클릭해서 플러그인을 검색하고 설치 할 수 있다.
13. 의존성 : 개발에 사용하고 있는 플러그인의 버전과 정보를 확인할 수 있다.
- 각 플러그인 마다 더보기 버튼을 클릭하면 플러그인에 대한 github 또는 npm 페이지로 이동 가능
- package.json의 dependencies(메인 의존성)와 devDependencies(개발 의존성)이다.
14. 설정 - Babal, ESLint 등과 같은 플러그인은 각각의 플러그인 사용을 윟나 설정(Config)을 별도로 지정할 수 있다 이를 위한 각 프러그인 전용 별도의 config 파일을 생성해서 관리할지, package.json 안에서 사용 설정을 package.json 파일 하나에서 관리할 지 선택하는 것이다.
15. 작업목록
- server를 선택하고 실행버튼을 클릭하여 프로젝트를 실행할 수 있다.
- 프로젝트가 실행되면 프로젝트의 상태, 성능, 에셋, 의존성에 대한 실시간 정보를 확인할 수 있다.
- 성능 통계와 에셋을 통해 프로젝트 리소스가 어떤 성능으로 로드가 되는지 확인할 수 있어 매우 유용하다.
