Vue CLI 정리

Vue-CLI란?

vue-cli 는 기본 vue 개발 환경을 설정해주는 도구다.
vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜 수 있다.

여기서 CLI 란 ?
명령 줄 인터페이스(CLI, Command line interface) 또는 명령어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다.

---

VUE-CLI3 설치 및 프로젝트 생성

npm i -g @vue/cli
vue create project-name

프로젝트 구조

서버 실행

npm run serve

main.js 파일

프로젝트를 보면 src 하위에 main.js파일이 존재한다.
파일을 들여다보면 다음과 같은 코드가 존재한다.

new Vue({
    render: h => h(App)
}).$mount("#app");

여기서 $mount("#app")은 el: '#app'과 동일한 코드다.

render란

vue내부적으로 사용하는 함수이자, 사용자들도 사용 가능한 함수.
템플릿이라는 속성을 정의 했을 때 내부적으로 render함수가 실행.

render()에 관해 많은 자료를 보았으나... 현재 나의 자바스크립트 수준으로는 이해하지 못하여 포스팅에 담진 못했다.

추후 실력이 조금 쌓였을때 다시 공부하고 포스팅 할 예정이다.

다음 포스팅에선 vue-cli에서 실제 컴포넌트를 만들고 사용하는 방법을 알아보겠다.

출처 인프런 Vue.js 시작하기 - Age of Vue.js