Vue로 프로젝트 생성하기

Vue.js란?

Vue.js는 사용자 인터페이스 개발을 위한 Progressive Framework이다. 

 

Vue는 Model-View-ViewModel(MVVM) 패턴을 사용하는데, 이는 프로그래밍 로직과 UI를 분리해서 개발하는 패턴을 말한다. 이러한 개발 패턴은 ViewModel을 통해 데이터 바인딩 처리 및 가상 DOM을 통한 성능 및 개발 편의성을 제공하는데, 이는 Angular와 React의 장점을 모두 가진다고 볼 수 있다.  

 

 

Vue CLI로 프로젝트 생성하기

Vue CLI는 Vue 프로젝트 구성, 빌드 및 배포를 쉽게 해주는 플러그인이다. 

 

Vue CLI를 통해 프로젝트를 생성하는 방법은 크게 default option과  manually select option이 있으며, manually select option은 수동으로 설정을 할 수 있기 때문에 초기에 router와 store 세팅을 할 수 있다는 장점이 있다. 또한 한 번 수동으로 설정하게 되면 preset을 지정해 향후 프로젝트 생성 시 똑같은 버전의 프로젝트 생성이 가능하다는 특징이 있다. 

 

Vue CLI를 통해 프로젝트를 생성하는 방법은 아래와 같다.

(node와 npm이 설치되어 있다는 것을 전제로 함)

1. Vue CLI 설치

npm install -g @vue/cli


2.  Vue 프로젝트 설치

vue create vue-project (안될시에 vue.cmd로 하면 됨)


3. 프로젝트 열기

npm run serve

 

 

manually select option을 통해 프로젝트를 생성하는 방법도 위와 같으며, 일부 수동 설정이 필요하다는 차이점이 있다. 추가적으로 프로젝트 매니저로 만들 수도 있는데, 'vue ui'를 터미널에 입력하면 8000번 포트에 프로젝트 매니저가 생성이 되며 이를 통해 프로젝트를 만드는 방식도 존재한다.

 

 

위와 같은 방식을 통해 vue 프로젝트를 생성하면 어느정도 틀이 잡힌 프로젝트가 생성이 되는데, 구조는 아래와 같다.

1. src/asset: 이미지, css, 폰트
2. src/components: 컴포넌트 디렉토리
3. App.Vue: Root 컴포넌트
4. main.js: 가장 먼저 실행, Vue 인스턴스 생성
5. bable.config.js: 바벨 설정
6. package-lock.json: 패키지 의존성
7. package.json
  1) private: true이면 프로젝트를 올릴 수 없음
  2) scripts: 실행 관련 명령어
  3) devDependencies: 개발 시 필요한 패키지 정보

 

 

이번 글에서는 Vue 프로젝트를 생성하는 방법에 대해 알아봤으며, 어떠한 구조를 가지고 있는지에 대해서 알아봤다.

 

다음 글에서는 Router 설정과 Vue의 컴포넌트에 대해서 알아보도록 하자.