Vue.js 개발환경 설정 및 Hello Vue.js 프로젝트

작성자: 명동칼국수 - 6월 19, 2018

Vue.js 개발환경 구성하기

뷰로 웹앱을 개발하기 위해서는 기본적으로 몇가지 도구를 설치해야 합니다.

크롬 브라우저
아톰(Atom) 텍스트 에디터
Node.js
뷰 개발자 도구(Vue.js devtools,크롬 확장 플러그인)

크롬 브라우저 설치

웹 개발을 위해서는 브라우저 환경을 먼저 구성해야 합니다. 구글에서 제공하는 크롬은 웹개발에 필요한 다양한 기능을 제공하는 개발자 도구를 지원합니다.

크롬 다운로드 ==> https://www.google.co.kr/chrome/index.html

크롬 개발자도구는 웹페이를 로딩되는 과정에서, 랜더링, 네트워크, 성능 등을 손쉽게 확인할 수 있습니다. 또한 자바스크립트 디버깅 및 웹페이지 성능 진단 등이 가능합니다.

아톰(Atom) 에디터 설치

아톰은 오픈소스 형태로 제공하는 무료 텍스트 에디터 입니다. 서브라임 텍스트(Sublime Text)나 웹스톰(WebStorm) 같은 유료 개발도구 있지마, 일단 아톰은 100% 무료이며, 오픈소스 형태로 제공되어 전세계에서 확장 플러그인들을 제공하고 있습니다.

아톰 다운로드 ==> https://atom.io/

node.js 설치

node.js 는 서버 사이드에서 자바스크립트를 실행하기 위한 환경입니다. 뷰 프로젝트를 구성하기 위핸 node.js를 설치하여 npm(node.js package manager)를 통해 관련 도구를 설치할 수 있습니다.

node.js 다운로드 ==> https://nodejs.org

뷰개발자 도구 설치

뷰로 만든 웹앱의 구조를 디버깅하거나 분석하기 위해 별도의 뷰 개발자 도구를 이용할 수 있습니다. 크롬 브라우저의 확장 플러그인을 통해 Vue.js devtool을 설치할 수 있습니다.

1. 구글에서 “vue.js devtools”를 검색합니다.

2. “Vue.js devtools - Chrome Web Store”를 클릭하여 구글 플러그인 스토어로 입력하여 “Chrome에 추가”를 클릭하여 설치합니다.

3. “확장 프로그램 추가”를 클릭하여 플러그인을 추가합니다.

Hello Vue.js 프로젝트 만들기

시작하기

개발환경을 구성 후 간단한 웹앱을 만들어 보겠습니다. 다음의 순서로 개발을 진행합니다.

아톰을 실행하여 index.html 파일을 생성하고 다음의 코드를 작성합니다.

<html>
  <head>
    <title>Vue Sample</title>
  </head>
  <body>
    <div id="app">
      {{message}}
    </div>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        }
      });
    </script>
  </body>
</html

저장한 index.html 파일을 크롬브라우저로 실행하여 확인하면 다음과 같은 화면이 출력됩니다.

크롬 개발자도구로 확인

크롬 메뉴에서 [도구 더보기-> 개발자도구] 클릭합니다. (개발자 도구 단축키 Win: F12, MAC: cmd+option+i )

console 탭에서 개발자 모드로 실행 되고 있음을 확인할 수 있습니다.

뷰 개발자도구로 확인

로컬파일을 브라우저로 실행하면 뷰 devtools 플러그인이 제대로 동작하지 않습니다. 기본 옵션으로 로컬 파일에 대한 접근 제한하며, 이를 로컬 파일에 대한 개발자도구를 확장하여 실행하려면

1. [도구 더보기-> 확장 프로그램]을 클릭합니다.

2. Vue.js devtools의 세부정보를 클릭합니다.

3. 파일 URL에 대한 액세스 허용을 가능하도록 변경합니다.

그런 다음 다시 시작하면 정상 기본을 확인할 수 있습니다.

뷰 개발자 도구 사용

뷰 개발자 도구를 활성화 하였으니, 크롬 개발자 도구에서 Vue탭을 엽니다.

화면에서 <Root>를 클릭하면 뷰 관련 속성을 확인할 수 있습니다.

끝.

이 블로그 검색

남산 아래 개발자들