Vue.js개념 총정리(5)_vue실행도구,cli설치

1.Vue CLI란

Command Line Interface의 약자로 명령어를 통한 특정액션을 수행하는 도구(실행도구) 이다.

기본 vue 개발환경인 프로젝트환경 세팅을 해주기 때문에 폴더 구조에 대한 고민, build,lib구성,webpack설정은 어떻게 해야되는지 등에 대한 고민을 덜 수 있다.

 

Vue CLI를 통해 생성한 프로젝트에서 개발한 vue 파일들은 결국엔 하나의 파일로 변환되어 주입이 된다.

이때 내부적으로 웹팩으로 돌아가는데 최신 Vue CLI에서는 웹팩의 설정이라던지 웹팩에 대한 내용을 내부적으로 숨기고 있어서

실제로 서비스를 구현, 또는 배포단계까지 확인을 하기 위해서는 웹팩에 대한 기본적인 도구에 대해서는 살펴보는 것이 좋다.

웹팩이란 ? 서로 연관 관계가 있는 웹 자원들을 JS, CSS, IMG와 같은 스태틱한 자원으로 변환해주는 모듈 번들러다.

참고 / Vue.js를 학습하기 위한 여러 개발환경들이 필요하다.

-Node.js : 서버 측 자바스크립트 언어이자 플랫폼

-npm : 앱의 의존성 관리를 위해 사용하는 노드 패키지 관리자(node package manager)

-vue cli : vue 앱 작성을 위한 기본틀을 제공해주는 도구

 

 

Vue CLI설치

open terminal   $node -v   //10점대 버전이상 $npm -v   //6점대 버전 이상 $sudo install -g @vue/cli

1-1. vue 파일(싱글파일컴포넌트)의 default template

ES6에서 컴포넌트 등록방법이 변경되었다.

<template> </template>   <script> import 컴포넌트변수명 from 경로 // 컴포넌트를 파일로 관리할 수 있음 export default{     //인스턴스 옵션 속성 기술     components : {        'app' : 컴포넌트변수명     } } </script>   <style> </style>   HTML / SCRIPT / CSS 순으로 한 파일에 관리

 

1-2. 상위컴포넌트에서 하위컴포넌트로 데이터 보내기

하위컴포넌트 파일 AppHeader.vue의 일부

<template>   <header>     <h1>{{ propsdata }}</h1>   </header> </template>   <script> export default {     props : ['propsdata']  // propsdata에 Header!! 라는 값이 상위컴포넌트로부터 전달됨                            // App.vue의 data가 변경되면 하위컴포넌트에도 실시간으로 반영됨. reactivity } </script>

 

상위컴포넌트인 App.vue의 일부

<template>  <div>     <app-header v-bind:props속성이름="상위컴포넌트 데이터 이름"></app-header>     <app-header v-bind:propsdata="str"></app-header>  </div> </templater>   <script> import AppHeader from './components/AppHeader.vue'   export default{  data : function(){   return {      str : 'Header!!!'    }  }.  components : {    'app-header' : AppHeader  } }

 

1-3. 하위컴포넌트에서 상위컴포넌트로 이벤트전달 emit

하위컴포넌트 파일 AppHeader.vue의 일부

<template>   <h1> {{ propsdata }} </h1>  //(6)전달받은 데이터 Hi 출력   <button v-on:click="sendEvent">send</button> // (1) 클릭이벤트 발생 </template>   <script> export default {     props : ['propsdata'],     methods : {        sendEvent : function(){          this.$emit('renew')    //(2) 상위컴포넌트로 이벤트명 전달 //renew 라는 이벤트 전달           }       } } </script>

 

상위컴포넌트인 App.vue의 일부

<template>  <div>     <app-header         v-on:renew="renewStr"   // (3) 하위컴포넌트로부터 받은 renew 이벤트를 통해 renewStr 메소드를 실행         v-bind:propsdata="str"></app-header>   // (5) props로 데이터가 다시 갱신되어 하위컴포넌트로 전달  </div> </templater>   <script> import AppHeader from './components/AppHeader.vue'   export default{  data : function(){   return {      str : 'Header!!!'    }  }.  components : {    'app-header' : AppHeader  },  methods : {    renewStr : function(){         this.str = 'Hi' // (4) Header!!!값을 Hi로 변경     }  } }