top of page

Vue.js 시작에서 화면구성까지 간단 설명

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 c

Vue 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 후 확인해보면


위와 같은 결과물을 확인 할수있습니다.

조회수 149회

Comments


bottom of page