Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다.
다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계되었으며,
핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 간단합니다.
그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.
Step 1
Vue의 Cdn script 코드를 사용하여 템플릿을 만들어보기
화면에 노출시켜 Vue를 확인하는 방법중 가장 간단한 방법은
index.html 파일을 만들고 Vue를 추가하는 것 입니다.
<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</script>또는:
<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>하단에 보이는 예제는 CDN코드를 사용하였을때에 대한 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</script>
<!--혹은-->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
<body>
</body>
<script>
</script>
</html>Step 2
Vue Cli를 사용하여 설치하기
2-1 Node 설치
Vue Project를 위해선 Node.js 와 npm 설치가 설치되어야 합니다.
자신의 운영체제에 맞게 Node.js 를 설치를해줍니다.
Node Js 링크를 통해 (https://nodejs.org/ko/) Node를 설치합니다.
설치 후 아래명령어를 통해 정상설치가 되었는지 확인합니다.
node -v
v18.16.1위와 같이 확인이 가능하며 정상적으로 설치가 됩니다.
2-2 Vue 설치
그 후 npm으로 Vue 를 설치를 하면 됩니다.
npm install vue설치 후 아래명령어를 통해 정상설치가 되었는지 확인합니다.
npm vue -v
9.5.1위와 같은 화면이 노출된다면 정상적으로 설치가 된것입니다.
2-3 Vue Cli 설치
Vue 설치 확인 후 Vue에 대한 명령어 / 프로젝트 생성 및 관리 등 을 확인하기 위해 Vue-cli를
설치합니다.
npm install -g @vue/cli cVue Cli가 설치 되었다면, 프로젝트를 만들어 정상적으로 vue가 설치 되었는지 확인해보겠습니다.
vue create my-project위 예시에서 my-project는 본인이 사용할 프로젝트 명으로 변경하여 사용하시면 됩니다.
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features 이후 버전 Vue의 버전을 선택하여야 하는데 필요하신 버전을 선택하여 사용하시면 됩니다.
📄 Generating README.md...
🎉 Successfully created project my-project.
👉 Get started with the following commands:
$ cd my-project
$ yarn serve프로젝트가 정상적으로 만들어 졌다면 위 예시와 같이 터미널에 노출됩니다.
cd my-project이후 현재 폴더 위치에서 cd my-project(프로젝트명) 명령어를 통해 해당 폴더로 이동하여
npm run serve명령어를 실행시키면
App running at:
- Local: http://localhost:8080/ 문구 노출과 함께 빌드가 완료된것을 확인할수있으며, 클릭하면
Vue 공식홈페이지가 나오게 됩니다.
이상 Vue에 대한 기본설정 및 시작하는 방법에 대해 알아보았습니다.
Step3
Vue로 화면 노출하기 및 특징
Vue Cdn으로 화면 노출하기
하단에 코드를 작성하여 저장 후 파일 형식을 html로 변경하여 저장하면 직접 확인이 가능한 인터넷 창이 열립니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--혹은-->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})
</script>
</html>아래의 화면과 같이 확인이 가능합니다 !
Vue 특징 : 선언적 렌더링
Vue는 간단한 템플릿 구문으로 아래처럼 DOM의 내부에서 데이터를 선언적으로 렌더링을
할 수 있게 만듭니다.선언적 렌더링은 문자열 템플릿을 렌더링하는 것과 비슷하지만, Vue의 내부에서는 더 많은 작업을하고 있으며, 데이터와 DOM을 연결시켜 반응형 상태를 유지하게 됩니다. 이때 브라우저의 콘솔에서 app.message = '안녕하세요 Vue!'에서 안녕하세요 Vue를 다른 값으로 설정하면 변경된 값을 확인할 수 있게됩니다.
app.message = 'hello_world'
'hello_world'step4
외부 라이브러리를 사용하여 간단한 차트 만들기
4-1 설치
차트를 만들기에 앞서 라이브러리를 다운을 받아봅시다
(https://www.chartjs.org/docs/latest/ 링크에서 확인가능합니다)
먼저 아래와 같이 명령어를 작성하여 라이브러리를 설치해줍니다.
npm install chart.js@2.7.0설치 후 App vue에 import Chart from 'chart.js'
import Chart from 'chart.js'설치한 외부 다이어리 chat.js를 import해줍니다.
4-2 화면 그리기
차트의 Ui 추가하기
에서 디자인을 확인 후 html코드를 추가해 줍니다.)
<template>
<div>
<h1>Chat 예시</h1>
<canvas id ="myChart" width="400" height= "400"></canvas>
</div>
</template>
<script>
import Chart from 'chart.js'
export default {
//컴포넌트 속성 , 인스턴스 옵션
mounted(){
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'skyBlue', 'pink', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [10, 15, 5, 9, 20, 3],
backgroundColor: [
'rgba(255, 135, 206, 0.2)',
'rgba(54, 255, 192, 0.2)',
'rgba(255, 50, 205, 0.2)',
'rgba(75, 128, 0, 0.2)',
'rgba(153, 64, 224, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 135, 206, 1)',
'rgba(54, 255, 192, 1)',
'rgba(255, 50, 205, 1)',
'rgba(75, 128, 0, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
console.log(myChart);
}
}
</script>App.vue에 Ui 추가해줍니다.
4-3 화면 출력
저장 후 build 후 확인해보면
위와 같은 결과물을 확인 할수있습니다.