Vue.js 초급 공부 Part V - Vue CLI

CLI ? 

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

여기서 CLI 란 ?

명령 줄 인터페이스(CLI, Command line interface) 또는 명령어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다. 즉, 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며, 컴퓨터로부터의 출력 역시 문자열의 형태로 주어진다. (위키백과)

 

[ Terminal ] 

- node -v : 노드 버전 확인하기

- npm -v : npm 버전 확인하기 

- npm install -g @vue/cli : cli 설치 명령어 

- sudo npm install -g @vue/cli : 위 명령어 실행 시 권한 오류가 생겼을 때 sudo를 붙혀서 실행하면 된다 

 

CLI로 생성한 프로젝트

싱글 파일 컴포넌트 구조

싱글 파일 컴포넌트 체계에서 컴포넌트 등록하기

 

props & event emit 으로 데이터 교환 

id,pw post 방식 데이터 넘기기

axios 이용

 

• Reactivitiy : 데이터에 관한 변화를 뷰에서 감지해서 화면에 반영 및 화면 조작 
• Instance : 인스턴스안에 내용을 추가하면서 뷰를 꾸림
• Component : 화면의 영역을 구분해서 개발하는 방식 / 재사용성이 강함
• 컴포넌트 통신 : props - 상위에서 하위로 데이터를 내림 / event emit - 하위에서 상위로 이벤트를 올림
• HTTP 통신 라이브러리(axios) 
• 템플릿 문법 : 데이터 바인딩 - 데이터에 변화에 따라 화면에 반영 (콧수염괄호) / 뷰 디렉티브 - (v-로 이루어진 것들)
• Vue CLI : 프로젝트를 생성할 때 명령어를 사용하여 만드는 방법 (Command Line Interface)
• 싱글 파일 컴포넌트 : .vue 파일