Vue 2.x version/설치방법

Vue 2.x CDN version

WonCoding_WS 2021. 12. 14. 21:56
반응형

Vue를 시작하기 전 사전 학습 내용은 HTML, CSS, JavaScript를 중간 수준의 지식을 가지고 있어야 합니다.

vue를 설치하는 과정은 여러 가지가 있습니다.

본 글에서는 Vue 2.x버전으로 3.x 버전과 나누어서 설명합니다.

화면에서 <script>안에 넣어주는 버전을 먼저 설명합니다.

 

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

또는 

<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
개발을 하기 위해서는 반드시 개발버전을 사용해야 합니다. 이것을 사용하여야만 크롬 devtools를 사용할 수 있습니다.
상용버전은 디버깅을 할 수 없도록 용량을 줄임으로 인하여 devtools에서 인식을 하지 못하는 상황이 발생합니다.

 

아래 html 기본 템플릿의 <head> ~ </head> 사이에  <script>~</script>를 붙여 넣습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- vue cdn을 요기에 입력합니다.  -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <title>Document</title>
</head>
<body>
    
</body>
</html>

이로써 Vue를 사용할 설정이 완료되었습니다.

 

 

 

 

 

반응형