Visual Studio Code에서 Vue.js 사용하기 2 - 프로젝트 생성

2022.04.18 - [프로그래밍/WEB] - Visual Studio Code에서 vue.js 사용하기 - 설치 방법

Visual Studio Code에서 vue.js 사용하기 - 설치 방법

 

이 전 글에서 설치를 다 하였으면 프로젝트를 생성해서 간단한 사이트를 Vue.js로 만들어 보자.

 

터미널에서 Vue.js 프로젝트가 위치할 경로로 이동해 준 다음 (이미 해당 경로면 안 해도 된다.)

vue create 프로젝트명

을 입력 엔터하여 프로젝트를 생성한다.

참고로 프로젝트명에 대문자는 불가능하다.

 

대문자를 입력하면 위와 같이 경고문구가 뜨고 프로젝트 생성이 되지 않는다.

 

프로젝트 폴더 안으로 이동 한 다음

npm run serve

을 입력 엔터하여 서버를 실행한다.

 

http://localhost:8080를 Ctrl+클릭하면 작업물을 브라우저로 확인할 수 있으며

아무것도 작업하지 않은 상태이기 때문에

CLI에 의해 프로젝트 생성시에 기본 페이지가 되는 App.vue를 보여준다.

 

탐색기에 App.vue을 열어 페이지가 어떤 구조로 되어 있는지 확인 할 수 있다.