Framework/Frontend

[Vue.js] #3. Vue Project Manager 로 프로젝트 생성하기

호형 2022. 3. 24. 11:48

앞서 CLI로 vue 프로젝트를 생성하는 법을 살펴보았다. 

 

[Vue.js] #2. 기본 프로젝트 생성 및 실행하기

앞서 Vue.js 를 실행하기 위한 환경을 구성해봤다. [Vue.js] #1. 개발환경 구성하기 Vue.js 로 프로젝트를 진행하려 한다. 일단 가장 먼저 해야할일은 개발환경을 구성하는것이다. 그중에서도 가장 먼

oingdaddy.tistory.com

CLI가 익숙하지 않다면 GUI 환경에서도 프로젝트를 생성할 수 있도록 Vue Project Manager를 제공한다. 


Vue Project Manager 실행

> vue ui

터미널에서 이렇게 명령어를 수행해본다. 

vue ui

그럼 GUI가 시작된다고 나오고 localhost:8000 으로 접근할 수 있다고 한다. 접속해보자. 

Vue Project Manager

앞서 CLI를 통해 생성한 프로젝트가 있다고 해도 프로젝트매니저에서는 보이지 않는다. 기존에 만들어진걸 가지고 올때는 가져오기를 통해 가지고 올 수 있다. 

Vue Project Manager

 


Vue Project Manager로 프로젝트 만들기

이런식으로 기존에 만들어진 프로젝트를 가지고 올 수 있고 물론 새로 만들수도 있다. 만들기를 해보자. 맨 하단에 있는 "새 프로젝트를 만들어보세요" 를 눌러서 시작한다. 

 

새 프로젝트 만들기 

CLI 로 만들때와 똑같다. 말그대로 GUI로 표현해준것일 뿐이다. CLI로 기본으로 Vue 3로 만들었다면 이번에는 수동으로 선택을 해서 직접 구성을 해보도록 한다. 

 

새 프로젝트 만들기

기능(feature) 에서는 사용하고 싶은 기능들을 선택한다. Router와 Vuex 정도 선택을 하였다. 

 

새 프로젝트 만들기

마지막으로는 설정 부분에서 필요한 부분에 대한 변경을 하고 만들기를 누르면 된다. 조금 기다리면 생성이 된다.

 

vue project create

잠시 기다리면 이런 알람이 오며 프로젝트가 생성이 되었다고 나온다. 

 

vue project dashboard

그리고 화면은 이렇게 변경이 되며 생성한 프로젝트의 설정 변경 및 관리를 할 수 있다. 

 

끝!