Vue.js 시작하기 (Visual Studio Code Vue.js Example)

이번 포스팅에서는 Vue.js 예제를 따라가보려고 합니다.

먼저 IDE 설치부터 환경설정을 시작으로 예제를 따라가보겠습니다.

개발환경 : Windows 10

IDE : Visual Studio Code

먼저 Visual Studio Code 홈페이지에서 IDE를 다운로드한다

설치아이콘을 누르면 메뉴얼 Doc 페이지로 이동된다.

VisualStudio Code 는 MIT 라이센스군요.

무료인건 알았지만 다시 짚고 넘어가고..

기본설정에 PATH 추가가 있고 저는 바탕화면 바로가기까지 체크해줬습니다.

설치를 완료하고 실행한 모습입니다.

Visual Studio Code 는 Sublime 처럼 편집기라고 생각되며

Extension 을 추가해서 개발을 진행할 수 있어 용이합니다.

이제 Vue.js 를 준비해보자.

Vue.js 를 검색하면 가장 위에 나오는 페이지이다.

우리는 node.js 를 따로 학습하지 않을 것이기 때문에 vue-cli 예제는 생략한다.

시작하기를 보면 JS Fiddle 예제를 보는게 가장 쉬운샘플이라고 나와있다.

실제로 링크를 타고 들어가보면 아주 심플한 코드가 나온다.

비슷하게 작성해보자.

index.html

<!DOCTYPE html>

<html>

  <head>

    <title>Vue Example</title>

  </head>

<body>

  <div id="app">

    <p>{{ message }}</p>

  </div>  

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script src="main.js"></script>

</body>

</html>

main.js

var app = new Vue({

  el: '#app',

  data: {

    message: 'Hello Vue!'

  }

})

이제 index.html 을 열어보면 vue.js 기본 예제는 완성이다.

F12를 눌러 개발도구를 켜보니 크롬이 vue-devtools 을 추천해주고 있다.

검색해서 확장 프로그램을 설치해주고.

????

vue.js 를 찾지못한다고 한다.

방법을 찾아보자.

chrome://extensions/

확장페이지 관리 페이지에서 vue.js devtools 를 들어가보자.

시크릿 모드에서 허용과 파일 URL에 대한 액세스 허용을 활성화하면 될 것 같다.

F12 개발도구에서 Vue 탭이 나오면 성공.

어디에 좋은지는 모르겠으나 일단 계속 진행하면서 알아봐야겠다.

내용이 길어지니 예제를 마무리하고 다음포스팅으로 이어가겠다.

'Javascript > Vue.js' 카테고리의 다른 글

vue 2.x버전 flatpickr 문제 Missing required prop: "value" found in FlatPickr (0)	2020.12.08
vue router URL 에서 "#" 제거하기 (hashbang) (0)	2020.12.07
Vue.js 에서 browser 구분하기. (how to detect browser vuejs) (0)	2020.11.30
vue table sorting object array (0)	2020.09.18
Vue.js IE11 호환문제 (SCRIPT1003 ':' 가 필요합니다. Expected ':') (0)	2020.07.23