[Vue] Vue Project 생성 하는 방법 & Vue CLI

Vue 프로젝트를 생성하고, router를 추가하자!

 

Vue 란?

Vue.js(간단히 Vue, /vjuː/, 뷰/view)는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크이다.[4] 다른 자바스크립트 라이브러리를 사용하는 웹 애플리케이션 프로젝트에 Vue.js를 도입하기 쉽게 설계되어 있는데, 이는 Vue.js가 점진적으로 채택할 수 있게 설계되어 있기 때문이다. 한편 Vue.js는 고성능의 싱글 페이지 애플리케이션(SPA)을 구축하는데 이용가능하다.
출처 : 위키백과 (https://ko.wikipedia.org/wiki/Vue.js)

즉, Vue는 front-end의 클라이언트 서버를 구축하기 위한 프레임워크로, 자바스크립트에 기반한다. 바닐라 자바스크립트보다 편하게 작성할 수 있으며, 컴포넌트 구조로 url 이동 없이 단일 페이지로 어플리케이션을 만들 수 있다.

 

Vue CLI?

Vue CLI aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations. At the same time, it still offers the flexibility to tweak the config of each tool without the need for ejecting.
출처 : Vue CLI (https://cli.vuejs.org/guide/installation.html)

vue의 환경을 기본적으로 설정하고, 기타 부수적인 세팅에 들어갈 노력을 덜어주는 플러그인 정도로 볼 수 있다. Vue CLI를 설치하면 기본적인 폴더 구조나, 스크립트가 작성되어 있어 실제 개발에 집중 할 수 있는 환경을 제공한다. 사용 하는것을 강하게 권장한다! 아래 링크를 통해 설치가 가능하며, Get Start에 설명이 잘 되어 있다.

https://cli.vuejs.org/guide/installation.html

Installation | Vue CLI

 

Vue 프로젝트 생성

vue cli 설치 기준

1. 콘솔 창에 아래 명령어를 입력하여 vue project를 생성한다.

vue create project // vue create [project 이름] 으로 작성한다.

2. 그러면 아래와 같이 버전을 선택할 수 있다. git bash에서 위 명령어를 입력하면 메뉴상에서 위아래 방향키 조작이 불가하므로, vscode나 기타 idle을 쓰는 것을 권장. 하단 버전은 자유롭게 선택하면 된다.

3. 생성이 완료되면 cd '프로젝트명'으로 현재 디렉토리를 한 뎁스 이동한다.

4. 좌측 폴더를 확인해보면 기본적인 구조가 모두 작성되어 있는 것을 확인 할 수 있다.

5. 콘솔에 'npm run serve' 명령어를 입력하여 서버를 실행시킬 수 있다.

npm run serve

6. Local과 Network 둘 중 아무거나 눌러도 동일하다. Ctrl을 누른 채로 클릭하면 된다.

7. 난 아무것도 하지 않았지만 벌써 템플릿이 채워져있고, 실행이 잘 되는 모습을 확인 할 수 있다!

 

이제부터는 컴포넌트를 각각 구성하며 나만의 웹사이트를 만들 수 있다! 여기까지 Vue CLI와 Vue project 생성 및 실행에 대해 알아보았다.