FRONT-END

Vue.js 시작하기

지에스정 2021. 3. 6. 22:13

 

자바스크립트를 이용하여 사용자 인터페이스 제작을 위해 사용하는 3대 라이브러리/프레임워크로 React / Vue / Angular 가 있다.

 

React를 이때까지 주로 사용해 왔으나, Vue.js를 사용하는 기업들도 많아

 

Vue.js에 대해서 알아보고자 한다.

 

 

Vue.js 란

 

더보기

사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.

- 출처 : Vue.js 공식문서 kr.vuejs.org/v2/guide/index.html

Vue의 경우 리액트와 달리 싱글페이지 어플리케이션이며, html/css/javascript 코드를 하나에 파일에 표시하여 컴포넌트로 만들 수 있다.

 

특히 HTML기반 템플릿을 사용하여 배우기 어렵지 않는 점이 특징이다.

 

<template>
 ( html )
</template>

<script>
 ( javascript )
</script>

<style>
 ( css )
</style>

기본적으로 Vue 구성은 이러한 형식으로 되어 있다. 

 

 

Vue.js 시작하기

 

프로토 타이핑또는 학습 목적으로 CDN을 활용하여 다음과 같은 코드를 index.html에 입력하여 사용하는 방법도 있다.

 

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
</body>
</html>

 

대규모 어플리케이션 개발을 목적으로 하기 위해 NPM을 통해 설치하는 것을 권장한다.

 

npm install vue

 또한, 빠르게 개발할 수 있도록 도와주는 Vue CLI를 제공하고 있다.

 

npm install -g @vue/cli

 

출처 :  Vue.js 공식문서  kr.vuejs.org/

          Vue CLI공식문서  cli.vuejs.org/