Hello Vue.js! 프로젝트 생성하기

저번 포스팅에서 Vue.js 사용을 위한 셋팅을 했다.

이번엔 프로젝트를 생성후 Hello World! 의 Vue.js판인

Hello Vue.js! 를 출력해 보겠다.

먼저 이전 포스팅에서 설치한 Atom을 실행한다.

아마 실행 화면은 아래와 같을 것이다.

다음 아톰의 좌측 상단에서 File탭의 Open Folder를 들어가자

오픈 폴더에 들어간후 이전포스팅에서 다운받은

Node.js 폴더를 선택해준다.

Node.js폴더 우클릭후 New File을 눌러 Index.html을 만들어준다.

다음 Index.html을 아래와 같이 만들어주자.

간단하게 코드 리뷰를 해보자면, html기본 구조에 <div>태그를

하나 추가하고, 뷰 라이브러리를 로딩한 후 뷰로 Hello Vue.js!라는

간단한 메세지를 출력하는 코드이다. 뷰 인스턴스를 만들고

인스턴스에 정의된 데이터 객체의 메세지 프로퍼티를 화면에 출력하는것이다.

다음 크롬으로 index.html 확인을 해보자.

Index.html을 마우스로 드래그 하여 크롬 주소창에

가져다 대면 파일이 열린다.