이진욱의코딩

(vue.js)vue.js를 여러가지방법으로 설치해보고 실제 간단히 구동까지. 본문

vue.js

(vue.js)vue.js를 여러가지방법으로 설치해보고 실제 간단히 구동까지.

Crucifi 2019. 12. 11. 23:18

이번 시간부터는 vue.js를 여러 가지 설치방법을 배워보고 간단히 적용시키는 방법도 알아봅시다.

 

우선 vue.js가 무엇이지 먼저 살펴보도록 하겠습니다.

 

vue.js가 무엇일까요?

 

vue.js입니다.

 

 

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

 

저는 저번에 node를 설치하고 bitnami패키지를 설치해서 sql서버 등을 열어서 코딩을 앞서 진행한 적이 있습니다.

기본적으로 vs code를 켜고 서버를 켜고 매실행문마다 node main.js를 하나하나를 매번 입력시켜서 데이터로 crud를 진행했지만 이번에 vue.js(쉽게 뷰로 부르겠습니다.)를 하면서 쉽게 결과가 나오는 것을 보고 살짝 충격을 받았습니다.

이렇게나 간단히 코딩이되다니!!!!!

 

서론은 여기까지 말하고 이제 실제로 뷰를 깔아보도록 하겠습니다.

 

첫 번째로 당연하지만 코드를 돌릴 기본적인 프로그램이 있어야겠지요 예를 들어 vs code나 atom 같은..

 

두 번째로는 노드를 설치를 해야 합니다. 노드에 관해 설치방법은 제 블로그 글에 자세히 설명되어있으니 참조하시면 좋을 거 같습니다. 블로그 글 찾아보기 귀찮으실 거 같으니 좌표는 https://crucifi.tistory.com/50?category=799884입니다.

 

세 번째로는 이제 https://kr.vuejs.org/

 

Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

여기에 접속을 한 뒤에 설치를 진행하면 되는데 제가 배운 뷰의 두 가지 설치법 또는 사용법을 알려드리겠습니다.

어려우니 제가 요약해서 말씀드리면

 

1. html의 문서에 바로 스크립트 문을 입력해서 사용하는 방법

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

  위의 script문을 복사해서 붙여 쓰시면 됩니다.

 

2. vue cli를 사용하는 방법

 

Vue CLI(Command Line Interface)는 새로운 Vue 프로젝트를 시작하기 위한 빠르고 쉬운 강한 방법입니다.

 

윈도 10을 기준으로 설명드리겠습니다.

 

노드 설치가 완료가 되었다면

 

node.js command prompt

 

저런 화면이 나옵니다 저 화면에서 Node.js command prompt를 눌러서 실행시켜줍시다.

 

그러고 나서가 중요합니다.

 

1. 실행시킨 뒤의 기본 화면에서 

npm install -g @vue/cli

를 적어줍니다. 그렇게 되면 자기 혼자서 막 이것저것 바쁘게 설치를 합니다.(가만히 놔두시면 알아서 다 설치함)

 

2.  그다음은

vue create newvue1

이것을 적어줍시다. newvue1은 제가 설정한 프로젝트 이름입니다 변경하셔서 사용하시면 됩니다.

 

3. 방향키 건들지 말고 엔터를 한 번 더 쳐주시면 됩니다.

    그러면 또 자기 혼자 막 이것저것 설치를 합니다. 내버려두시면 됩니다.

 

그 뒤에는 이제부터 시작을 하겠다고 위치를 변경해주는 명령어가 나오고 서버를 돌리는 명령어가 나옵니다.

사진으로 보시죠

 

파란색명령어를 차례대로 적으시면 됩니다(사진처럼)

 

 

처음으로 cd newvue1을 적으시고 엔터

두 번째로 npm run serve를 적으시고 엔터

 

끝입니다.

 

그러면 prompt에 적혀있는 경로로 가보시면 

제가 만든 프로젝트 파일인 newvue1라는 폴더 안에 이것저것 설치가 되어있을 겁니다.

 

그 뒤에 마지막으로 

 

app running at:

-Local: http://local:~~/

-network:http://~~~~~:~~~/

라는 것이 나오는데 로컬 뒤에 적혀있는 http부터 복사해서 크롬 검색창에 붙여 넣기를 하면

 

이런화면이 나옵니다.

 

경로를 복사해서 엔터를 눌렀을 때 위와 같은 창이 나오면 성공하신 겁니다.

축하드려요~~~~

 

그 뒤에는 간단하게 예제를 한번 살펴보도록 하겠습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- vue.js를 다운받지않고 바로 끌어다가 쓸수있는 스크립트 코드임 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <div id="app">
        {{ message }} <!-- vue.js만의 문법이다. 알아두도록 --> 
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
            message: '안녕하세요 Vue!'
            }
        })
    </script>
</body>
</html>

 

제가 주석으로 적어놨습니다. 이 명령문을 실행시키면

 

 

이렇게 나옵니다.

 

 

제가 오늘 배운 내용은 여기까지입니다. 예전부터 뷰와 리액트를 계속해보고 싶었는데 우연한 기회에 이렇게 배우게 돼서 기분이 좋습니다. 더 열심히 코딩하도록 할게요 물론 블로그 포스팅도!!!!

 

저의 긴 글을 봐주셔서 감사합니다. 혹시 수정사항이 있으시면 댓글 부탁드릴게요!!!