Vue 시작하기 (+개발 환경 설정)

<Do it! Vue.js 입문>을 기본으로 배운 내용입니다.

1. 개발 환경 설정
2. Vue 시작하기
3. 개발자 도구로 코드 확인

1. 개발 환경 설정

뷰로 웹 앱을 개발하기 위한 환경을 구성하기 위해 다음과 같은 도구들을 설치

[더 많은 패키지 추가 https://ict-nroo.tistory.com/84]

※ Vue CLI 사용 방법을 잘 정리해놓은 블로그를 찾았다.

- kdydesign.github.io/2019/04/22/vue-cli3-tutorial/

2. Vue 시작하기

1) 코드 작성

index.html : 뷰라이브러리를 로딩시켜 메세지를 출력시키는 코드 작성

<html>
  <head>
    <title>Vue Sample</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        }
      });
    </script>
  </body>
</html>

크롬 브라우저에서 index.html파일을 실행

2) 결과

3. 개발자 도구로 코드 확인

1) 크롬 개발자 도구 (단축키 : F12)

어느 웹 앱이든 모두 동일하게 소스를 분석하고 확인할 수 있는 도구

2) 뷰 개발자 도구

뷰 애플리케이션에만 활용할 수 있는 도구
Component로 구성된 애플리케이션의 구조를 한눈에 확인할 수 있고, 각 컴포넌트별로 정의된 속성의 변화를 실시간으로 확인할 수 있어서 뷰로 제작한 웹 앱을 분석하거나 디버깅할 때 유용하다.

- 뷰 개발자 도구 활성화

[도구 더보기 > 확장 프로그램]을 클릭하면 아래의 화면이 뜬다.

[세부정보 > '파일 URL에 대한 액세스 허용'의 체크 박스에 체크]
개발자 도구를 종료하고, 웹화면으로 돌아가 새로고침한 후 다시 개발자 도구를 실행하면 Vue탭이 활성화된다.

- 뷰 개발자 도구 사용 방법

크롬 개발자 도구를 열고 'Vue'탭 선택

저작자표시 비영리 변경금지

'💻WEB FrontEnd > 프레임워크 Vue' 카테고리의 다른 글

Vue Router (0)	2020.07.02
Vue Componets 통신 (0)	2020.07.02
Vue Componets (0)	2020.07.02
Vue Instance (0)	2020.07.01
Vue.js란? (0)	2020.06.30

winnih_B

LINKS

CATEGORY

Vue 시작하기 (+개발 환경 설정)

1. 개발 환경 설정

2. Vue 시작하기

3. 개발자 도구로 코드 확인

'💻WEB FrontEnd > 프레임워크 Vue' 카테고리의 다른 글

티스토리툴바

Vue 시작하기 (+개발 환경 설정)

1. 개발 환경 설정

2. Vue 시작하기

3. 개발자 도구로 코드 확인

'💻WEB FrontEnd > 프레임워크 Vue' 카테고리의 다른 글

'💻WEB FrontEnd/프레임워크 Vue' Related Articles

티스토리툴바