Vue 시작하기 ⑨ 개발환경 셋팅 및 프로젝트 생성

 

 

 

 

뷰 개발환경은 node js server이다

그리고 node js를 설치하면 npm이 같이 설치되는데 이는 node package manager의 줄임말이다

 

 

 

 

웹브라우저에서 ajax 요청은?

우리는 자바 기반의 서버를 배웠는데 뷰를 node.js 서버 기반에서 개발해야 하는데

그럼 ajax 요청을 어디로 해야 하나?

 

 

 

 

결국 서버를 두 개 돌려야 한다. 개발환경에서 계속 개발하기 쉽지 않은데

뷰는 이렇게도 가능하지만 리액트 같은 경우엔 cli 개발환경에서만 가능하다

 

 

 

 

dist 최종적으로 심어놓으면 그 밑에 꺼는 다 필요 없다 (개발과정일 뿐)

 

 

 

 

새로운 프로젝트를 생성하고 폴더를 확인해보면 다양한 폴더와 파일들이 존재한다

 

 

 

 

새로 만든 프로젝트 파일 안에서

npm run serve를 입력해보자

 

 

 

 

사용할 서버 주소가 나온다

위의 로컬 주소를 주소창에 복붙 하면 뷰 페이지가 나온다

 

참고로 터미널을 닫거나 Ctrl+c 입력하면 서버가 꺼진다

 

 

 

 

주소창에 입력했더니 이렇게 페이지가 나온다

 

 

 

그리고 프로젝트를 새로 생성하면 이런 경고? 창이 계속 뜨는데

타입 스크립트 컴파일러를 통해 init 해주면 해결된다

 

 

 

tsc --init 입력

 

 

 

 

웹 콘텐츠 만들기 위한 자원들은 assets에 들어간다. 

외부 자바스크립트 라이브러리, 이미지, 등등.. 빌드하면 나중에 알아서 사용되도록 가져가며 폴더가 사라진다

 

 

 

 

vue cli 개발환경에선 data는 함수 형태로 지정해줘야 함

데이터 함수에서 리턴하는 오브젝트가 모델 목록이 된다

 

 

 

 

 

일반적으로 data:{msg:"안녕하세요"}라고 작성했다면,

vue cli 환경에선 우리는 data(){ return {msg:"안녕하세요"} }라고 작성해줘야 한다

 

 

 

 

vue cli 환경에서 프로젝트를 만들 땐

vue create 프로젝트명을 입력한다. 여기서 프로젝트명 만들 때 대문자를 입력하면 에러가 난다 (소문자로 작성하기)

 

 

 

가장 첫 번째 (기본 옵션) 상태에서 엔터

 

 

 

프로젝트 만드는 중

 

 

 

 

위의 과정을 거치면 vue cli 환경에서 새로운 프로젝트 생성이 완료된다