[Vue.js] Vue Cli3 시작하기.

Vue Cli?

Vue 프로젝트의 개발 환경을 기본적인 세팅을 모두 설정해주는 도구이다.  

기본적인 프로젝트 세팅을 모두 해주기 때문에 기본 골격의 구조에 대한 걱정과 시간을 덜 수 있다.

 

Vue Cli 설치 순서.

[사용에디터 - visual studio code]

 

1. Node.js 설치

Node.js

 

2. vs코드 터미널에 'npm install -g @vue/cli'를 기입하여 vue/cli 설치

npm install -g @vue/cli

 

3.  vs코드 터미널에 'vue create 프로젝트명' 을 기입하여 프로젝트 생성

vue create 프로젝트명

 

4. vue create 프로젝트명으로 생성된 프로젝트 폴더를 에디터로 재오픈.

 

 

5. 정상적으로 오픈이 되었다면 아래 이미지와 같은 폴더 구조를 가진 Vue프로젝트가 생성된 것을 확인 할 수 있다.

 

6. 작업한 화면을 로컬상에서 라이브서버 실시간 확인은 vs코드 터미널을 오픈하여 'npm run serve' 를 기입하면 확인 할 수가 있다.

npm run serve

 

7. 위 명령어로 로컬 url을 생성했다면 브라우저에 복붙 or 'ctrl + click'를 동작하면 작업 프로젝트를 실시간 라이브서버에 반영 할 수 있다.