Vue.js를 시작하며, Installation

vue.js를 시작하는 이유(django template)

django로 백엔드를 구성하고 django template로 페이지를 만들었다. 장고만을 이용할 때, 사용자 편의 성을 위한 클라이언트의 비동기 처리를 javascipt, jquery, ajax로 구현해야 했는데, 구현해야하는 코드의 양이 적지 않았고, 이를 위해 새로 알아야 하는 내용이 많았다. 선택지가 javascript 밖에 없었다면 사용했겠지만, 프론트를 구현하기 위해 보통 사용하는 프레임워크들 중 가장 쉽게 접근이 가능하다고 하는 vue.js를 선택했다. (나머지 angular, react)

django_rest_framework + vue.js

django_rest_framework로 api를 작성하고, 페이지 동작과 필요 데이터를 vue쪽에서 모두 처리해주므로서, 프로젝트 관리와 코드 관리가 매우 깔끔해졌다. (기존에는 django view 쪽에서 필요한 자원을 모두 만들어서 보내줘야되서 view 쪽 코드가 rest_api로 구현할 때 보다 깔끔하지 않았다.)

vue.js docs를 보며 Intallation을 하는 것을 시작으로 vue.js에 관한 기록을 담아본다.

Installation

Compatibility Note

vue.js는 IE8 이하 버전은 지원하지 않는다.

Vue Devtools

Vue Devtools를 브라우저에 설치해서 개발하는 것을 추천한다.

CDN으로 사용하기

CDN으로 사용하는 방법은 최신버전으로 사용하기와 버전을 지정해서 사용하는 방법 두 가지가 있다. 공부용으로는 최신버전으로 사용하는 것이 좋으나, 실제 개발단계에서는 버전 오류가 날 수 있기 때문에 버전을 지정해서 사용하는 것이 좋다.

1) 최신버전으로 사용하기

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

2) 버전을 지정해서 사용하기

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

NPM

스케일이 큰 어플리케이션을 만들 때는 NPM으로 프로젝트를 만든다.

npm install vue

CLI

SPA을 빠르게 만들어 주는 방법, 나중에 vue cli docs를 봐야겠다.

Vue provides an official CLI for quickly scaffolding ambitious Single Page Applications

scaffolding

이 후 내용은 잘 모르겠으며, 아직은 개발에 필요하지 않다고 판단되어 건너뜀

Explanation of Different Builds
Dev Build
Bower
AMD Module Loaders

참고

vue.js doc