[Vue.js] 시작하기

에약 시스템 토이 프로젝트가 끝나고 Vue.js를 공부하려고 합니다.

 

사실상 기록을 남기면서 학습하는 것이 귀찮기는 하지만, 나중에 구글링을 하는것 보다 빠를거 같아서 기록을 남겨보고자 합니다.

 

시작하기

---

저는 Vue.js를 처음 공부하는 것이기 때문에 빌드부터 다루기 쉽지 않습니다.

 

그렇기 때문에 웹 브라우저에서 코딩하고 실행해 볼수 있는 https://jsbin.com

JS Bin

JS Bin을 사용하려고 합니다. 

 

링크를 클리해보시게 되면 다음과 같은 화면을 보실수가 있습니다.

 

차례대로 html, JavaScript 작성란이 보이고 Output 출력란이 보입니다.

 

작성이 되는 순간마다 실행이 되는것으로 보이고, 자동 실행을 이용하지 않을수도 있습니다(체크박스 off)

 

그리고 좌측 상단에 보시면 File, addlibrary, share 탭이 보입니다.

 

먼저 File에서는

새로운 Bin을 추가할 수 있는 New, Bin을 삭제할 수 있는 Delete, Bin 보관을 위한 archive 등등이 있다.

 

addlibrary에서는 각 라이브러리를 추가하여 사용할 수 있게 각 src를 저장해 두고 사용자에게 제공해 준다.

 

우리는 Vue를 이용해 작업을 할 예정이니 vue를 찾아서 넣어줘도 되지만, 튜토리얼에서 따라할 예정이라 귀찮지만 복붙을 해보자.

<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

위 두가지 버전 중 선택해서 해도 되지만 개인적으론 상용버전을 추천한다.

 

이렇게 body 안에 가장 마지막 줄에 삽입해주면 Vue를 시작할 준비가 완료 되었다.