Vue.js - CDN & Codepen

01.설치하기

• Vue.js 설치 참고 사이트

<script src="https://unpkg.com/vue@next"></script>

• 간단히 연습 프로젝트 혹은 문법 확인용이라면 CDN 방식으로도 Vue를 사용할 수 있습니다.

$ npm install vue@next

• Vue를 사용하여 대규모 애플리케이션을 구축할 때 NPM를 이용한 설치를 권장하고 있습니다.

02.CDN 활용하기

• codepen에서 간단하게 CDN을 활용하여 Vue.js를 작성해 봅시다.

• 이처럼 html 문서 {{ message }} 부분에 화면상으로 Hello Vue!가 출력된 것을 확인할 수 있습니다.

• JS 패널에서 톱니바퀴 모양의 설정 버튼을 클릭하면 CDN 항목을 작성하는 곳에 해당 CDN을 작성해주면 codepen의 HTML영역에 더이상 <script>태그로 CDN을 작성하지 않아도 됩니다.