[NodeJS/VueJS] 설치 및 프로젝트 생성 해보자

안녕하세요.

 

이번 포스팅은 Vue 의 설치 및 프로젝트 설정에 대해 간략하게 정리하도록 하겠습니다.

 

시스템 환경

 

• 운영 체제 : macOS Mojave
• Tool : VSCode
• Vue.js, ES6, Node.js

 

시작

 

Vue 를 사용하기 위해서는 다음과 같은 방법이 있습니다.

 

1. 공식 사이트에서 개발자 버전 혹은 배포 버전 을 다운받아 Script 로 연결하여 사용한다.
2. CDN 에 올라간 Vue 버전을 Script 로 연결하여 사용한다. npm에 올라간 최신 버전의 URL ( https://unpkg.com/vue/ ) 로 연결
3. NPM 을 이용하여 설치한다.

 

npm install vue vue-cli -g

 

위 방법중 마지막 3번째 방법을 이용하여 vue 를 설치하고 프로젝트를 생성해보겠습니다.

 

NPM 을 이용하여 vue 와 vue-cli 를 설치했으면 CLI 명령어를 이용하여 프로젝트를 생성해 줍니다.

 

vue init <template-name> [project-name]

 

project-name 은 당연히 작업하고자 하는 프로젝트 이름일 것입니다.

 

template-name 은 어떤것을 입력해야 할까요?

 

사용 가능한 템플릿 리스트를 확인 할 수 있는 명령어 입니다.

 

vue list

 

 

 

저는 Webpack 구조의 템플릿을 사용하도록 하겠습니다.

 

위의 CLI 양식으로 다음 예와 같이 명령어를 입력해주면 SampleProject 라는 프로젝트가 완성이 됩니다.

 

vue init webpack SampleProject

 

이로써 Vue 를 실행하기 위한 설치 부터 프로젝트 생성까지 완료 되었습니다.

 

이제 프로젝트 생성하여 화면 작업을 진행해봐야겠네요.